vue 的双向绑定原理
目錄
一、一句話描述 vue 的雙向綁定原理
二、細說?vue 的雙向綁定原理
1、vue 2.x?的雙向綁定
2、vue 3.x 的雙向綁定
3、一個完整的案例
一、一句話描述 vue 的雙向綁定原理（vue 的響應式原理）
vue 在實例化的時候，使用 Object.definePropety() 方法或 Proxy 構(gòu)造函數(shù)，對 data 進行 getter 和 setter 的處理。在組件渲染時，若用到 data 里的某個數(shù)據(jù)，這個數(shù)據(jù)就會被依賴收集進 watcher 里。當數(shù)據(jù)更新，如果這個數(shù)據(jù)在 watcher 里，就會收到通知并更新，否則不會更新——vue 采用“數(shù)據(jù)劫持”+“觀察者模式（發(fā)布者-訂閱者模式）”相結(jié)合的方式實現(xiàn)了雙向綁定——vue 的響應式原理。
【拓展】
“數(shù)據(jù)劫持”+“觀察者模式（發(fā)布者-訂閱者模式）”：通過 Object.defineProperty() 方法（Vue 2.x）或 ES6 的 Proxy 構(gòu)造函數(shù)（Vue 3.x）來劫持各個屬性的 setter、getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調(diào)。
二、細說?vue 的雙向綁定原理（vue 的響應式原理）
- 第一步，“數(shù)據(jù)劫持”：vue 2.x 用 Object.defineProperty() 方法來實現(xiàn)數(shù)據(jù)劫持，為每個屬性分配一個訂閱者集合的管理數(shù)組 dep；vue 3.x 用 ES6 的 Proxy 構(gòu)造函數(shù)來實現(xiàn)數(shù)據(jù)劫持。
- 第二步，“添加訂閱者”：在編譯的時候在該屬性的數(shù)組 dep 中添加訂閱者，添加方式包括：v-model 會添加一個訂閱者，{{}} 也會，v-bind 也會，只要用到該屬性的指令理論上都會。
- 第三步，“為 input 添加監(jiān)聽事件”：為 input 添加監(jiān)聽事件，修改值就會為該屬性賦值，觸發(fā)該屬性的 set() 方法，在 set() 方法內(nèi)通知訂閱者數(shù)組 dep，訂閱者數(shù)組循環(huán)調(diào)用各訂閱者的 update() 方法更新視圖。
1、vue 2.x?的雙向綁定
--> 發(fā)布者-訂閱者模式：
// 訂閱者（觀察者） let uid = 0; class Dep {constructor(){this.id = uid++;this.subs = [];}addSub(sub){this.subs.push(sub);}removeSub(sub){const arr = this.subs,item = sub;if(arr.length){const index = arr.indexOf(item);if(index > -1){return arr.splice(index, 1);}}}depend(){if(window.target){window.target.addDep(this);}}notify(){const subs = this.subs.slice();for(let i = 0, len = subs.lengths; i < len; i++){subs[i].update();}} }// 發(fā)布者（被觀察者）（不考慮深度監(jiān)聽） class Watcher {constructor(vm, expOrFn, cb) {this.vm = vm;this.deps = [];this.depIds = new Set();this.getter = expOrFn;this.cb = cb;this.value = this.get();}get() {window.target = this;var value = this.getter.call(this.vm, this.vm);window.target = undefined;return value;}addDep() {const id = dep.id;if(!this.depIds.has(id)){this.depIds.add(id);this.deps.push(dep);dep.addSub(this);}}update() {console.log("更新, value:", this.value);} }/* “發(fā)布者-訂閱者模式”的使用示例 */ // 創(chuàng)建 發(fā)布者 實例 var watcher = new Watcher({ x: 1 }, (val) => val); watcher.get();// 創(chuàng)建 訂閱者 實例 var dep = new Dep();// 訂閱者 監(jiān)聽 發(fā)布者 對象 dep.depend(); dep.notify();--> 數(shù)據(jù)劫持：?
// 數(shù)據(jù)劫持 function defineReactive(obj, key, val){let dep = new Dep();Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter() {dep.depend();return value;},set: function reactiveSetter(newVal) {if(val === newVal){return;}val = newVal;dep.notify();}}); }2、vue 3.x 的雙向綁定
vue 3.x 的雙向綁定與 vue 2.x?的雙向綁定，都采用?發(fā)布者-訂閱者模式，不同的是 數(shù)據(jù)劫持 的實現(xiàn)，vue 3.x 采用的是 ES6 的 Proxy 構(gòu)造函數(shù)實現(xiàn)的。
Proxy(data, {get(target, key) {return target[key];},set(target, key, value) {let val = Reflect.set(target, key, value);_that.$dep[key].forEach(item => item.update());return val;} })3、一個完整的案例
<body><div id="demo"></div><input type="text" id="inp"> </body> <script type="text/javascript">var obj = {};var demo = document.querySelector('#demo')var inp = document.querySelector('#inp')Object.defineProperty(obj, 'name', {get: function() {return val;},set: function(newVal) { //當該屬性被賦值的時候觸發(fā)inp.value = newVal;demo.innerHTML = newVal;}})inp.addEventListener('input', function(e) {// 給obj的name屬性賦值，進而觸發(fā)該屬性的set方法obj.name = e.target.value;});obj.name = 'fei'; //在給obj設置name屬性的時候，觸發(fā)了set這個方法 </script>參考文件：
使用Proxy實現(xiàn)Vue數(shù)據(jù)劫持：使用Proxy實現(xiàn)Vue數(shù)據(jù)劫持 - 知乎
用一句話說明 Vuex工作原理：用一句話說明 Vuex工作原理 - 知乎
總結(jié)
以上是生活随笔為你收集整理的vue 的双向绑定原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 昆明理工大学计算机技术英语翻译,昆明理工
- 下一篇： 【RuoYi-Vue-Plus】问题笔记