从Vue2到Vue3, 一键升级前端开发技能

本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。

因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。

一、Vue3 里 script 的三种写法

首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法，

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>
2、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>
正如你看到的那样，无论是代码行数，还是代码的精简度，<script setup> 的方式是最简单的形式。

如果你对 Vue 很熟悉，那么，我推荐你使用 <script setup> 的方式。

这种写法，让 Vue3 成了我最喜欢的前端框架。

如果你还是前端新人，那么，我推荐你先学习第一种写法。

因为第一种写法的学习负担更小，先学第一种方式，掌握最基本的 Vue 用法，然后再根据我这篇文章，快速掌握 Vue3 里最需要关心的内容。

第一种写法，跟过去 Vue2 的写法是一样的，所以我们不过多介绍。

第二种写法，所有的对象和方法都需要 return 才能使用，太啰嗦。除了旧项目，可以用这种方式体验 Vue3
的新特性以外，我个人不建议了解这种方式。反正我自己暂时不打算精进这部分。

所以，接下来，我们主要介绍的，也就是 <script setup> ，这种写法里需要了解的内容。

注意： <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、不要解构使用

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

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

xml

复制代码
// 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 是同样的写法。

xml

复制代码
// 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 的官方文档。

• « 上一篇：【JetPack】Room中的数据迁移(备份、迁移、删除)
• » 下一篇：设计模式-代理模式