vue运行机制总结

new Vue()运行之后，Vue调用_init函数进行初始化，初始化生命周期，事件，props,methods,data,computed,watch等

其中最重要的是通过Object.defineProperty设置setter和getter函数，用来 实现响应式(数据自动更新)和依赖收集 

初始化后，调用 $mount挂载组件

--------------

添加响应式数据：

this.$set(this.obj,'name','dongfang')  //因为是在初始化时就劫持监听数据，所以初始化后添加的数据要响应式，必须通过$set方法添加数据监听

数组变异方法：vue文档链接

当直接修改数组某一项值时，vue没法检测到，如

vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice 
vm.items.splice(indexOfItem, 1, newValue)

vue对如下数组方法进行了包装变异，调用这些方法操作后 一样能触发视图更新 。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

-----------------

Object.defineProperty 和 Proxy

在使用Object.defineProperty时，我们必须循环遍历所有的域值才能劫持每一个属性并收集，这也是性能提高的一个瓶颈，当然这是由于浏览器所限，

而Proxy的劫持手段则是官宣标准——直接监听data的所有域值。

//data is our source object being observed
const observer = new Proxy(data, {
    get(obj, prop) { ... },
    set(obj, prop, newVal) { ... },
    deleteProperty() {
        //invoked when property from source data object is deleted
    }
})

---------------

vuex，vue-router用到的也挺简单， 待梳理

来源：oschina

链接：https://my.oschina.net/u/560237/blog/3178412