Vue数据初始化initState的实例详解

什么是initState

在Vue实例化过程中，initState是一个非常重要的方法。它负责初始化Vue实例的各种属性、数据和方法等，是Vue实例化的关键过程之一。

initState源码解析

Vue实例化过程的源码分析比较复杂，这里只讲述其中涉及到initState的部分。

function initState(vm: Component) {
  // ...
  initStateData(vm);
  // ...
}

function initStateData(vm: Component) {
  const data = vm.$options.data;
  data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {};
  // ...
}

从上述代码片段中，我们可以看到以下几个关键点：

• initStateData函数负责初始化Vue实例的 data 属性，如果有为方法则递归执行筛选后的结果。
• 在执行完initState函数后，便会得到处理之后的vue实例对象。

实例1

接下来，我们通过一个具体的例子来理解initState的作用。

new Vue({
  data() {
    return {
      message: 'Hello World'
    }
  }
});

上述代码会创建一个新的Vue实例，并且实例对象上的_data属性会被赋值为：

{
  message: 'Hello World'
}

实例2

我们再来看一个含有computed属性的例子：

new Vue({
  data() {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
});

上述代码会创建一个新的Vue实例，并且实例对象上的_data属性会被赋值为：

{
  message: 'Hello World'
}

实例对象上的_computedWatchers属性会被赋值为：

{
  reversedMessage: {
    getter: /*此处省略*/,
    value:/*此处省略*/,
    vm: /*此处省略*/
  }
}

经过initState函数的处理，我们可以看到Vue实例对象上的_data属性和_computedWatchers属性都得到了正确的初始化。