Dix minutes, prenez vous pour comprendre la nouvelle façon d'écrire Vue3

Language 2023-05-05 13:40:15 views: null

Récemment, en raison des besoins du projet, j'ai dû apprendre Vue3. Il a donc fallu 4 heures pour parcourir Vue3. Maintenant, laissez-moi vous amener à comprendre rapidement comment Vue3 est écrit.

Le but de cet article est de permettre aux personnes qui ont déjà une expérience de développement Vue2 de maîtriser rapidement la méthode d'écriture de Vue3.

Par conséquent, cet article suppose que vous maîtrisez le contenu de base de Vue et ne présente que ce que vous devez savoir pour écrire du code Vue3.

1. Trois façons scriptd'

Tout d'abord, Vue3 a ajouté une nouvelle chose appelée composition api, qui s'appelle Composition API en anglais. Par conséquent, Vue3 prend scriptdésormais en charge trois modes d'écriture,

1. La méthode d'écriture Vue2 la plus basique

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
}
</script>
复制代码

2. L'attribut setup()

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script>
import { ref } from 'vue';
export default {

  // 注意这部分
  setup() {
    let count = ref(1);
    const onClick = () => {
      count.value += 1;
    };
    return {
      count,
      onClick,
    };
  },
  
}
</script>
复制代码

3、<script setup>

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(1);
const onClick = () => {
  count.value += 1;
};
</script>
复制代码

Comme vous pouvez le voir, à la fois le nombre de lignes de code et la compacité du code, <script setup>la méthode est la forme la plus simple.

Si vous connaissez Vue, je vous recommande la manière dont vous l'utilisez.<script setup>

Cette façon d'écrire fait de Vue3 mon framework frontal préféré.

Si vous êtes encore nouveau dans le front-end, je vous recommande d'apprendre d'abord la première façon d'écrire.

Parce que la charge d'apprentissage de la première façon d'écrire est plus petite, apprenez d'abord la première façon, maîtrisez l'utilisation la plus élémentaire de Vue, puis, selon mon article, maîtrisez rapidement le contenu le plus important de Vue3.

La première façon d'écrire est la même que la façon d'écrire Vue2 dans le passé, nous ne la présenterons donc pas trop.

La deuxième façon d'écrire, tous les objets et méthodes doivent returnêtre utilisés, ce qui est trop verbeux. À l'exception des anciens projets, vous pouvez découvrir les nouvelles fonctionnalités de Vue3 de cette manière, personnellement, je ne recommande pas d'apprendre de cette façon. Quoi qu'il en soit, je ne prévois pas d'améliorer cette partie pour le moment.

Donc, ensuite, nous introduisons principalement, c'est-à-dire <script setup>ce qu'il faut comprendre dans cette méthode d'écriture.

注意： <script setup> 本质上是第二种写法的语法糖，掌握了这种写法，其实第二种写法也基本上就会了。（又多了一个不学第二种写法的理由）。

二、如何使用 <script setup> 编写组件

学习 Vue3 并不代表你需要新学习一个技术，Vue3 的底层开发思想，跟 Vue2 是没有差别的。

V3 和 V2 的区别就像是，你用不同的语言或者方言说同一句话。

所以我们需要关心的，就是 Vue2 里的内容，怎么用 Vue3 的方式写出来。

1、data——唯一需要注意的地方

整个 data 这一部分的内容，你只需要记住下面这一点。

以前在 data 中创建的属性，现在全都用 ref() 声明。

在 template 中直接用，在 script 中记得加 .value 。

在开头，我就已经写了一个简单的例子，我们直接拿过来做对比。

1）写法对比

 // Vue2 的写法

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
}
</script>
复制代码
 // Vue3 的写法

<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script setup>
import { ref } from 'vue';

 // 用这种方式声明
const count = ref(1);

const onClick = () => {
   // 使用的时候记得 .value
  count.value += 1;
};
</script>
复制代码

2）注意事项——组合式 api 的心智负担

a、ref 和 reactive

Vue3 里，还提供了一个叫做 reactive 的 api。

但是我的建议是，你不需要关心它。绝大多数场景下，ref 都够用了。

b、什么时候用 ref() 包裹，什么时候不用。

要不要用ref，就看你的这个变量的值改变了以后，页面要不要跟着变。

当然，你可以完全不需要关心这一点，跟过去写 data 一样就行。

只不过这样做，你在使用的时候，需要一直 .value。

c、不要解构使用

在使用时，不要像下面这样去写，会丢失响应性。

也就是会出现更新了值，但是页面没有更新的情况

// Vue3 的写法
<template>
  <div>{{ count }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(1);
const onClick = () => {
  // 不要这样写！！
  const { value } = count;
  value += 1;
};
</script>
复制代码

注意： 学习 Vue3 就需要考虑像这样的内容，徒增了学习成本。实际上这些心智负担，在学习的过程中，是可以完全不需要考虑的。

这也是为什么我推荐新人先学习 Vue2 的写法。

2、methods

声明事件方法，我们只需要在 script 标签里，创建一个方法对象即可。

剩下的在 Vue2 里是怎么写的，Vue3 是同样的写法。

// Vue2 的写法
<template>
  <div @click="onClick">
    这是一个div
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('clicked')
    },
  },
}
</script>
复制代码
// Vue3 的写法
<template>
  <div @click="onClick">
    这是一个div
  </div>
</template>

<script setup>

// 注意这部分
const onClick = () => {
  console.log('clicked')
}

</script>
复制代码

3、props

声明 props 我们可以用 defineProps()，具体写法，我们看代码。

1）写法对比

// Vue2 的写法
<template>
  <div>{{ foo }}</div>
</template>

