- new Vue 会调用 _init 方法进行初始化操作 (init方法通过一个功能函数挂载到Vue 的原型上)
- 会将用户传入的options挂载到vm.$options 上
- 会对当前属性上搜索有没有data数据,关键函数initState
- 有data判断是不是函数,如果是函数获取他的返回值 关键函数initData
- ovserve去观测data中的数据,把他通过defineProperty变成响应式(就是通过get和set代理)
- vm上此时不能直接获取data的响应式数据,通过vm._data = data 把数据挂到vm上
- 再简化一层,把_data中的数据直接放到vm上。通过代理实现,最终效果是 vm.message = vm._data.message
vue性能优化
-
不要把所有的数据都放在data中。(因为所有的数组都会增加get和set)
-
不要写数据的时候层次过深,尽量扁平化数据
-
不要频繁的获取数据
错误的写法
for(let i =0;i<1000;i++){
this.a += i
}
正确的写法
let total = 0
for(let i =0;i<10000;i++){
total += i
}
this.a = total
- 如果数据不需要响应式,可以使用Object.freeze冻结属性。 vue源码中有判断,如果属性不可修改,就会跳过defineProperty