Vue3 相较于 Vue2 新增了很多方法,以下列举几个常用的方法及用法:
- ref:用于创建响应式的数据对象,可以在模板和逻辑中使用:
import { ref, reactive } from 'vue'
// 创建响应式数据
const count = ref(0)
// 使用响应式数据
console.log(count.value) // 输出 0
const obj = reactive({ name: 'vue3' })
obj.name = 'vue3.x'
console.log(obj.name) // 输出 vue3.x
- computed:用于创建计算属性,可以是一个函数或者一个包含
get
和set
函数的对象:
import { ref, computed } from 'vue'
const count = ref(0)
// 创建计算属性,依赖 count 值,返回 count 的平方
const countSquare = computed(() => count.value * count.value)
console.log(countSquare.value) // 输出 0
count.value = 2
console.log(countSquare.value) // 输出 4
- watchEffect:用于监听响应式数据变化并执行回调函数,自动收集依赖:
import { ref, watchEffect } from 'vue'
const count = ref(0)
// 监听 count 值变化,并在每次变化时执行回调函数
watchEffect(() => {
console.log(count.value)
})
count.value = 1 // 输出 1
count.value = 2 // 输出 2
- watch:用于监听指定的响应式数据变化并执行回调函数:
import { ref, watch } from 'vue'
const count = ref(0)
// 监听 count 值变化,并在每次变化时执行回调函数
watch(count, (newValue, oldValue) => {
console.log(`count 值从 ${oldValue} 变成了 ${newValue}`)
})
count.value = 1 // 输出 count 值从 0 变成了 1
count.value = 2 // 输出 count 值从 1 变成了 2
- provide / inject:用于实现组件之间的依赖注入,类似于 React 中的 Context:
import { provide, inject } from 'vue'
// 在父组件中提供数据
const provideData = {
name: 'vue3'
}
provide('data', provideData)
// 在子组件中使用提供的数据
const childData = inject('data')
console.log(childData.name) // 输出 vue3