Vue3使用Composition API实现响应式

title: Vue3使用Composition API实现响应式
date: 2024/5/29 下午8:10:24
updated: 2024/5/29 下午8:10:24
categories:

• 前端开发
  

tags:

• Vue3
  
• Composition
  
• Refs
  
• Reactive
  
• Watch
  
• Lifecycle
  
• Debugging
  

1. 介绍


Composition API是Vue.js 3中新增的一组API，用于在组件中组合逻辑和功能。它可以让你更好地组织和重用代码，使组件更易于理解和维护。在使用Composition
API时，你可以使用[/code]2.2 reactive

reactive函数用于创建一个响应式的对象，其所有属性都是响应式的。当对象的属性发生变化时，Vue.js会自动更新视图。

1. <template>
2.   
3.     <p>name: {{ user.name }}</p>
4.     <p>age: {{ user.age }}</p>
5.     <button @click="incrementAge">+1</button>
6.   
7. </template>

复制代码

2.3 readonly

readonly函数用于创建一个只读的响应式对象，其所有属性都是只读的。当试图修改只读对象的属性时，会抛出一个错误。

1. <template>
2.   
3.     <p>name: {{ user.name }}</p>
4.     <p>age: {{ user.age }}</p>
5.   
6. </template>

复制代码

2.4 shallowReactive

shallowReactive函数用于创建一个浅响应式的对象，其所有属性都是响应式的，但其子对象的属性不是响应式的。
AD：专业搜索引擎

1. <template>
2.   
3.     <p>name: {{ user.name }}</p>
4.     <p>age: {{ user.age }}</p>
5.   
6. </template>  address: {{ user.address }}
7.     +1    改变地址  

复制代码

2.5 shallowReadonly

shallowReadonly函数用于创建一个浅只读的响应式对象，其所有属性都是只读的，但其子对象的属性不是只读的。

1. <template>
2.   
3.     <p>name: {{ user.name }}</p>
4.     <p>age: {{ user.age }}</p>
5.   
6. </template>  address: {{ user.address }}
7. <template>
8.   
9.     <ChildComponent />
10.   
11. </template>改变地址  

复制代码

3. 响应式API

Composition API提供了几种响应式API，包括watchEffect、watch、computed和provide/inject。
3.1 watchEffect

watchEffect函数用于创建一个响应式的副作用函数，当响应式数据发生变化时，副作用函数会自动重新执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

3.2 watch

watch函数用于创建一个响应式的监听器，当响应式数据发生变化时，监听器会自动执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

3.3 computed

computed函数用于创建一个响应式的计算属性，其值是根据响应式数据计算得出的。当响应式数据发生变化时，计算属性会自动重新计算。
AD：漫画首页

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <p>doubleCount: {{ doubleCount }}</p>
5.     <button @click="increment">+1</button>
6.   
7. </template>

复制代码

3.4 provide/inject

provide和inject函数用于在组件树中传递数据。provide函数用于在父组件中提供数据，inject函数用于在子组件中注入数据。

1. <template>
2.   
3.     <ChildComponent />
4.   
5. </template>

复制代码

1. <template>
2.   
3.     <p>{{ message }}</p>
4.   
5. </template>

复制代码

4. 生命周期钩子

Composition
API提供了几种生命周期钩子，包括setup()、onBeforeMount()、onMounted()、onBeforeUpdate()、onUpdated()、onBeforeUnmount()、onUnmounted()、onErrorCaptured()、onRenderTracked()
和onRenderTriggered()。
4.1 setup()

setup()函数是Composition API的入口点，用于在组件创建之前执行一些初始化操作。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

4.2 onBeforeMount()

onBeforeMount()函数在组件挂载之前执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

4.3 onMounted()

onMounted()函数在组件挂载之后执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

4.4 onBeforeUpdate()

onBeforeUpdate()函数在组件更新之前执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

4.5 onUpdated()

onUpdated()函数在组件更新之后执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

4.6 onBeforeUnmount()

onBeforeUnmount()函数在组件卸载之前执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

4.7 onUnmounted()

onUnmounted()函数在组件卸载之后执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

4.8 onErrorCaptured()

onErrorCaptured()函数在组件捕获到错误时执行。

1. <template>
2.   
3.     <p>count: {{ count }}</p>
4.     <button @click="increment">+1</button>
5.   
6. </template>

复制代码

4.9 onRenderTracked 和 onRenderTriggered

onRenderTracked和onRenderTriggered是两个生命周期钩子，它们与Vue的响应式系统和编译器有关。这两个钩子是在Vue
3.x版本中引入的，主要用于调试目的，帮助开发者了解组件渲染过程中的跟踪和触发情况。

• onRenderTracked钩子：
  
  
  
  • 当组件的响应式依赖项被追踪时，即响应式系统开始跟踪一个依赖项时，这个钩子会被调用。
    
  • 它主要用于调试，可以帮助开发者了解何时响应式系统开始关注某个依赖项。
    
  • onRenderTracked钩子接收两个参数：dep和context。dep是依赖项对象，context是当前组件的上下文对象。
    
  
  
• onRenderTriggered钩子：
  
  
  
  • 当组件的响应式依赖项被触发时，即响应式系统因为某个依赖项的变化而触发了重新渲染时，这个钩子会被调用。
    
  • 它主要用于调试，可以帮助开发者了解何时响应式系统因为某个依赖项的变化而重新渲染组件。
    
  • onRenderTriggered钩子也接收两个参数：dep和context，含义与onRenderTracked相同。
    
  
  

示例代码：

1. export default {    setup() {<template>
2.   
3.     <ChildComponent />
4.   
5. </template>// 定义一个响应式数据<template>
6.   
7.     <ChildComponent />
8.   
9. </template>const count = ref(0);<template>
10.   
11.     <ChildComponent />
12.   
13. </template>// 监听 count 的变化<template>
14.   
15.     <ChildComponent />
16.   
17. </template>watch(count, (newValue, oldValue) => {<template>
18.   
19.     <ChildComponent />
20.   
21. </template>    console.log(`count changed from ${oldValue} to ${newValue}`);<template>
22.   
23.     <ChildComponent />
24.   
25. </template>});<template>
26.   
27.     <ChildComponent />
28.   
29. </template>// 使用 onRenderTracked 和 onRenderTriggered 进行调试<template>
30.   
31.     <ChildComponent />
32.   
33. </template>onRenderTracked((dep, context) => {<template>
34.   
35.     <ChildComponent />
36.   
37. </template>    console.log(`onRenderTracked: ${dep}`);<template>
38.   
39.     <ChildComponent />
40.   
41. </template>});<template>
42.   
43.     <ChildComponent />
44.   
45. </template>onRenderTriggered((dep, context) => {<template>
46.   
47.     <ChildComponent />
48.   
49. </template>    console.log(`onRenderTriggered: ${dep}`);<template>
50.   
51.     <ChildComponent />
52.   
53. </template>});<template>
54.   
55.     <ChildComponent />
56.   
57. </template>return {<template>
58.   
59.     <ChildComponent />
60.   
61. </template>    count<template>
62.   
63.     <ChildComponent />
64.   
65. </template>};    }};

复制代码

在这个示例中，我们定义了一个响应式数据count，并使用了watch来监听它的变化。同时，我们使用了onRenderTracked
和onRenderTriggered来打印调试信息。当响应式系统开始跟踪或触发重新渲染时，我们会得到相应的提示。这些钩子可以帮助开发者更好地理解Vue组件的渲染过程和响应式系统的运作。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！