前端面试题整理——VUE双向绑定原理

2023-06-18 14:45•数据库•阅读 3325

VUE2.0和3.0数据双向绑定的原理，并说出其区别。

代码：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>vue2.0/3.0双向数据绑定原理</title>
</head>
<body>
姓名：<span ></span>
<br>
<input type="text"  oninput="changeTxt2()">
<hr>
姓名：<span ></span>
<br>
<input type="text"  oninput="changeTxt2()">

<script>
    // 2.0
    // ES5：Object.defineProperty 数据劫持实现
    let obj = {name: ''};
    let newObj = JSON.parse(JSON.stringify(obj))
    Object.defineProperty(obj, 'name', {
        get() {
            return newObj.name
        },
        set(value) {
            if (value === newObj.name) return;
            newObj.name = value;
            observer();
        }
    })

    function observer() {
        document.getElementById('name').innerHTML = document.getElementById('inputText').value = obj.name;
    }

    function changeTxt() {
        obj.name = document.getElementById('inputText').value;
    }

    /*
    * Object.defineProterty弊端：
    * 1、需要将原来的对象克隆一份
    * 2、需要分别给对象中指定每一个属性设置监听
    * 3、深度监听需要递归到底，一次性计算量大
    * 4、不能监听数组，只能监听对象
    * 5、无法监听新增和删除的属性，只能通过Vue.set和Vue.delete这两个API进行
    * */
// 如何监听数组：重写数组的相应方法对视图进行更新
// 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象，原型指向 oldArrayProperty，再扩展新的方法不会影响Array的原型
const arrProto = Object.create(oldArrayProperty)
// 重写方法
['push','pop','shift','unshift'].forEach(methodName=>{
arrProto[methodName] = function(){
// 先触发视图更新,下面updateView方法是伪代码，表示视图更新的封装方法
updateView()
// 再调用Array原有方法执行数组更新
oldArrayProperty[methodName].call(this,...arguments)
}
})
// 3.0
    // ES6：Proxy 委托代理
    let obj2 = {};
    obj2 = new Proxy(obj2, {
        get(target, prop) {
            // target，代理的对象
            // prop，代理对象的属性
            return target[prop]
        },
        set(target, prop, value) {
            target[prop] = value
            observer2()
        }
    })
    // 不需要克隆，只需要整个对象进行代理
// Proxy可以对数组进行监听，同时可以监听新增和删除属性
// 缺点：浏览器兼容弱

    function observer2() {
        document.getElementById('name2').innerHTML = document.getElementById('inputText2').value = obj2.name;
    }
    function changeTxt2() {
        obj2.name = document.getElementById('inputText2').value;
    }
</script>
</body>
</html>

其他vue相关面试问题回答

上一篇 »前端面试题整理汇总二
下一篇 »前端面试题整理—HTML/CSS篇

前端面试题整理——VUE双向绑定原理

相关推荐

前端面试题整理—JavaScript篇，二

最近面试前端面试题整理，css部分

Java面试题大汇总

vue.js和angular双向数据绑定的实现原理

Vue的双向数据绑定原理是什么？

常问到的vue、react面试题

vue 之 双向绑定原理

C#面试题整理，不带答案

vue 之双向绑定原理