生命週期:
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) }) })