vue3學習筆記

生命週期：

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)
    })
})