vue源码分析（1）

vue源码分析之前涉及的一些小知识点，记录一下：

• [ ].slice.call(lis) :将伪数组转化成真数组。
• node.nodeType：得到节点类型。
• Obj.defineProperty：定义属性
  defineProperty(obj,propertyName,{ }) :给对象添加属性（指定描述符）

属性描述符：

1. 数据描述符
   configurable：是否可以重新定义
   enumerable：是否可以枚举
   value：初始值
   writable：是否可以修改属性值
2. 访问描述符
   get：回调函数，根据其他相关的属性动态计算得到当前属性值。
   set：回调函数，监视当前属性值的变化，更新其他相关的属性值。

const obj = {
    firstName:'A',
    lastName:'B'
  }
// 给obj添加fullName属性    同时改变obj中firstName，lastName时 fullName也改变 ，同理，改变
//firstName时，firstName，lastName也改变
Object.defineProperty(obj,'fullName',{
    get(){   
        return this.firstName + '-' +this.lastName;
      },
    set(value){
         const names = value.split('-');
         this.firstName = names[0] ;
         this.lastName = names[1] ;
      }
    })
console.log(obj.fullName)       //A-B
obj.firstName = 'C';
obj.lastName = 'D';
console.log(obj.fullName)      //C-D
obj.fullName = 'E-F';
console.log(obj.firstName)      //C
console.log(obj.lastName)      //D


Object.defineProperty(obj,'fullName2',{
   configurable:false,        //不能重新定义
   enumerable:false,         //不能枚举
   value:'G-H',
    writable:true            //不能修改属性值
    })

• Object.keys(obj)：得到对象自身可枚举属性组成的数组。

Object.keys(obj);          //  [firstName, lastName]

• obj.hasOwnProperty(prop):判断prop是否是obj自身的属性。
• DocumentFragment ：文档碎片（高效批量更新多个节点 ）。

document：对应显示的页面，包含n个element，一旦更新document内部的某个元素，界面也会更新(DocumentFragment可以解决这个问题)。
DocumentFragment： 内存中保存n个element容器对象（不与界面关联），如果更新framgnet中的某个element，界面不会更新。（批量更新）

• vue数据代理：通过vm对象来代理data对象中所有属性的操作。

1. 通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符。
2. 所有添加的属性都包含getter/setter。
3. getter/setter内部操作data对应的属性数据。