前端培训丁鹿学堂:vue读源码前置知识

78 阅读1分钟
  1. new Vue 会调用 _init 方法进行初始化操作 (init方法通过一个功能函数挂载到Vue 的原型上)
  2. 会将用户传入的options挂载到vm.$options 上
  3. 会对当前属性上搜索有没有data数据,关键函数initState
  4. 有data判断是不是函数,如果是函数获取他的返回值 关键函数initData
  5. ovserve去观测data中的数据,把他通过defineProperty变成响应式(就是通过get和set代理)
  6. vm上此时不能直接获取data的响应式数据,通过vm._data = data 把数据挂到vm上
  7. 再简化一层,把_data中的数据直接放到vm上。通过代理实现,最终效果是 vm.message = vm._data.message

vue性能优化

  1. 不要把所有的数据都放在data中。(因为所有的数组都会增加get和set)

  2. 不要写数据的时候层次过深,尽量扁平化数据

  3. 不要频繁的获取数据

    错误的写法

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
  1. 如果数据不需要响应式,可以使用Object.freeze冻结属性。 vue源码中有判断,如果属性不可修改,就会跳过defineProperty