Vue 学习笔记（二）

Sun, 07 Jun 2026 00:00:00 GMT

计算属性

基础用法

计算属性是基于响应式依赖进行缓存的计算结果。当依赖的响应式状态发生变化时，计算属性会重新计算。

import { ref, computed } from 'vue'

const firstName = ref('zhang')
const lastName = ref('san')

// 创建一个计算属性
const fullName = computed(() => {
  return firstName.value + lastName.value
})

console.log(fullName.value) // 输出：zhangsan

// 修改依赖项会触发计算属性重新计算
firstName.value = 'li'
console.log(fullName.value) // 输出：lisan

我们在这里定义了一个计算属性 fullName。computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref。和其他一般的 ref 类似，我们可以通过 fullName.value 访问计算结果。计算属性 ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加 .value。

我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

{{ fullName() }}

// 组件中
function fullName() {
  return firstName.value + lastName.value
}

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 firstName 和 lastName 不改变，无论多少次访问 fullName 都会立即返回先前的计算结果，而不用重复执行 getter 函数，这可以节省很多不必要的计算。

可写的计算属性

计算属性默认是只读的。当尝试修改一个计算属性时，我们会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，我们可以通过同时提供 getter 和 setter 来创建：

现在当我们再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。

侦听器

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态，这时候就需要用到侦听器。Vue3 提供了两种侦听器 API： watch 和 watchEffect。

watch()

watch 用于监听一个或多个响应式数据源，在每次响应式数据源发生变化时触发回调函数。

watch 的第一个参数可以是不同形式的“数据源”，它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

但是我们不能直接侦听响应式对象的属性值：

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`Count is: ${count}`)
})

// 这里需要用一个返回该属性的 getter 函数：
watch(
  () => obj.count,
  (count) => {
    console.log(`Count is: ${count}`)
  }
)

watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调，这时我们可以通过传入 immediate: true 选项来强制侦听器的回调立即执行：

watch(
  source,
  (newValue, oldValue) => {
    // 立即执行，且当 `source` 改变时再次执行
  },
  { immediate: true }
)

每当被侦听源发生变化时，侦听器的回调就会执行。如果希望回调只在源变化时触发一次，我们可以使用 once: true 选项：

watch(
  source,
  (newValue, oldValue) => {
    // 当 `source` 变化时，仅触发一次
  },
  { once: true }
)

watchEffect()

watchEffect() 允许我们自动跟踪回调的响应式依赖，在依赖变化时会重新执行。

import { ref, watchEffect } from 'vue'

const count = ref(0)
const message = ref('Hello')

watchEffect(() => {
  console.log(`Count: ${count.value}, Message: ${message.value}`)
})
// 立即输出：Count: 0, Message: Hello

// 修改依赖会触发 watchEffect 回调
count.value++
// 输出：Count: 1, Message: Hello

message.value = 'World'
// 输出：Count: 1, Message: World

这个例子中，回调会立即执行，不需要指定 immediate: true。在执行期间，它会自动追踪 count.value 和 message.value 作为依赖（和计算属性类似）。每当这两个值变化时，回调会再次执行。有了 watchEffect()，我们不再需要明确传递 count.value 和 message.value 作为源值。

停止侦听器

在 setup() 或

要手动停止一个侦听器，我们可以调用 watch 或 watchEffect 返回的函数：

const unwatch = watchEffect(() => {})

// ...当该侦听器不再需要时
unwatch()

生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。下面是一些常用的生命周期钩子。

onMounted()

注册一个回调函数，在组件挂载完成后执行，即在组件完成初始渲染并创建 DOM 节点后运行代码。

当调用 onMounted 时，Vue 会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在组件初始化时被同步注册。下面是错误做法：

setTimeout(() => {
  onMounted(() => {
    // 异步注册时当前组件实例已丢失
    // 这将不会正常工作
  })
}, 100)

onUpdated()

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。父组件的更新钩子将在其子组件的更新钩子之后调用。

这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行（考虑到性能因素）。这个钩子在服务器端渲染期间不会被调用。我们不应该在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环。

onUnmounted()

注册一个回调函数，在组件实例被卸载之后调用。可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。这个钩子在服务器端渲染期间不会被调用。

其他常用钩子

onBeforeMount()

注册一个钩子，在组件被挂载之前被调用。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。这个钩子在服务器端渲染期间不会被调用。

onBeforeUpdate()

注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。这个钩子在服务器端渲染期间不会被调用。

onBeforeUnmount()

注册一个钩子，在组件实例被卸载之前调用。当这个钩子被调用时，组件实例依然还保有全部的功能。这个钩子在服务器端渲染期间不会被调用。

组件

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成一个层层嵌套的树状结构。

将一个大型应用拆分成多个组件，既可以提高组件的复用性，也可以分离逻辑，让各组件专注于其对应的功能，这样能大大提高开发效率和代码的可维护性。

注册及使用组件

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

全局注册

全局注册的组件可以在此应用的任意组件的模板中使用，所有的子组件也可以使用全局注册的组件，这意味着这全局注册的组件也都可以在彼此内部使用。

我们可以使用 Vue 应用实例的 .component() 方法，让组件在当前 Vue 应用中全局可用。

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

如果使用单文件组件，我们可以注册被导入的 .vue 文件：

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

.component() 方法可以被链式调用：

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

局部注册

全局注册虽然很方便，但有以下几个问题：

全局注册，但并没有被使用的组件无法在生产打包时被自动移除（即“tree-shaking”）。如果全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

在使用

如果没有使用

defineProps 是一个仅

带 : 的是动态绑定，它可以传入一个动态改变的值，静态绑定只能传入字符串。

Props 校验

Vue 组件可以更细致地声明对传入的 props 的校验要求。比如我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。

要声明对 props 的校验，可以向 defineProps() 宏提供一个带有 props 校验选项的对象，例如：

defineProps({
  // 基础类型检查
  // (给出 `null` 和 `undefined` 值则会跳过任何类型检查)
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // 必传但可为 null 的字符串
  propD: {
    type: [String, null],
    required: true
  },
  // Number 类型的默认值
  propE: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propF: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  // 在 3.4+ 中完整的 props 作为第二个参数传入
  propG: {
    validator(value, props) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propH: {
    type: Function,
    // 不像对象或数组的默认，这不是一个
    // 工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})

事件

子组件可以通过触发事件的方式向父组件传递信息。在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

父组件可以通过 v-on（缩写为 @）来监听事件：

有时候我们会需要在触发事件时附带一个特定的值，这时我们可以给 $emit 提供一个额外的参数：

然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：

或者，也可以用一个组件方法来作为事件处理函数：

该方法也会接收到事件所传递的参数：

function increaseCount(n) {
  count.value += n
}

组件可以显式地通过 defineEmits() 宏来声明它要触发的事件：

我们在

Duanhen's Blog

Vue 学习笔记（二）

计算属性

基础用法

可写的计算属性

侦听器

watch()

watchEffect()

停止侦听器

生命周期钩子

onMounted()

onUpdated()

onUnmounted()

其他常用钩子

onBeforeMount()

onBeforeUpdate()

onBeforeUnmount()

组件

注册及使用组件

全局注册

局部注册

{{ title }}

{{ title }}

Props 校验

事件

异步组件

Vue 学习笔记（一）

前言

Vue 是什么

介绍

单文件页面

组合式 API

setup 函数

script setup 语法糖

创建 Vue 应用

响应式基础

ref()

reactive()

两者对比

常用指令

v-text 与 v-html

v-show 与 v-if

v-for

v-on

v-bind

v-model