生命周期:
vue2: vue3:
beforeCreate( 创建前 ) Not
created ( 创建后) Not
beforeMount (挂载前) onBeforeMount(setup还在此之前)
mounted(挂载后) onMounted
beforeUpdate (更新前) onBeforeUpdate
updated (更新后) onUpdated
beforeUnmount (销毁前) onBbeforeUnmount
unmounted (销毁后) onUnmounted
变量定义:
vue2实在data中定义
vue3:
setup(){ // 此处定义的变量是非响应式的 let testData = { name:'test', age:19 } //使用ref则是响应式写法 let testNum = ref(888) // 仅仅是ref的话是不完善的,对象和数组最好是使用reactive let testDataText = reactive( { name:'test', age:19 } ) let dataChange = ()=>{ // 对于数据的操作徐使用value来进行 testNum.value = 20; // 而对于使用reactive定义的变量,则不需要value可以直接操作 testDataText.name = 'testName' } // 除此之外还需要return出来,不然html模板中是不能使用的 return { testData,testNum,testDataText } }
vue3中的toRef和toRefs:
setup(){ let testData = { name:'test', age:19 } //使用toRef可以使其变为响应式但是UI页面上面并不会更新,可以在控制台打印 let testNum = toRef(testData,'age' ) // 如果想使其在UI页面上也会更新,就要使用toRefs let testDataText = toRefs(testData ) let dataChange = ()=>{ // 对于数据的操作徐使用value来进行 testNum = 20; // 需要注意的是toRefs是将多个转化为响应式和toRef稍有不同 testDataText.name = 'testName' console.log(testNum,testDataText) } // 也可以直接在return中使用toRefs,需要注意的是在UI页面中testData是无法读取的,直接使用name和age即可 //对于页面数据比较多的情况下也可以使用data定义整个变量,然后toRefs出来 //需要注意的是toRefs只能针对单层级对象和数组使用不能使用多层嵌套 return { testData,testNum,testDataText,...toRefs(testData) } }
监听数据变化
vue2中监听数据变化有computed和watch
vue3有computed,watch,watchEffect
setup({ let testData = rective({ name:"test",age:19,sex:'man' }) //computed:有两种写法 let names01 = computed({ get(){ return 'first name' + testData.name; }, set(value){ //names数据发生变化时触发 } }) let names02 = computed()=>{ return 'first name' + testData.name; } //watch,可以同时监听多个数据 let age = watch(testData.age,(newValue,oldValue)=>{ console.log(oldValue,newValue) },{immediate:true,deep:true}) //上面的方法控制台可能会有警告,因为只适合监听ref定义的数据,rective定义的如下 watch([()=>testData.sex],(newValue,oldValue)=>{ console.log(newValue,oldValue) }) ) //watchEffect类似于computed,但是只能获取到new的值,old的值获取不到 watchEffect(()=>{ const sex= testData.sex console.log(sex) }) })