vue的双向绑定原理

vue数据双向绑定原理

vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。
当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。
然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。

实现原理

let obj = {}
        let middle = 100
        Object.defineProperty(obj, 'msg', {
            get() {
                return middle
            },
            set(val) {
                middle = val
            }
        })

        console.log(obj.msg)     //获取对象的属性时，会调用自身的get方法

        obj.msg = 1111           //设置对象的属性时，会调用自身的set方法
        console.log(obj.msg)
    </script>

思路分析

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转 为 getter/setter。Object.defineProperty 是 ES5 中一个无法模拟的特性， 这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

扩展：

注意：vue3 的 变化 Object.defineProperty有以下缺点。

1、无法监听es6的Set、Map 变化；

2、无法监听Class类型的数据；

3、属性的新加或者删除也无法监听；

4、数组元素的增加和删除也无法监听。

针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺 点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。

小案例

<div id="box">
        <button class="btn">toggle</button>
        <button class="btn2">big</button>
        <div class="box"></div>
    </div>
    <script src="./base/vue.js"></script>
    <script>
        /*
            mvc:
                m:model       数据模型层    dao层 
                v:view        视图层        
                c:controller  控制器       service

            controller的作用：就是将m层的数据在view层进行显示
        
        */

        // m层
        let model = {
            isShow: true,
            isBig: true
        }

        //v层
        let box = document.querySelector('.box')

        //c层
        function Controller(){
            this.init()
        }
        Controller.prototype = {
            init(){
                this.addEvent()
            },
            addEvent(){
                let btn = document.querySelector('.btn')
                let btn2 = document.querySelector('.btn2')
                
                btn.onclick = () =>{
                    //更改数据
                    model.isShow = !model.isShow
                    //渲染视图
                    this.render()
                }
                btn2.onclick = () =>{
                    model.isBig = !model.isBig
                    this.render()
                }
            },
            render(){
                box.style.display = model.isShow ? 'block' : 'none'
                box.style.width = model.isBig ? '300px' : '100px'
            }
        }

        new Controller()
    </script>

效果如图：

当你点击 toggle 的时候会使box的属性值为none，此时isShow为false，再次点击的时候box的属性为block，isShow为true。

big按钮同理