Vue3 反应性全套基础知识都单独附带实例

在Vue3中，反应性（Reactivity）是其核心特性之一，它使得数据和视图之间的同步变得非常简单。以下是Vue3反应性的全套基础知识以及相应的实例：

1. 响应式对象：在Vue3中，我们可以使用reactive函数来创建一个响应式对象。这个对象的所有属性都将被追踪，当这些属性发生变化时，相关的视图将会自动更新。

import { reactive } from 'vue'
const state = reactive({
  count: 0
})

2. 响应式数组：我们可以使用ref函数来创建一个响应式数组。这个数组的所有元素都将被追踪，当这些元素发生变化时，相关的视图将会自动更新。

import { ref } from 'vue'
const items = ref(['apple', 'banana'])

3. 计算属性：我们可以使用computed函数来创建一个计算属性。这个属性的值是基于其他响应式属性的计算结果。当这些依赖的属性发生变化时，计算属性的值将会自动更新。

import { computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value * 2)

4. 侦听器：我们可以使用watch函数来创建一个侦听器。这个侦听器可以监听一个或多个响应式属性的变化，当这些属性发生变化时，侦听器会执行指定的回调函数。

import { watch } from 'vue'
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})

以上就是Vue3反应性的全套基础知识以及相应的实例。希望对你有所帮助！