Vue如何進(jìn)行數(shù)據(jù)代理
在了解了關(guān)于js當(dāng)中的Object.defineProperty()這個(gè)方法后，我們繼續(xù)對(duì)vue當(dāng)中的數(shù)據(jù)代理做一個(gè)基于現(xiàn)在的解析
建議觀看之前先了解下js當(dāng)中的Obejct.defineProperty()
了解如何代理
準(zhǔn)備工作
- 準(zhǔn)備一個(gè)容器，供vue實(shí)例對(duì)象指定
- 在實(shí)例對(duì)象當(dāng)中配置供頁(yè)面調(diào)用的數(shù)據(jù)（data）
- 測(cè)試頁(yè)面
<body>
<!-- 準(zhǔn)備一個(gè)容器 -->
<div class="subject">
<div>昵稱(chēng):{{name}}</div>
<div>電話:{{phone}}</div>
</div>
</body>
<script>
new Vue({
el: '.subject',
data: {
name: 'wavesbright',
phone:"134****2557"
}
});
</script>
查看VM
通過(guò)之前的復(fù)習(xí)，我們知道，在vm這個(gè)實(shí)例對(duì)象當(dāng)中配置項(xiàng)data當(dāng)中的屬性，會(huì)掛載到vm上，供頁(yè)面調(diào)用而鼠標(biāo)懸停在二者身上，出現(xiàn)了 invoke property getter，說(shuō)明什么？說(shuō)明，vm上的name和phone，是通過(guò)defineProperty 添加上去的 === 做了數(shù)據(jù)代理
和誰(shuí)做了數(shù)據(jù)代理？
當(dāng)你訪問(wèn) name 或者 phone的時(shí)候一定會(huì)調(diào)用get（getter），這個(gè)get 一定會(huì)從某個(gè)地方，將所需要的值進(jìn)行 返回什么地方？ data嘛
var vm = new Vue({
el: '.subject',
data: {
name:'wavesbright'
phone:"134****2557"
}
});
那你要對(duì) name 和 phone 進(jìn)行修改的時(shí)候，那肯定要 調(diào)用set嘛如何確定呢？
get和set
確實(shí)有，在哪里呢，往下翻就可以看到
這不就是代理么
驗(yàn)證兩條線
vm當(dāng)中的name 與 phone 是 與data進(jìn)行數(shù)據(jù)綁定的
get
既然綁定了，那當(dāng)我訪問(wèn)name變量的時(shí)候先調(diào)用getget 返回 data.name當(dāng)中配置的value值
驗(yàn)證過(guò)程
很簡(jiǎn)單，直接修改data.name的值不就知道了
原圖
修改后
說(shuō)明是綁定到一起的嘛，但我為什么不修改 vm.name的值去查看data是否發(fā)生改變了呢？
問(wèn)題引出1
我們?cè)O(shè)計(jì)的data當(dāng)中的屬性，經(jīng)過(guò)vue的一系列操作最終掛載到了vue實(shí)例上，實(shí)現(xiàn)了數(shù)據(jù)綁定數(shù)據(jù)綁定是一個(gè)事實(shí)，我們現(xiàn)在所做的是驗(yàn)證這個(gè)過(guò)程通過(guò)修改配置項(xiàng) data當(dāng)中的name屬性，頁(yè)面當(dāng)中確實(shí)發(fā)生了變化但是我現(xiàn)在想驗(yàn)證的是，我修改 vm.name的值的時(shí)候，data如何確定變化
用vm.data查看就能完成了，這不很簡(jiǎn)單嘛？是嗎？
開(kāi)國(guó)際玩笑哦，你data在全局定義了嗎？沒(méi)有吧？vm當(dāng)中為什么也沒(méi)有data呢？
set
解決方式1
定義一個(gè)全局的data不就行了
驗(yàn)證一下嘛，修改vue當(dāng)中的name屬性，data是否會(huì)發(fā)生變化
確實(shí)可以
問(wèn)題衍生2
那么又有一個(gè)問(wèn)題，我這個(gè)全局data是自己定義的，而正常構(gòu)建的vue實(shí)例對(duì)象可不會(huì)這么寫(xiě)
但事實(shí)情況就是，我修改配置項(xiàng)data當(dāng)中的數(shù)據(jù)，可以影響頁(yè)面，而修改頁(yè)面也可以影響data
我辛辛苦苦配置了一個(gè)data對(duì)象，交給了vm，vm如果不把我這個(gè)data存下來(lái)，那人家以后要用屬性去那里??？vm一定會(huì)把這個(gè)data留下來(lái)。
這就說(shuō)明一個(gè)問(wèn)題，配置項(xiàng)data，一定在 構(gòu)建完成的這個(gè)實(shí)例對(duì)象vm身上,但是為什么找不到呢？
因?yàn)槿思医?vm._data
這個(gè)就不展開(kāi)了，因?yàn)?vm當(dāng)中的data除了做數(shù)據(jù)代理，還有數(shù)據(jù)劫持
我們當(dāng)下只需要記住一點(diǎn)，vm._data === data
驗(yàn)證set的過(guò)程
這是當(dāng)前頁(yè)面，現(xiàn)在我們要修改name屬性
修改成全大寫(xiě)
分析過(guò)程
我們修改了vm.name的值一定調(diào)用了 set函數(shù)，拿到這個(gè)value值并且將這個(gè) value值賦給了vm._data(data)
圖文解析
第一部分
一切的一切都是因?yàn)殚_(kāi)頭寫(xiě)了這段代碼
var vm = new Vue({
el: '.subject',
data: {
name:'wavesbright'
phone:"134****2557"
}
});
緊隨其后，馬上就給我們創(chuàng)建了一個(gè)vue的實(shí)例對(duì)象
然后，vue開(kāi)始為vm這個(gè)實(shí)例對(duì)象準(zhǔn)備一些東西（屬性）
重點(diǎn)，data來(lái)了，完全來(lái)自于上方的配置項(xiàng)data
截止到目前來(lái)說(shuō)，沒(méi)有數(shù)據(jù)代理的存在。我們所寫(xiě)的data，就是單純的進(jìn)行了一次賦值，然后給了下劃線data（_data）
第二部分
實(shí)際上，vue做到這一步已經(jīng)差不多了，代碼也是可以寫(xiě)下去的
但是，請(qǐng)問(wèn)，目前vm身上，有name嗎，沒(méi)有
但是我能拿到name的值嗎？可以的，因?yàn)槲矣?_data
<body>
<!--準(zhǔn)備一個(gè)容器-->
<div class="subject">
<div>昵稱(chēng):{{_data.name}}</div>
<div>電話:{{_data.phone}}</div>
</div>
</body>
<script>
/* var data = {...
var vm = new Vue({
el:'.subject',
data:{
name:'wavesbright'
phone:"134****2557"
}
});
</script>
一樣可以拿到name和phone的值
因?yàn)?，vm這個(gè)對(duì)象身上的所有屬性，在模板上面都能夠直接使用
但是這樣寫(xiě)，那不是直接崩潰，創(chuàng)建一個(gè)變量就需要 _data一次，vue在這里做了一個(gè)很棒的操作
也就是數(shù)據(jù)代理
第三部分
vm在自己身上創(chuàng)建了一個(gè)變量name什么方式創(chuàng)建的？defineProperty通過(guò)get拿到vm自身上的_data.name的值修改數(shù)據(jù)的時(shí)候通過(guò)set,獲取value，然后再將_data當(dāng)中的屬性進(jìn)行修改完成了數(shù)據(jù)代理，雙向綁定
為什么要將data當(dāng)中的數(shù)據(jù)放在vm身上一份呢（_data）
就是為了讓你編碼的時(shí)候更方便（不至于每次都是 _data.xxx）
總結(jié)
- vue中的數(shù)據(jù)代理
- 通過(guò)vm對(duì)象 來(lái) 代理 data對(duì)象（配置項(xiàng)）中的屬性操作（get/set）
- Vue中數(shù)據(jù)代理的好處
- 更加方便操作data中的數(shù)據(jù)（_data.xxx）
- 基本原理
通過(guò)Object.defineProperty()將data配置項(xiàng)當(dāng)中的所有屬性配置到vm對(duì)象上
為每一個(gè)添加到vm上的屬性，指定一個(gè)get和set函數(shù)（getter/setter）
在getter/setter內(nèi)部去操作（讀/寫(xiě)），data中對(duì)應(yīng)的屬性
展開(kāi)_data
思考
老師不讓展開(kāi)是對(duì)的
因?yàn)槿绻凑罩暗睦斫?，這個(gè)符號(hào)代表什么 (...) 代表數(shù)據(jù)代理
這樣容易引起理解誤區(qū)，，這里實(shí)際上并不是數(shù)據(jù)代理，而是做了一個(gè)數(shù)據(jù)劫持
我希望看到的 _data的展開(kāi)內(nèi)容是什么？是這樣的
data:{
name:'wavesbright'
phone:"134****2557"
}
實(shí)際上并不是
vue的承諾
只要你敢修改data當(dāng)中的屬性值，我就敢在頁(yè)面當(dāng)中 {{property}}一起發(fā)生變化
- 當(dāng)name的值發(fā)生了改變，最終影響到的是誰(shuí) === _data.name
- 那么頁(yè)面元素是怎么同步進(jìn)行修改的？
- vue是不是必須要知道，name這里發(fā)生了改變，他需要做什么 === 監(jiān)聽(tīng)
- 經(jīng)歷了一系列變動(dòng)后，完成了小小的升級(jí)，最終達(dá)成響應(yīng)式操作
到此這篇關(guān)于vue如何進(jìn)行數(shù)據(jù)代理的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)代理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE3+mqtt封裝解決多頁(yè)面使用需重復(fù)連接等問(wèn)題(附實(shí)例)
最近了解到mqtt這樣一個(gè)協(xié)議,可以在web上達(dá)到即時(shí)通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁(yè)面使用需重復(fù)連接等問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue項(xiàng)目中使用lib-flexible解決移動(dòng)端適配的問(wèn)題解決
這篇文章主要介紹了vue項(xiàng)目中使用lib-flexible解決移動(dòng)端適配的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3父子組件傳參有關(guān)sync修飾符的用法詳解
這篇文章主要給大家介紹關(guān)于前端Vue3父子組件傳參有關(guān)sync修飾符的用法詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新
這篇文章主要為大家介紹了vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
v-if和v-show的區(qū)別是前端面試中常問(wèn)的基礎(chǔ)知識(shí)點(diǎn),v-if、v-show顧名思義就是用來(lái)判斷視圖層展示效果的,下面這篇文章主要給大家介紹了關(guān)于Vue常用指令v-if與v-show區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue異步加載高德地圖的實(shí)現(xiàn)，詳細(xì)的介紹了異步加載的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒(méi)成功傳遞問(wèn)題
這篇文章主要介紹了解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒(méi)成功傳遞問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue.js 實(shí)現(xiàn)tab切換并變色操作講解
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)tab切換并變色操作講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue視頻播放插件vue-video-player的具體使用方法
這篇文章主要介紹了vue視頻播放插件vue-video-player的具體使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue.js評(píng)論發(fā)布信息可插入QQ表情功能
這篇文章主要為大家詳細(xì)介紹了vue.js評(píng)論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08