vue实现响应式原理即vue如何监听data的每个属性的变化

记住两点

1、使用 Object.defineProprety实现响应式原理
2、 data属性代理到vm(即是Vue实例)上

Object.defineProperty 是如何使用的？

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

因为 Object.defineProperty() 是ES6新增的一个方法，所有我们使用vue不支持IE低版本浏览器，我们在选择Vue开发项目的时候需要注意这个问题(哈哈!!! 如果要兼容太多低版本浏览器 我感觉是浪费生命的事情 ! )

如何使用

  /*----------  defineProperty 基本使用  ------------*/
        let obj = {}
        let name = 'zhangsan'

        Object.defineProperty(obj, 'name', {
            get: function () {
                console.log('get')
                return name
            },
            set: function (newValue) {
                console.log('set')
                name = newValue
            }

        })
       console.log(obj.name)
       obj.name = 'lisi'
        // 输出
        // get
        // zhangsan
        // set

我们对obj对象属性进行get和set的时候都用了方法来实现，这只是一个基本的使用

模拟实现Vue响应式

代码

// 模拟实现Vue响应式
       let vm = {} // 我们把这个看做是Vue的一个实例
        // data看作是Vue实例的data属性
        let data = {
            price:100,
            name:'zhangsan'
        }


        let key, value

        for (const key in data) {
            if (data.hasOwnProperty(key)) { 
               (function(key){
                Object.defineProperty(vm,key,{  // 将data属性代理到vm上
                    get:function(){
                        console.log('get',data[key])  // 监听
                        return data[key]
                    },
                    set:function(newValue){
                        console.log('set',newValue) // 监听
                        data[key] = newValue
                    }
                })
               })(key)
                
            }
        }


        console.log(vm.name)

这样就简单的实现了一个Vue的响应式原理，这里只是简单的模拟，以后还会更加深入去了解。