建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“vue2和vue3雙向綁定實(shí)例分析”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue2和vue3雙向綁定實(shí)例分析”文章能幫助大家解決問題。
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括烏魯木齊網(wǎng)站建設(shè)、烏魯木齊網(wǎng)站制作、烏魯木齊網(wǎng)頁制作以及烏魯木齊網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，烏魯木齊網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到烏魯木齊省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
vue2和vue3中雙向綁定的區(qū)別是：vue2中使用“Object.defineProperty”對象以及對象屬性的劫持實(shí)現(xiàn)雙向綁定；而vue3中的響應(yīng)式采用了ES6中的“Proxy”方法實(shí)現(xiàn)雙向綁定。
本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。
vue2和vue3雙向綁定的區(qū)別是什么
Vue2雙向數(shù)據(jù)綁定存在的問題：
關(guān)于對象： Vue 無法檢測 property 的添加或移除。
關(guān)于數(shù)組：不能利用索引直接設(shè)置一個數(shù)組項(xiàng),也不能修改數(shù)組的長度。
Vue2.0
原理：使用Object.defineProperty對象以及對象屬性的劫持+發(fā)布訂閱模式，只要數(shù)據(jù)發(fā)生變化直接通知變化 并驅(qū)動視圖更新。
語法：
Object.defineProperty(obj, "name", { get:()=> {}, set:()=> {})參數(shù)一： obj:劫持對象，參數(shù)二："name":劫持對象屬性 , 參數(shù)三：給屬性添加set,get方法
例子：
let obj = { name: "tom", age: 10 };
Object.defineProperty(obj, "name", {
get: () => {
console.log("訪問了name屬性");
},
set: (newVule) => {
console.log("設(shè)置了name屬性");
},
});
obj.name; //觸發(fā)get
obj.name = "jack";//觸發(fā)setVue3.0
原理：Vue3.0中的響應(yīng)式采用了ES6中的 Proxy 方法。Proxy 對象用于定義基本操作的自定義行為（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）
語法：
let p =new Proxy(obj,{get:(target,prop,p)=>{},set:(target, prop, vaule, p)=>{}})參數(shù)一： target:劫持對象，參數(shù)二：prop:劫持對象屬性 , 參數(shù)三：vaule:新的屬性值, p:本身
例子：
// vue3
let p = new Proxy(obj, {
get: (target, prop, p) => {
console.log("獲取");
return prop in target ? target[prop] : "默認(rèn)值";
},
set: (target, prop, vaule, p) => {
console.log("設(shè)置");
target[prop] = vaule;
},
});
console.log(p.name); //訪問了name屬性
console.log((p.name = "java")); //設(shè)置了name屬性關(guān)于“vue2和vue3雙向綁定實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。
分享名稱：vue2和vue3雙向綁定實(shí)例分析
轉(zhuǎn)載來于：http://fisionsoft.com.cn/article/pdgdoh.html
