细读Vue2.6.14核心源码（5）：initState处理props、methods、data、computed、watch

前端

2023-09-21 11:16:41

Vue.js是一个流行的前端框架，以其轻量级、高性能和响应式数据绑定特性而闻名。在Vue的初始化过程中，initState函数扮演着至关重要的角色，负责处理props、methods、data、computed和watch这五个关键属性。

Props

props是Vue组件与父组件通信的桥梁，允许父组件向子组件传递数据。initState函数通过从父组件获取props对象并将其合并到Vue实例的props选项中来处理props。

Methods

methods包含了Vue组件中可用的方法，这些方法可以通过模板中的v-on指令调用。initState函数通过从组件选项中获取methods对象并将其合并到Vue实例的methods选项中来处理methods。

Data

data包含了Vue组件的私有数据，这些数据响应式地与组件的状态相关联。initState函数通过从组件选项中获取data函数或对象并将其合并到Vue实例的data选项中来处理data。

Computed

computed包含了从其他响应式数据派生的计算属性，这些属性可以提高组件的性能并使模板更加简洁。initState函数通过从组件选项中获取computed对象并将其合并到Vue实例的computed选项中来处理computed。

Watch

watch允许Vue组件监听其他响应式数据的变化并执行相应的回调函数。initState函数通过从组件选项中获取watch对象并将其合并到Vue实例的watch选项中来处理watch。

实践中的initState

为了更深入地了解initState函数在实践中的工作原理，让我们考虑一个简单的Vue组件：

Vue.component('my-component', {
  props: ['someProp'],
  methods: {
    someMethod() {
      console.log('some method called');
    }
  },
  data() {
    return {
      someData: 'some data'
    };
  },
  computed: {
    someComputed() {
      return this.someData + ' computed';
    }
  },
  watch: {
    someProp: {
      handler(newVal, oldVal) {
        console.log(`prop changed from ${oldVal} to ${newVal}`);
      },
      immediate: true
    }
  }
});