一文教你学会vue3常用语法!
前言
Vue3 发布于2020年9月18日。相对于 Vue2，Vue3 在性能上有很大提升。
Vue3 目前是国内极具流行的前端框架，现在你去找前端工作，一般的公司都要求你会用 Vue3。
那相对于 Vue2，Vue3在语法上有哪些改变呢？
其实熟悉 Vue2 开发流程的都清楚：Vue2 使用起来相对固定，都是在 data 函数里面写数据 ，在 methods 函数里面写方法。
而 Vue3 将数据和方法糅合在一起，也就是将业务代码放在一块，便于你维护。
其实要我说，写习惯了都一样，代码的尽头还是复制粘贴。。。
1.生命周期
Vue3 的生命周期函数主要有 7 个：
1.setup：开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。
2.onBeforeMount：DOM 挂载之前。
3.onMounted：DOM 挂载之后。
4.onBeforeUpdate：组件更新之前。
5.onUpdated：组件更新之后。
6.onBeforeUnmount：组件卸载之前。
7.onUnmounted：组件卸载之后。
在实际开发中经常用到的就是 onMounted，比如进入列表页面获取列表数据。
2.setup函数
setup 函数是 vue3 中很重要的组件，相当于生命的起点。Vue3 中其他组件或者函数必须被包含在 setup 函数中。
而且定义的变量或者函数、必须要通过 return暴露出来，不然在 template 中没法使用。
从这里你也看出痛点了：如果定义的变量和函数太多，return 起来比较麻烦。
<script >
setup () {
const message = '我是知否君'
const num = ref(10)
return { num,message }
}
</script>
所以 Vue3.2 之后做了改变：
只用在 script 标签中添加 setup，不用写 setup 函数，不用 return，我们也能在 template 中使用。
3.ref函数
ref 函数用来将简单数据类型定义为响应式数据。
注意：vue 中的响应式指的是你在 script 标签中修改了变量的值，template 中该变量的值会立即改变，对应的页面上变量的值也会立即改变。
修改值: 变量.value
// ref函数，将简单数据类型定义为响应式数据，修改值的时候，需要.value
let poet = ref("李白");
const changePoet = () => {
poet.value = "杜甫";
};
4.toRef函数
toRef 函数可以将对象中某个属性定义为单独的响应式数据
let user = reactive({
name: "张无忌",
age: 12,
});
// toRef 函数可以将对象中某个属性定义为单独的响应式数据
const name = toRef(user, "name");
const changeName = () => {
name.value = "赵敏";
};
5.toRefs 函数
toRefs函数用来将对象中所有属性变为响应式数据
let user = reactive({
name: "张无忌",
age: 12,
});
// toRefs函数用来将对象中所有属性变为响应式数据
const refUser = toRefs(user);
const changeRefAge = () => {
refUser.age.value = 18;
};
6.reactive函数
reactive 是一个函数，它可以将复杂数据类型变成响应式数据。
// reactive是一个函数，它可以将复杂数据类型变成响应式数据。
let user = reactive({
name: "知否君",
age: 23,
});
7.computed
computed 用来定义计算属性。
// computed 计算
const newPoet = computed(() => {
return poet.value + ",白居易";
});
8.watch
watch 函数是监听器，用来监听变量的变化。
// watch 监听
watch(user, () => {
console.log("user改变了");
});
watch(
() => user.age,
() => {
console.log("age改变了");
}
);