vue2.0是如何监听双向绑定的?
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .contanier{ width: 300px; height: 300px; background-color: aliceblue; border-radius: 10px; } .contanier-first,.contanier-second{ text-align: left; font-size: 28px; padding: 30px 100px; } </style> </head> <body> <div class="contanier"> <div class="contanier-first"> <span>姓:</span> <span class="first"></span> </div> <div class="contanier-second"> <span>名:</span> <span class="second"></span> </div> </div> <input type="text" oninput="userInfo.name=this.value"/> </body> <script src="./js/new.js"></script> <script src="./js/index.js"></script> </html>
function observe(obj){ for(const key in obj){ let internalValue = obj[key]; let funcs = []; Object.defineProperty(obj,key,{ get(){ if(window.__func && !funcs.includes(window.__func)){ funcs.push(window.__func); } return internalValue; }, set(val){ internalValue = val; for(var i=0;i<funcs.length;i++){ funcs[i](); } } }) } } function autorun(fn){ window.__func = fn; fn(); window.__func = null; }
const userInfo = { name: '张三丰' } observe(userInfo) const firstPage = function () { const res = document.querySelector(".first"); res.textContent = userInfo.name.charAt(0); } const secondPage = function () { const res = document.querySelector(".second"); res.textContent = userInfo.name.slice(1); } autorun(firstPage); autorun(secondPage); userInfo.name = "陈独秀";
Object.defineProperty的缺点
如果data的层级过深,就会一次性递归到底,计算量很大。
Object.defineProperty无法监听新增、删除属性。 (vue中需使用$set();方法新增双向绑定属性)
Object.defineProperty不具备监听原生数组。
本文来自博客园,作者:小珍珠在河里敲代码,转载请注明原文链接:https://www.cnblogs.com/Jansens520/p/18089851