VUE2.0 和VUE3.0 的區別

主要的有三點變化：

1：vue2和vue3雙向數據綁定原理發生了改變

vue2的雙向數據綁定是利用ES5的一個APIObject.definePropert() 對數據進行劫持，結合發布訂閱模式的方式來實現的。
vue3中使用了ES6的Proxy API對數據代理。
相比vue2.x，使用proxy的優勢如下：

defineProperty只能監聽某個屬性，不能對全對象監聽
可以省去for in，閉包等內容來提升效率(直接綁定整個對象即可)
可以監聽數組，不用再去單獨的對數組做特異性操作vue3.x可以檢測到數組內部數據的變化。

2: vue2和vue3定義數據變量和方法的改變

在 vue2中定義數據變量是 data(){}，創建的方法要在 methods:{}中。
而在 vue3中直接在 setup(){}中，在這里面定義的變量和方法因為最終要在模板中使用，所以最后都得 return。

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    //使用ref，說明這個數組就是全局在面板中可以使用了
    const girls = ref(['美女1','美女2','美女3'])
    const selectGirl = ref('2')
    //設置一個函數
    const selectGirlFun = (index: number) => {
      //改變selectGirl的值要加value
      //要得到值要加value ，這些都因為使用了ref函數
      selectGirl.value = girls.value[index]
    }
    //在標簽中使用的變量要使用return
    //為什么要使用return，因為有的不需要在標簽中使用的就不用return
   return{
      girls,
      selectGirl,
      selectGirlFun
    }
  },
});
</script>

3: vue2和vue3生命周期鈎子函數的不同

• vue2中的生命周期

  • beforeCreate 組件創建之前
  • created 組件創建之后
  • beforeMount 組價掛載到頁面之前執行
  • mounted 組件掛載到頁面之后執行
  • beforeUpdate 組件更新之前
  • updated 組件更新之后

• vue3中的生命周期

  • setup 開始創建組件
  • onBeforeMount 組價掛載到頁面之前執行
  • onMounted 組件掛載到頁面之后執行
  • onBeforeUpdate 組件更新之前
  • onUpdated 組件更新之后
    而且Vue3.x 生命周期在調用前需要先進行引入。
    

    import {reactive,toRefs,onMounted, onBeforeMount,onBeforeUpdate,onUpdated,} from "vue";
    

  • 對比一下可能就方便記憶了（如下：）

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

除了這些鈎子函數外，Vue3.x還增加了onRenderTracked 和onRenderTriggered函數。

 

作者：隨筆記呀
鏈接：https://www.jianshu.com/p/d3f973433274
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。