Vue组件实例的创建流程：Props初始化、Setup执行与渲染上下文绑定 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 组件实例的创建流程：Props 初始化、Setup 执行与渲染上下文绑定

各位听众，大家好！今天我们来深入探讨 Vue 组件实例的创建流程，重点关注 Props 初始化、Setup 函数的执行以及渲染上下文的绑定这三个关键环节。理解这些环节对于更好地掌握 Vue 组件的运作机制至关重要。

一、组件实例创建的整体流程概览

在深入细节之前，我们先从宏观上了解 Vue 组件实例的创建流程。简单来说，当 Vue 遇到一个组件标签时，它会执行以下步骤：

组件选项解析和规范化：将组件选项（options）进行解析，例如 props、data、methods、computed 等，并进行规范化，确保它们符合 Vue 的内部结构。
创建组件实例：基于规范化后的组件选项，创建一个新的 Vue 组件实例。这个实例是组件的核心，包含了组件的状态、方法和生命周期钩子。
Props 初始化：如果组件定义了 props，Vue 会从父组件传递过来的属性中提取相应的值，并初始化到组件实例上。
依赖注入 (可选)：如果组件配置了 inject 选项，Vue 会从父组件或者祖先组件中注入相应的值。
Setup 函数执行 (如果存在)：如果组件定义了 setup 函数，Vue 会执行该函数，并将其返回值绑定到组件实例的渲染上下文中。
渲染上下文绑定：将组件实例的 data、methods、computed、props 和 setup 返回值等绑定到组件的渲染上下文中，使得在模板中可以访问这些数据和方法。
生命周期钩子调用：根据组件的生命周期，调用相应的钩子函数，例如 beforeCreate、created 等。
挂载组件：将组件渲染成真实的 DOM 元素，并将其插入到父组件的 DOM 结构中。

今天我们重点关注流程中的 Props 初始化、Setup 函数执行和渲染上下文绑定。

二、Props 初始化：数据传递的桥梁

Props 是 Vue 组件之间进行数据传递的重要机制。父组件可以通过 Props 向子组件传递数据，子组件则可以通过 Props 接收这些数据。

1. Props 的定义

在组件中，我们可以通过 props 选项来定义组件可以接收的 Props。props 可以是一个字符串数组，也可以是一个对象。

字符串数组形式：
```
Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})
```
这种形式简单明了，适用于只需要声明 Props 名称的场景。但是，它缺乏类型检查和默认值等功能。
对象形式：
```
Vue.component('my-component', {
  props: {
    message: {
      type: String,
      required: true,
      default: 'Hello World'
    },
    count: {
      type: Number,
      default: 0,
      validator: function (value) {
        return value >= 0
      }
    }
  },
  template: '<div>{{ message }} - {{ count }}</div>'
})
```
对象形式提供了更强大的功能，包括：
- 类型检查 (type)：指定 Props 的类型，例如 String、Number、Boolean、Array、Object、Date、Function、Symbol。Vue 会在运行时对 Props 的类型进行检查，如果类型不匹配，会发出警告。
- 必需性 (required)：指定 Props 是否是必需的。如果 required 为 true，但父组件没有传递该 Props，Vue 会发出警告。
- 默认值 (default)：指定 Props 的默认值。如果父组件没有传递该 Props，组件会使用默认值。默认值可以是一个静态值，也可以是一个函数。如果默认值是一个函数，该函数会在组件实例创建时被调用，并返回默认值。
- 自定义验证器 (validator)：使用 validator 函数来自定义 Props 的验证逻辑。validator 函数接收 Props 的值作为参数，并返回一个布尔值，表示 Props 是否有效。如果 validator 函数返回 false，Vue 会发出警告。

2. Props 的初始化过程

当 Vue 创建组件实例时，会执行以下步骤来初始化 Props：

从父组件获取 Props 的值：Vue 会检查父组件是否传递了与组件定义的 Props 名称相同的属性。
类型检查：如果组件定义了 Props 的类型，Vue 会检查父组件传递的属性值的类型是否与定义的类型匹配。如果不匹配，Vue 会发出警告。
处理默认值：如果父组件没有传递某个 Props，并且组件定义了该 Props 的默认值，Vue 会使用默认值。
自定义验证：如果组件定义了 Props 的自定义验证器，Vue 会调用该验证器，并检查验证结果。如果验证失败，Vue 会发出警告。
将 Props 的值绑定到组件实例：Vue 会将 Props 的值绑定到组件实例的 $props 属性上，使得可以在组件的模板和 JavaScript 代码中访问这些值。

3. Props 的单向数据流

