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

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2.0/3.0双向数据绑定原理</title>
</head>
<body>
姓名：<span id="name"></span>
<br>
<input type="text" id="inputText" oninput="changeTxt2()">
<hr>
姓名：<span id="name2"></span>
<br>
<input type="text" id="inputText2" 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相关面试问题回答

 

posted @ 2020-08-08 18:34  火星_PGY  阅读(1405)  评论(0)  编辑  收藏  举报