和vue2对比的Vue3新写法，在vue2基础上快速上手vue3项目

本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 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>

第一种写法，跟过去 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 = () => {// 使用的时候记得 .valuecount.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>

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 需要 .valuereturn 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 里叫 beforeDestroybeforeUnmount() {},// Vue2 里叫 destroyedunmounted() {},// 其他钩子不常用，所以不列了。
}
</script>

/ 组合式 api 写法
<template><div></div>
</template><script setup>
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,
} from 'vue'onBeforeMount(() => {})
onMounted(() => {})onBeforeUpdate(() => {})
onUpdated(() => {})onBeforeUnmount(() => {})
onUnmounted(() => {})
</script>

三、全局Api的转移（很重要）

2.x 全局 API（ Vue）	3.x 实例 API(app)
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

vue2中可以通过Vue.prototype去操作原型，在vue3中只能通过app.config.globalProperties

四、provide与inject

在vue2中，如果要在后代组件中使用父组件的数据，那么要一层一层的父子组件传值或者用到vuex，但是现在，无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。

这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

//父
import { provide } from 'vue'
setup(){let fullname = reactive({name:'阿月',salary:'15k'})provide('fullname',fullname) //给自己的后代组件传递数据return {...toRefs(fullname)}
}
//后代
import {inject} from 'vue'
setup(){let fullname = inject('fullname')return {fullname}
}