vue基础语法学习

Object.defineProperty方法的使用

// 这是一个普通的对象
let phone = {}
// 给这个phone新增一个属性 三个参数：新增属性的对象，新增啥属性，属性值，key value对
Object.defineProperty(
  phone,
  'color',{
    value:'太空灰', //设置属性值
    writable:true,// 指明这个属性是否可以赋值

    // 当配置项中由setter和getter的时候上面的value和writable属性都不能写

    // getter方法配置项 当读取属性值的时候这个方法被自动调用
    get:function() {
      
    },
    // setter方法配置项 这个属性被重新赋值的时候被自动调用
    set: function() {

    }

  }
)

数据代理机制

什么是数据代理机制？

1. 通过访问代理对象的属性来间接访问目标对象的值。数据代理机制的实现靠的就是上面所说的Object.defineProperty()方法。
2. vue实例可以直接.属性的原理就是数据代理机制。

// target object
let target = {
  name:'张三'
}

// proxy object
let proxy = {

}

// if we want to achieve proxy mechanism, we should add 'name' property to proxy
// attention: proxy property must be same as target object ,for example:'name'
Object.defineProperty(proxy, 'name', {
  get : function(){
    // indirct access to target object
    return target.name;
  },
  set: function(val) {
      target.name = val
  }
})

// es6 新特性 对象中的函数或方法：可以省略

注意：vue实例的代理机制的属性名是有要求的，下划线和美元符开头的一般是vue内部用的。vue不会代理_和\$开头的属性。不然就会有可能导致vue内部使用的变量被覆盖。

手写vue数据代理部分实现

Object是js中的类。

看vue的源码