持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
前言
Vue3.0正式版上线已经两年多了，脚手架默认Vue版本为3也已经快一年了。2021年的时候beta版本的Vue3用了差不多一年，年底跳槽后到现在基本就没有用过了，现在公司短时间是不可能升级vue版本的，真的怕以后出去就脱节了，今天就来回忆一下vue3的使用方法，加深记忆。
整体结构
首先最显著的改变就是使用组合式Api代替了原来的选项式Api,这样做的好处就是可以把相关的数据和方法写在一起，避免JS文件过长然后上下拖动文件寻找，而且还可以直接把相关的js代码拆分到单独的文件中，便于代码迁移。但是这种写法也有一些缺点，就是火候掌握不好会导致整个js代码比较凌乱，数据定义和方法定义到处都是，我之前写的代码就有这个问题，用熟悉过后会好一点。
// Vue2
<script>
export default {
data(){
return {}
},
methods：{
}
}
</script>
// Vue3
<script>
import {ref} from 'Vue'
export default {
setup(props,context) {
const state1 = ref()
const method1 = ()=>{
state1.value = 1
}
...
const state2 = ref()
const method2 = ()=>{
state2.value = 1
}
}
}
</script>
生命周期
Vue3在生命周期上有所调整,合并了一些生命周期到setup中。
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
actived -> onActived
响应式数据
Vue3中响应式数据定义使用reactive、ref，使用reactive可以定义多个数据，使用ref定义单个数据。
<script>
import { reactive ,ref,toRefs} from 'Vue'
export default {
setup(){
const state = reactive({
name:'lili'
age:12
})
const msg = ref('我是理理')
// js中调用
console.log(`我是${state.name},今年${state.age}`)
console.log(msg.value) // ref定义的数据访问要加.value
// 定义输数据和方法必须要使用return返回出去才能在template模板中使用
return {
state,
// ...toRefs(state), // 如果reactive返回的数据使用toRefs修饰 则模板中可以直接访问 name age 不用state.name
msg
}
}
}
</script>
值得注意的是vue3不再要求tempalte模板中必须要有唯一的根目节点了
<template>
<div> 我是{{state.name}},今年{{state.age}}</div>
<div>{{msg}}</div>
<!--模板中访问ref定义的数据集不用加.value -->
</template>
数据监听
Vue3中数据监听可以监听单个源，也可以同时监听多个源。这个监听多个源的方法我觉得是非常好用的，vue2要监听多个源还得用计算属性合并才能实现。
<script>
export default{
setup(){
const state = reactive({name:'lili',age:18})
// 监听单个
watch(()=>state.name ,(newVal,oldVal) => {
....
})
// 监听多个
watch( [() => state.name,() => state.age] ,([newName,newAge],[oldName,oldAge])=>{
....
})
}
}
</script>
除此之外，Vue3还有一个自动收集数据变化的api：watchEffect,当其中的数据发生变化时会自动执行回调。
setup(){
let age = ref(0)
watchEffect(()=>{
console.log(age.value) // 当age发生变化会自动执行
console.log('watchEffect函数执行了~')
})
}
计算属性
computed使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。
const age1 = ref(18)
const age2 = ref(20)
const totalAge = computed(() => age1.value+age2.value)
console.log(totalAge.value) // 18 当age1或age2的值发生变化时，totalAge会相应改变
双向绑定
Vue3中的v-model可以携带参数，可以作为.sync修饰符的替代，相比于2来说方便了不少。
<ChildComponent v-model:title="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
setup语法糖
在3.2及之后的版本中，新增了setup语法糖
<script setup>
const state = reactive({
name:'lili',
age:18
})
const methd = () => {}
</script>
属性和方法可以在模板中使用，不用再集中return一次，可以减少一些LOC(代码行)
最后
以上就是我个人在使用中有用到的Vue3的相关信息。
