1：vue2和vue3雙向數(shù)據(jù)綁定原理發(fā)生了改變

vue2的雙向數(shù)據(jù)綁定是利用ES5的一個(gè)APIObject.definePropert() 對(duì)數(shù)據(jù)進(jìn)行劫持，結(jié)合發(fā)布訂閱模式的方式來(lái)實(shí)現(xiàn)的。
vue3中使用了ES6的Proxy API對(duì)數(shù)據(jù)代理。
相比vue2.x，使用proxy的優(yōu)勢(shì)如下：

• defineProperty只能監(jiān)聽(tīng)某個(gè)屬性，不能對(duì)全對(duì)象監(jiān)聽(tīng)
• 可以省去for in，閉包等內(nèi)容來(lái)提升效率(直接綁定整個(gè)對(duì)象即可)
• 可以監(jiān)聽(tīng)數(shù)組，不用再去單獨(dú)的對(duì)數(shù)組做特異性操作vue3.x可以檢測(cè)到數(shù)組內(nèi)部數(shù)據(jù)的變化。

2: vue2和vue3定義數(shù)據(jù)變量和方法的改變

在vue2中定義數(shù)據(jù)變量是data(){}，創(chuàng)建的方法要在methods:{}中。
而在vue3中直接在setup(){}中，在這里面定義的變量和方法因?yàn)樽罱K要在模板中使用，所以最后都得 return。
如：

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

export default defineComponent({
  name: 'App',
  setup() {
    //使用ref，說(shuō)明這個(gè)數(shù)組就是全局在面板中可以使用了
    const girls = ref(['美女1','美女2','美女3'])
    const selectGirl = ref('2')
    //設(shè)置一個(gè)函數(shù)
    const selectGirlFun = (index: number) => {
      //改變selectGirl的值要加value
      //要得到值要加value ，這些都因?yàn)槭褂昧藃ef函數(shù)
      selectGirl.value = girls.value[index]
    }
    //在標(biāo)簽中使用的變量要使用return
    //為什么要使用return，因?yàn)橛械牟恍枰跇?biāo)簽中使用的就不用return
   return{
      girls,
      selectGirl,
      selectGirlFun
    }
  },
});
</script>

3: vue2和vue3生命周期鉤子函數(shù)的不同

• vue2中的生命周期

  • beforeCreate 組件創(chuàng)建之前
  • created 組件創(chuàng)建之后
  • beforeMount 組價(jià)掛載到頁(yè)面之前執(zhí)行
  • mounted 組件掛載到頁(yè)面之后執(zhí)行
  • beforeUpdate 組件更新之前
  • updated 組件更新之后

• vue3中的生命周期

  • setup 開(kāi)始創(chuàng)建組件
  • onBeforeMount 組價(jià)掛載到頁(yè)面之前執(zhí)行
  • onMounted 組件掛載到頁(yè)面之后執(zhí)行
  • onBeforeUpdate 組件更新之前
  • onUpdated 組件更新之后
    而且Vue3.x 生命周期在調(diào)用前需要先進(jìn)行引入。
    如：

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

• 來(lái)一個(gè)總的生命周期對(duì)比，這樣更便于記憶

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

除了這些鉤子函數(shù)外，Vue3.x還增加了onRenderTracked 和onRenderTriggered函數(shù)。

3: vue3中新加入了TypeScript和PWA的支持

這篇文章持續(xù)更新喲