打破新旧 Vue 2.x 源码阅读记录，探秘组件更新与 Props

前端

2023-09-20 14:34:52

Vue 组件更新流程详解

Vue.js 是一个渐进式 JavaScript 框架，它以其响应式数据绑定和组件化架构而闻名。在 Vue 应用程序中，当状态发生变化时，组件将自动更新。为了了解组件更新的过程，本文将深入探讨 Vue 2.x 中组件更新的流程。

组件更新流程

当一个组件需要更新时，它会经历以下几个步骤：

标记需要更新的节点 ：Vue 会标记需要更新的节点，即新旧节点不同的节点。
更新根节点 ：更新根节点，包括更新节点的属性、事件监听器等。
更新子节点 ：递归更新根节点的子节点。
更新完成 ：更新完成后，触发 updated 钩子函数。

Props 的使用

Props 是组件之间传递数据的有效方式。在使用 Props 时，需要遵守以下规则：

Props 必须在组件的 props 选项中声明。
Props 只能在组件的根元素上使用。
Props 的值是只读的，不能在组件内部修改。

Props 可以帮助我们构建更灵活、更可重用的组件。例如，我们可以通过修改 Props 的值来改变组件显示的内容，而无需修改组件的代码。

新旧节点不同时的更新

对于新旧节点不同的逻辑，与初次创建组件的过程相似，分为创建新节点、更新占位符节点、删除旧节点三个过程。

例如，如果一个组件的根元素是一个 <div>，而更新后变成一个 <span>，Vue 会执行以下操作：

创建一个新的 <span> 元素。
将旧的 <div> 元素的属性和事件监听器更新到新的 <span> 元素。
删除旧的 <div> 元素。

代码示例

以下是一个展示组件更新流程的代码示例：

<div id="app">
  <comp :msg="msg"></comp>
</div>

<script>
import Vue from 'vue'
import Comp from './comp.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  data: {
    msg: 'hello'
  },
  methods: {
    changeMsg() {
      this.msg = 'world'
    }
  },
  components: {
    Comp
  }
})
</script>

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: ['msg'],
  created() {
    console.log('Comp created: ', this.msg)
  },
  updated() {
    console.log('Comp updated: ', this.msg)
  }
}
</script>