前端面试 vue2和vue3的双向绑定原理分析

前端面试 vue2、vue3双向绑定原理

vue3 双向绑定原理

首先介绍Proxy代理

1. proxy不是对原对象而是对返回的对象进行代理，proxy是对整个对象进行代理的不是对象中某个属性
2. Proxy有两个参数 第一个是需要代理的对象 第二个是handler需要对数据进行操作的方法如 get set
3. get有两个参数 第一个是代理的对象 第二个是key也就是对象中的某个属性名
4. set有三个参数 第一个和第二个和get一样 但三个是我们重新设置新的值

    <input type="text" v-model='name'>
    <span v-bind="name">0</span>

        // vue3的双向数据绑定Demo
        function View() {
   
            let pxy = new Proxy({
   },//代理整个对象{}，用这个容器存储值
                {
   
                    get(obj, property) {
   },
                    set(obj, property, value) {
   //obj为容器 property为下面this.getAttribute('v-model')这段代码设置的key value为下面设置的this.value
                        const models1 = document.querySelectorAll(`[v-model = "${
     property}"]`);
                        const models2 = document.querySelectorAll(`[v-bind = "${
     property}