常用 的 Vue3 新增方法及用法

Vue3 相较于 Vue2 新增了很多方法，以下列举几个常用的方法及用法：

1. 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

1. 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

1. watchEffect：用于监听响应式数据变化并执行回调函数，自动收集依赖：

import { ref, watchEffect } from 'vue'
 
const count = ref(0)
 
// 监听 count 值变化，并在每次变化时执行回调函数
watchEffect(() => {
  console.log(count.value)
})
 
count.value = 1 // 输出 1
count.value = 2 // 输出 2

1. 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

1. 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