详解Vue 2中的 initState 状态初始化

下面就为您详解Vue 2中的initState状态初始化。

一、initState概述

在Vue应用程序的初始化过程中，首先会执行initState函数，该函数主要用于初始化组件的状态。该函数会将props, methods, data, computed, watch等属性放在vm实例上，并且调用initProps、initMethods、initData、initComputed、initWatch等函数进行属性的初始化。

具体流程如下：
1. 首先创建vm实例；
2. 执行initState函数，将props、methods、data等属性挂载到vm实例上；
3. 调用initProps函数，对props进行初始化；
4. 调用initData函数，对data进行初始化；
5. 调用initComputed函数，对computed进行初始化；
6. 调用initWatch函数，对watch进行初始化。

二、initProps初始化

在Vue中，使用props来接收来自父级组件的数据。initProps函数主要用于对props进行初始化，将props中的属性拷贝到vm实例中。示例代码如下：

// 定义子组件
Vue.component('child-component', {
  props: {
    message: String
  },
  template: '<div>{{ message }}</div>'
});

// 创建父组件实例
new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue.js!'
  },
  template: '<child-component :message="msg"></child-component>'
});

在上面的例子中，父组件向子组件传递了一个message属性，并且定义了一个子组件渲染message属性的模板。在初始化过程中，initProps函数会将props中的message属性拷贝到vm实例中，子组件就可以通过this.message获取到父组件传递过来的message属性值。

三、initData初始化

在Vue中，data用来存储组件的状态数据，initData函数用于对data进行初始化。示例代码如下：

// 创建Vue实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
});

在上面的例子中，通过data定义了一个message属性并初始化为'Hello Vue.js!'。在初始化过程中，initData函数会将data中的属性拷贝到vm实例中。

四、initComputed初始化

在Vue中，使用computed属性来计算派生的数据，initComputed函数用于对computed属性进行初始化。示例代码如下：

// 创建Vue实例
new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

在上面的例子中，computed定义了一个fullName属性，用来计算firstName和lastName的值拼接而成的完整姓名。在初始化过程中，initComputed函数会将computed属性挂载到vm实例中。

五、initWatch初始化

在Vue中，使用watch属性来监听数据的变化，initWatch函数用于对watch属性进行初始化。示例代码如下：

// 创建Vue实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    }
  }
});

在上面的例子中，watch属性监听message属性的变化，并且在message属性发生变化时输出变化的内容。在初始化过程中，initWatch函数会将watch属性挂载到vm实例中。

以上就是Vue 2中的initState状态初始化的详细攻略。