Vue 提倡单向数据流，这意味着 Props 应该被视为只读的。子组件不应该直接修改 Props 的值，而是应该通过触发事件来通知父组件修改数据。

如果子组件需要基于 Props 的值进行一些计算或转换，应该使用计算属性 (computed properties) 或本地数据 (data) 来存储计算结果，而不是直接修改 Props 的值。

4. 代码示例

下面是一个 Props 初始化的示例：

// 父组件
<template>
  <div>
    <my-component :message="parentMessage" :count="10"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

// 子组件 (my-component)
<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  methods: {
    increment() {
      // 错误的做法：直接修改 props
      // this.count++;

      // 正确的做法：触发事件通知父组件修改数据
      this.$emit('increment');
    }
  }
}
</script>

在这个例子中，父组件通过 message 和 count 属性向子组件传递数据。子组件接收到这些数据后，将它们绑定到 $props 属性上，并在模板中显示。子组件的 increment 方法演示了如何通过触发事件来通知父组件修改数据。

三、Setup 函数执行：Composition API 的核心

Setup 函数是 Vue 3 Composition API 的核心，它提供了一个新的方式来组织和复用组件的逻辑。

1. Setup 函数的作用

Setup 函数是一个在组件实例创建之前执行的函数。它接收两个参数：

props：一个只读对象，包含了父组件传递给子组件的所有 Props。
context：一个上下文对象，包含了以下属性：
- attrs：一个对象，包含了所有没有被声明为 Props 的属性。
- slots：一个对象，包含了所有插槽。
- emit：一个函数，用于触发自定义事件。
- expose：一个函数，用于显式地暴露组件的属性和方法给父组件。

Setup 函数的返回值将绑定到组件实例的渲染上下文中，使得可以在组件的模板和 JavaScript 代码中访问这些返回值。

2. Setup 函数的执行时机

Setup 函数在以下时机执行：

组件实例创建之前：Setup 函数在 beforeCreate 生命周期钩子之前执行。
只执行一次：Setup 函数只在组件实例创建时执行一次。

3. Setup 函数的返回值

Setup 函数可以返回以下内容：

一个对象：该对象中的属性和方法将绑定到组件实例的渲染上下文中。这是最常用的方式。
一个函数：该函数将作为组件的渲染函数。这种方式适用于需要完全自定义组件渲染逻辑的场景。
undefined：如果 Setup 函数没有返回值，Vue 会将组件实例的 data、methods、computed 和 props 绑定到组件实例的渲染上下文中。

4. Setup 函数中的响应式数据

在 Setup 函数中，可以使用 reactive 和 ref 函数来创建响应式数据。reactive 函数用于创建对象的响应式副本，ref 函数用于创建基本类型值的响应式引用。

import { reactive, ref } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    const message = ref('Hello')

    function increment() {
      state.count++
    }

    return {
      state,
      message,
      increment
    }
  }
}

在这个例子中，state 是一个响应式对象，包含了 count 属性。message 是一个响应式引用，包含了字符串 ‘Hello’。increment 是一个函数，用于增加 state.count 的值。

5. Setup 函数中的生命周期钩子

在 Setup 函数中，可以使用 onMounted、onUpdated、onUnmounted 等函数来注册生命周期钩子。

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })

    onUnmounted(() => {
      console.log('Component unmounted')
    })

    return {}
  }
}

在这个例子中，onMounted 函数会在组件挂载后执行，onUnmounted 函数会在组件卸载后执行。

6. 代码示例

下面是一个 Setup 函数的示例：

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive, ref, onMounted } from 'vue'

export default {
  props: {
    initialCount: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const state = reactive({
      count: props.initialCount
    })

    const message = ref('Hello')

    function increment() {
      state.count++
    }

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      state,
      message,
      increment
    }
  }
}
</script>

在这个例子中，Setup 函数接收 props 参数，并使用 props.initialCount 初始化 state.count 的值。它还创建了一个响应式引用 message 和一个函数 increment。最后，它返回一个对象，包含了 state、message 和 increment，这些值将绑定到组件实例的渲染上下文中。

四、渲染上下文绑定：连接数据与视图的桥梁

渲染上下文是 Vue 组件中一个非常重要的概念。它是一个对象，包含了组件实例的所有可访问的数据和方法，例如 data、methods、computed、props 和 setup 函数的返回值。

1. 渲染上下文的作用

渲染上下文的作用是将组件的数据和方法暴露给模板，使得可以在模板中使用这些数据和方法来动态地渲染组件的视图。

2. 渲染上下文的组成

渲染上下文由以下部分组成：

