深入Vue Object.defineProperty()_object.defineproperty()vue

先起个头 ，最近在看Vue深入vue原理，特此记录一下方便日后查看

我们可爱的程序员都知道 Vue 响应式原理是借助 Object 构造函数上面的 defineProperty()去做data 数据 收集的
先说特性
Object.defineProperty() 分数据属性跟访问其属性
他们是怎么区分的呢

Object.defineProperty(obj, key , {
    configurable: false, // 是否可被删除
    enumerable: false, // 是否可枚举
    writable: false， // 是否可修改
    value: undefined  // 默认值 
}) 



 function observer(value,cb) {
       Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
   }
  function defineReactive (obj, key, val, cb) {
       Object.defineProperty(obj, key, {
           enumerable: true,
           configurable: true,
           get: ()=>{  // 当数据被获取的时候 get 函数被触发
               console.log('get')
               /*....依赖收集等....*/
           },
           set:newVal=> { // 当数据被设置的时候 set 函数被触发
               console.log(newVal)
               cb();/*订阅者收到消息的回调*/
           }
       })
   }

  class Vue {
       constructor(options) {
           this.$data = options.data;
           this.render = options.render
           observer(this.$data, this.render)
       }
   }

    let app = new Vue({
        el: '#app',
        data: {
            text: 'texwt',
            text2: 'textwwwwwwwwwww2'
        },
        render(){
            console.log("render");
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

这是一种方式 第二种可以简化为 一下代码

class Vue {
        constructor(options) {
            this.$data = options.data;
            this.render = options.render
            this._proxy(options.data, options.render );/*构造函数中*/
        }
        /*代理*/
        _proxy (data, callback) {
            const that = this;
            Object.keys(data).forEach(key => {
                Object.defineProperty(that, key, {
                    configurable: true,
                    enumerable: true,
                    get: function proxyGetter () {
                        return that.$data[key];
                    },
                    set: function proxySetter (val) {
                        that.$data[key] = val;
                        callback()
                    }
                })
            });
        }
    }

    let app = new Vue({
        el: '#app',
        data: {
            text: 'texwt',
            text2: 'textwwwwwwwwwww2'
        },
        render(){
            console.log(this)
            console.log("render");
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36