<script>
export default {
  props: {
    foo: String,
  },
  created() {
    console.log(this.foo);
  },
}
</script>
复制代码
// Vue3 的写法
<template>
  <div>{{ foo }}</div>
</template>

<script setup>

// 注意这里
const props = defineProps({
  foo: String
})

// 在 script 标签里使用
console.log(props.foo)
</script>
复制代码

2）注意事项——组合式 api 的心智负担

使用 props 时，同样注意不要使用解构的方式。

<script setup>
const props = defineProps({
  foo: String
})

 // 不要这样写
const { foo } = props;
console.log(foo)
</script>
复制代码

4、emits 事件

与 props 相同，声明 emits 我们可以用 defineEmits()，具体写法，我们看代码。

// Vue2 的写法
<template>
  <div @click="onClick">
    这是一个div
  </div>
</template>

<script>
export default {

  emits: ['click'], // 注意这里
  methods: {
    onClick() {
      this.$emit('click'); // 注意这里
    },
  },
 
}
</script>
复制代码
// Vue3 的写法
<template>
  <div @click="onClick">
    这是一个div
  </div>
</template>

<script setup>

// 注意这里
const emit = defineEmits(['click']);

const onClick = () => {
  emit('click') // 注意这里
}

</script>
复制代码

5、computed

直接上写法对比。

// Vue2 的写法
<template>
  <div>
    <span>{{ value }}</span>
    <span>{{ reversedValue }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'this is a value',
    };
  },
  computed: {
    reversedValue() {
      return value
        .split('').reverse().join('');
    },
  },
}
</script>
复制代码
// Vue3 的写法
<template>
  <div>
    <span>{{ value }}</span>
    <span>{{ reversedValue }}</span>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
const value = ref('this is a value')

// 注意这里
const reversedValue = computed(() => {
  // 使用 ref 需要 .value
  return value.value
    .split('').reverse().join('');
})

</script>
复制代码

6、watch

这一部分，我们需要注意一下了，Vue3 中，watch 有两种写法。一种是直接使用 watch，还有一种是使用 watchEffect。

两种写法的区别是：

  • watch 需要你明确指定依赖的变量，才能做到监听效果。

  • 而 watchEffect 会根据你使用的变量，自动的实现监听效果。

1）直接使用 watch

// Vue2 的写法
<template>
  <div>{{ count }}</div>
  <div>{{ anotherCount }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script>
export default {
  data() {
    return {  
      count: 1,
      anotherCount: 0,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
  watch: {
    count(newValue) {
      this.anotherCount = newValue - 1;
    },
  },
}
</script>
复制代码
// Vue3 的写法
<template>
  <div>{{ count }}</div>
  <div>{{ anotherCount }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script setup>
import { ref, watch } from 'vue';

const count = ref(1);
const onClick = () => {
  count.value += 1;
};

const anotherCount = ref(0);

// 注意这里
// 需要在这里，
// 明确指定依赖的是 count 这个变量
watch(count, (newValue) => {
  anotherCount.value = newValue - 1;
})

</script>
复制代码

2）使用 watchEffect

// Vue2 的写法
<template>
  <div>{{ count }}</div>
  <div>{{ anotherCount }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script>
export default {
  data() {
    return {  
      count: 1,
      anotherCount: 0,
    };
  },
  methods: {
    onClick() {
      this.count += 1;
    },
  },
  watch: {
    count(newValue) {
      this.anotherCount = newValue - 1;
    },
  },
}
</script>
复制代码
// Vue3 的写法
<template>
  <div>{{ count }}</div>
  <div>{{ anotherCount }}</div>
  <button @click="onClick">
    增加 1
  </button>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(1);
const onClick = () => {
  count.value += 1;
};

const anotherCount = ref(0);

// 注意这里
watchEffect(() => {
  // 会自动根据 count.value 的变化，
  // 触发下面的操作
  anotherCount.value = count.value - 1;
})

</script>
复制代码

7、生命周期

Vue3 里，除了将两个 destroy 相关的钩子，改成了 unmount，剩下的需要注意的，就是在 <script setup> 中，不能使用 beforeCreate 和 created 两个钩子。

如果你熟悉相关的生命周期，只需要记得在 setup 里，用 on 开头，加上大写首字母就行。

// 选项式 api 写法
<template>
  <div></div>
</template>

<script>
export default {
  beforeCreate() {},
  created() {},
  
  beforeMount() {},
  mounted() {},
  
  beforeUpdate() {},
  updated() {},
  
  // Vue2 里叫 beforeDestroy
  beforeUnmount() {},
  // Vue2 里叫 destroyed
  unmounted() {},
  
  // 其他钩子不常用，所以不列了。
}
</script>
复制代码
// 组合式 api 写法
<template>
  <div></div>
</template>


<script setup>
import {
  onBeforeMount,
  onMounted,

  onBeforeUpdate,
  onUpdated,

  onBeforeUnmount,
  onUnmounted,
} from 'vue'

onBeforeMount(() => {})
onMounted(() => {})

onBeforeUpdate(() => {})
onUpdated(() => {})

onBeforeUnmount(() => {})
onUnmounted(() => {})
</script>
复制代码

三、结语

好了，对于快速上手 Vue3 来说，以上内容基本已经足够了。

这篇文章本身不能做到帮你理解所有 Vue3 的内容，但是能帮你快速掌握 Vue3 的写法。

如果想做到对 Vue3 的整个内容心里有数，还需要你自己多看看 Vue3 的官方文档。

推荐阅读：

Je suppose que tu aimes

Origine juejin.im/post/7225267685763907621
conseillé
Classement
du quotidien
Plus
2024-07-22(0)
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)

Code World

© 2018 codetd.com