data：组件的 data 选项定义的数据。
methods：组件的 methods 选项定义的方法。
computed：组件的 computed 选项定义的计算属性。
props：组件的 props 选项定义的 Props。
setup 函数的返回值：如果组件定义了 setup 函数，则 setup 函数的返回值也会绑定到渲染上下文中。
内置属性和方法：Vue 还会在渲染上下文中添加一些内置的属性和方法，例如 $el、$refs、$emit 等。

3. 渲染上下文的绑定过程

当 Vue 创建组件实例时，会执行以下步骤来绑定渲染上下文：

将 data、methods、computed 和 props 绑定到组件实例：Vue 会将组件的 data、methods、computed 和 props 选项定义的数据和方法绑定到组件实例上。
执行 setup 函数：如果组件定义了 setup 函数，Vue 会执行该函数，并将其返回值绑定到组件实例上。
创建渲染函数：Vue 会根据组件的模板创建一个渲染函数。
将组件实例作为渲染函数的上下文：Vue 会将组件实例作为渲染函数的上下文，使得可以在渲染函数中使用组件实例的所有数据和方法。

4. 在模板中使用渲染上下文

在模板中，可以使用双花括号 {{ }} 来访问渲染上下文中的数据，可以使用 v-bind 指令来绑定渲染上下文中的属性，可以使用 v-on 指令来绑定渲染上下文中的方法。

<template>
  <div>
    <p>Message: {{ message }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    handleClick() {
      alert(this.message)
    }
  }
}
</script>

在这个例子中，{{ message }} 用于访问渲染上下文中的 message 属性，@click="handleClick" 用于绑定渲染上下文中的 handleClick 方法。

5. 代码示例

结合 Props 初始化和 Setup 函数的例子，我们可以看到渲染上下文是如何将这些数据连接起来的：

//  App.vue (父组件)
<template>
  <my-component :initial-count="10" message="Hello from App"></my-component>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

// MyComponent.vue (子组件)
<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive, ref, onMounted } from 'vue'

export default {
  props: {
    initialCount: {
      type: Number,
      default: 0
    },
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const state = reactive({
      count: props.initialCount
    })

    // props.message 已经在渲染上下文中，setup里可以不重复定义
    // const message = ref(props.message); // 实际上setup中定义message会覆盖掉props中的message

    function increment() {
      state.count++
    }

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      state,
      increment
    }
  }
}
</script>

在这个例子中，initialCount 和 message 通过 Props 传递给 MyComponent。setup 函数接收 initialCount 并将其用于初始化 state.count。message 也成为了渲染上下文的一部分（通过props），而 state 和 increment 通过 setup 函数的返回值添加到渲染上下文中。因此，在模板中，我们可以访问 state.count 和 message。

五、表格总结：关键流程与概念

阶段	描述	关键点	代码示例
Props 初始化	父组件向子组件传递数据，并进行类型检查、默认值处理和自定义验证。	Props 的定义方式 (字符串数组或对象)，类型检查 (type)，必需性 (required)，默认值 (default)，自定义验证器 (validator)，单向数据流。	`javascript props: { message: { type: String, required: true, default: 'Hello World' }, count: { type: Number, default: 0, validator: function (value) { return value >= 0 } } }`
Setup 函数执行	在组件实例创建之前执行，用于组织和复用组件的逻辑。	`props` 参数，`context` 对象 (attrs, slots, emit, expose)，返回值 (对象或函数)，响应式数据 (reactive, ref)，生命周期钩子 (onMounted, onUpdated, onUnmounted)。	`javascript setup(props, context) { const state = reactive({ count: props.initialCount }) const message = ref('Hello') function increment() { state.count++ } return { state, message, increment } }`
渲染上下文绑定	将组件的数据和方法暴露给模板，使得可以在模板中使用这些数据和方法来动态地渲染组件的视图。	`data`、`methods`、`computed`、`props`、`setup` 函数的返回值、内置属性和方法 ($el, $refs, $emit)，模板中的数据访问 ({{ }})，属性绑定 (v-bind)，方法绑定 (v-on)。	`html <div> <p>Message: {{ message }}</p> <button @click="handleClick">Click me</button> </div>`

总结：理解组件创建流程，掌握Vue的核心

今天我们详细讨论了 Vue 组件实例创建过程中的 Props 初始化、Setup 函数执行和渲染上下文绑定。理解这些概念对于构建高效、可维护的 Vue 应用至关重要。掌握这些知识点，能够更深入地了解 Vue 的运作机制，并在开发过程中更加得心应手。

更多IT精英技术系列讲座，到智猿学院