• 雙向綁定原理

  • vue2是用過(guò)ES5的一個(gè)API Object.defineProperty()對(duì)數(shù)據(jù)進(jìn)行劫持配合發(fā)布訂閱者模式的方式來(lái)實(shí)現(xiàn)的

  • Vue3是使用了ES6的proxyAPI對(duì)數(shù)據(jù)代理

• Vue3支持碎片（Fragments）

  • 就是說(shuō)組件可以有多個(gè)根節(jié)點(diǎn)

• Composition API

• vue2采用選項(xiàng)類型API，而vue3采用 合成型API。代碼更加的簡(jiǎn)便整潔

• 生命周期鉤子函數(shù)

  • 若組件被keep-alive包裹，則多出下面兩個(gè)鉤子函數(shù)

  • onActivated() 激活時(shí)執(zhí)行 onDeactivated() 失活時(shí)執(zhí)行

• setup（）函數(shù)新特性

  • 它接受兩個(gè)參數(shù)（props、context(包含attrs、slots、emit)）

  • 在beforeCreate和Created 兩個(gè)鉤子函數(shù)之前的函數(shù)

  • 執(zhí)行setup時(shí)，組件實(shí)例尚未被創(chuàng)建，在setup內(nèi)部this不指向vue實(shí)例，是undefined

  • 和模板一起使用：需要返回一個(gè)對(duì)象 定義的變量和方法最后都需要return 出去

  • 使用渲染函數(shù)：可以返回一個(gè)渲染函數(shù)，該函數(shù)可以直接使用在同一作用域中聲明的響應(yīng)式狀態(tài)

    • 注意：

    • setup函數(shù)中的props是響應(yīng)式的，當(dāng)傳入新的prop時(shí)，它將被更新 但是因?yàn)閜rops是響應(yīng)式的，所以不能使用ES6解構(gòu)，因?yàn)闀?huì)消除prop的響應(yīng)式。可以通過(guò)setup函數(shù)中的toRefs來(lái)完成此操作

    • setup函數(shù)只能是同步的不能是異步的

    • setup函數(shù)只會(huì)在初始化的時(shí)候執(zhí)行一次

• teleport瞬移組件

• 如何取舍ref和reactive

  • 優(yōu)先使用ref函數(shù)，因?yàn)閞ef函數(shù) 可以處理簡(jiǎn)單數(shù)據(jù)類型，也可以處理復(fù)雜類型，常用于數(shù)據(jù)類型定義響應(yīng)式數(shù)據(jù)

    ref特點(diǎn)：在代碼中獲取或者修改值時(shí)，需要補(bǔ) .value 但是在template模板中不需要

  • reactive 常用于定義復(fù)雜數(shù)據(jù)類型作為響應(yīng)式數(shù)據(jù)

    特點(diǎn) ：不需要 .value，如果明確知道對(duì)象中有什么屬性久使用reactive

• 父子通信

  • 父?jìng)髯?/p>

    • 在setup函數(shù)中有兩個(gè)參數(shù) 第一個(gè)參數(shù)為props，第二個(gè)參數(shù)為context

- props為一個(gè)對(duì)象，props接收后，內(nèi)部包含了所有傳遞過(guò)來(lái)的prop數(shù)據(jù)
?
- context包含了attrs，slots，emit屬性，其中emit方法可以完成子傳父

• 子傳父

  • 子

    setup(props,context) {
        context.emit('name','李雷')
    }

  • 父

    <template> <Son @name="name" ></Son> </template>
     
    setup() {
     ? const name = (name)=>console.log(name);
     ? ? return {name}
    }, 

  • 父?jìng)髯樱涸趕etup中使用props數(shù)據(jù) setup(props){ props就是父組件數(shù)據(jù) }

  • 子傳父：觸發(fā)自定義事件的時(shí)候emit來(lái)自 setup(props,{emit}){ emit 就是觸發(fā)事件函數(shù)}

• performance

• 原本在vue2中虛擬dom時(shí)進(jìn)行全量的杜比，而在vue3中新增了靜態(tài)標(biāo)記（patchFlag），值對(duì)比帶有PF的節(jié)點(diǎn)，并通過(guò)Flag的信息得知當(dāng)前節(jié)點(diǎn)要比對(duì)的內(nèi)容，這樣就無(wú)需遍歷整個(gè)虛擬dom，從而大大提升性能。

• vue3響應(yīng)式原理

  • 實(shí)現(xiàn)原理

    • 通過(guò)proxy（代理）：攔截對(duì)象中任意屬性的變化，包括：屬性值的讀寫、添加和刪除

    • 通過(guò)reflect（反射）ES6：對(duì)源數(shù)據(jù)的屬性進(jìn)行操作。

      proxy: 
       ?  [[handle]]: 增刪改查靠它完成
       ?  [[target]]: 數(shù)據(jù)
      }

  • Object.defineProperty是單線程，不能捕獲錯(cuò)誤 只能通過(guò)try和catch實(shí)現(xiàn)

    Reflect可以捕獲錯(cuò)誤（reflect也具有defineProperty）文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-418161.html

    const per 代理數(shù)據(jù) = new proxy 代理對(duì)象 (源數(shù)據(jù)person,操作項(xiàng){         
     ? ?per: 代理數(shù)據(jù)
     ?proxy: 代理對(duì)象,倆個(gè)參數(shù)(源數(shù)據(jù)、操作項(xiàng))
    ?
        get (源數(shù)據(jù)target,屬性名propName) {
     ? ? ? ?return Reflect.get(target,propName)
      }
        
        set (源數(shù)據(jù)target,屬性名propName,操作后的值value) {
     ? ? ? ?追加也能調(diào)用,引起源數(shù)據(jù)的變化
     ? ? ? ?Reflect.set(target,propName,value)
     ?  }
    ?
        deleteProperty (源數(shù)據(jù)target,屬性名propName) {
     ? ? ? ?return Reflect.delete(target,propName)
     ?  }
    })

到了這里，關(guān)于Vue經(jīng)典面試題：Vue2和Vue3的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！