Vue响应式原理 - 响应式处理

响应式处理入口

通过查看源码解决下面问题

• vm.msg = {count:3} ,重新给属性赋值，是否是响应式的?
• vm.arr[0] = 4,给数组元素赋值，视图是否会更新
• vm.arr.length = 0,修改数组的length，视图是否会更新
• vm.arr.push(4),视图是否会更新

响应式处理的入口

整个响应式处理的过程是比较复杂的，从
src/core/instance/init.js

• initState(vm) vm 状态的初始化
• 初始化了_data、_props、methods等

src/core/instance/state.js

//数据的初始化
if(opts.data){
   
 initData(vm)
} else {
   
  observe(vm._data ={
   }.true /*asRootData*/)
}

initData

function initData (vm: Component) {
   
  let data = vm.$options.data
  // 初始化_data，组件中data是函数，调用函数返回结果
  // 否则直接返回data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {
   }
  if (!isPlainObject(data)) {
   
    data = {
   }
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  // 判断data上的成员是否和 props/methods 重名
  while (i--) {
   
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
   
      if (methods && hasOwn(methods, key)) {
   
        warn(
          `Method "${
     key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
   
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${
     key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
   
      proxy(vm, `_data`, key) // 将data中的成员注入到Vue
    }
  }
  // observe data
  // 响应式处理
  observe(data, true /* asRootData */)
}

export function observe (value: any, asRootData: ?boolean): Observer |