區(qū)別有兩個(gè)目的：一面試說一下書面化的表達(dá)，二工作需要升級(jí)大白話說一下項(xiàng)目應(yīng)用的區(qū)別。
雙向數(shù)據(jù)綁定：
vue2 的雙向數(shù)據(jù)綁定是利?ES5 的?個(gè) API ，Object.defineProperty()對(duì)數(shù)據(jù)進(jìn)?劫持 結(jié)合 發(fā)布訂閱（getter&setter）模式的?式來實(shí)現(xiàn)的。
vue3 中使?了 ES6 的 ProxyAPI 對(duì)數(shù)據(jù)代理，使?ref或者reactive將數(shù)據(jù)轉(zhuǎn)化為響應(yīng)式數(shù)據(jù)，從? 實(shí)現(xiàn)對(duì)數(shù)據(jù)的監(jiān)控。
?應(yīng)用就是：2中監(jiān)聽數(shù)據(jù)是單層的，有些數(shù)組，對(duì)象內(nèi)部變化存在監(jiān)聽不到，對(duì)某些修改需要用$set強(qiáng)刷新賦值；3中不需要了類似可以實(shí)現(xiàn)內(nèi)部監(jiān)聽。
實(shí)例化main.js：
2中new出的實(shí)例對(duì)象，所有的東西都在這個(gè)vue對(duì)象上，template里必須要有一個(gè)根元素，是否都會(huì)跑?遍，性能消耗大。
3按需導(dǎo)出了一個(gè)createApp 中，template里不要求只有一個(gè)根元素，可以?ES module imports按需引?，如：keep-alive內(nèi)置組件、v-model指令，減少 了內(nèi)存消耗。
生命周期：
beforeCreate -> setup()
created ->? setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
3中使用setup語法糖即可直接寫，各個(gè)生命周期意思不做贅述
數(shù)據(jù)和方法的定義：
2使?的是選項(xiàng)類型API（Options API）【在代碼中分割不同屬性：data，computed，methods等】：data() { return {}; }, methods:{ }
3使?的是合成型API（Composition API）：setup中定義函數(shù)和屬性，統(tǒng)一return{}
父子間傳參（props&emits）：
2中this.props獲取，this.$emit使用，
3中setup中setup(props,context){context.emit()，props}兩個(gè)參數(shù)獲取，setup語法糖如下
<script lang="ts" setup>
1...prop定義使用
//interface 定義
interface Props {
show: boolean
isUpdate: boolean
title?: string
width?: string
}
//withDefaults賦予初始數(shù)據(jù)
const props = withDefaults(defineProps<Props>(), {
show: false,
isUpdate: false,
width: "800px"
})
2...子向父暴露可用函數(shù)
//子組件
defineExpose({函數(shù)名逗號(hào)隔開})
//父組件
<keep-alive>
<component :is="part" v-show="part" :show="showRef" ref="componentRef"></component>
</keep-alive>
componentRef.value?.函數(shù)名()
3...子組件emit
//定義
const emits = defineEmits(["handle1", "handle2", ...])
//調(diào)用
emits("handle1",參數(shù))
指令和插槽的使用不同
2中不建議將v-for和v-if寫在一起使用，允許直接使用slot
3中將v-if當(dāng)作v-for大的一個(gè)判斷語句，不會(huì)相互沖突；移除keyCode作為v-on的修飾符，不支持config.keyCodes；移除v-on.native修飾符；移除過濾器filter；不允許直接使用slot，正確格式為 v-slot文章來源：http://www.zghlxwxcb.cn/news/detail-656507.html
其他使用區(qū)別繼續(xù)更新，setup語法糖還是比較好用的，建議直接走項(xiàng)目學(xué)習(xí)比較好文章來源地址http://www.zghlxwxcb.cn/news/detail-656507.html
到了這里，關(guān)于vue2和vue3的區(qū)別（Vue3升級(jí)部分）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
