vue3中新增的组合式API：ref、reactive、toRefs、computed、watch、provide/inject、$ref

本文主要是介绍vue3中新增的组合式API：ref、reactive、toRefs、computed、watch、provide/inject、$ref，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在 Vue3 中，组合式 API 是一种新的编程模式，它允许你更灵活地组织和重用代码。组合式 API 主要包括以下几个部分：

1. ref：用于创建响应式数据。
2. reactive：用于创建一个响应式对象。
3. toRefs：将一个响应式对象转换为普通对象。
4. computed：用于创建计算属性。
5. watch：用于监听数据变化。
6. provide/inject：用于跨组件通信。

ref

类似于vue2中的data(){return{}}

在 Vue3 中，ref 用于创建响应式数据。以下是一个简单的 Vue3 代码示例：

<template><div><h1>{{ count }}</h1><button @click="increment">增加</button></div>
</template><script setup>
import { ref } from 'vue';
//定义简单变量const count = ref(0);function increment() {count.value++;}
// 定义复杂变量
const arr = ref([0,1,2,1,3,4])
const obj = ref({
name:"Tom"
})
</script>

reactive

专门给object赋值的，reactive只能用于复杂变量，不能用于简单变量

在 Vue3 中，reactive 用于创建一个响应式对象。以下是一个简单的 Vue3 代码示例：

<template><div><input v-model="message" placeholder="请输入内容" /><p>{{ message }}</p></div>
</template><script setup>
import { reactive } from 'vue';const state = reactive({message: '',});</script>

在这个示例中，我们使用 reactive 创建了一个名为 state 的响应式对象，并将其返回。然后，在模板中使用 v-model 指令将输入框的值与 state.message 进行双向绑定。这样，当输入框的值发生变化时，state.message 也会相应地更新。

toRefs

在 Vue3 中，toRefs 用于将一个响应式对象转换为一个普通对象，其中每个属性都是一个 ref。以下是一个简单的 Vue3 代码示例：

<template><div><input v-model="message" placeholder="请输入内容" /><p>{{ message }}</p></div>
</template><script setup>
import { reactive, toRefs } from 'vue';const state = reactive({message: '',});const stateRefs = toRefs(state);</script>

在这个示例中，我们首先使用 reactive 创建了一个名为 state 的响应式对象。然后，我们使用 toRefs 将 state 转换为一个普通对象 stateRefs，其中每个属性都是一个 ref。最后，我们将 stateRefs 解构并返回，以便在模板中使用。

computed

在 Vue3 中，可以使用 computed 函数来创建多个计算属性。以下是一个简单的 Vue3 代码示例：

<template><div><input v-model="message" placeholder="请输入内容" /><p>{{ reversedMessage }}</p><p>{{ uppercaseMessage }}</p></div>
</template><script  setup>
import { ref, computed } from 'vue';const message = ref('Hello Vue3!');const reversedMessage = computed(() => {return message.value.split('').reverse().join('');});const uppercaseMessage = computed(() => {return message.value.toUpperCase();});</script>

在这个示例中，我们创建了两个计算属性：reversedMessage 和 uppercaseMessage。它们分别返回 message 的反转字符串和大写字符串。我们将这两个计算属性解构并返回，以便在模板中使用。

watch

在 Vue3 中，watch 用于监听数据的变化。以下是一个简单的 Vue3 代码示例，包括简单监听、深度监听和监听某一个 object 中的变量，以及同时监听多个简单变量和多个复杂变量：

<template><div><input v-model="message" placeholder="请输入内容" /><p>{{ reversedMessage }}</p><p>{{ uppercaseMessage }}</p><p>{{ person.name }}</p></div>
</template><script  setup>
import { ref, watch } from 'vue';const message = ref('Hello Vue3!');const person = ref({ name: 'John', age: 30 });// 简单监听watch(message, (newValue, oldValue) => {console.log('message changed:', newValue, oldValue);});// 深度监听watch(() => person.value, (newValue, oldValue) => {console.log('person changed:', newValue, oldValue);}, { deep: true });// 监听某一个 object 中的变量const personName = computed(() => person.value.name);watch(personName, (newValue, oldValue) => {console.log('person.name changed:', newValue, oldValue);});// 同时监听多个简单变量和多个复杂变量const numbers = ref([1, 2, 3]);const complexObjects = ref([{ a: 1 }, { b: 2 }]);watch([message, numbers, complexObjects], () => {console.log('message, numbers or complexObjects changed');});</script>

在这个示例中，我们创建了一个简单的 message 变量，并使用 watch 函数进行监听。我们还创建了一个 person 对象，并使用 watch 函数进行深度监听。接下来，我们创建了一个计算属性 personName，并使用 watch 函数监听它的变化。最后，我们创建了两个数组 numbers 和 complexObjects，并使用 watch 函数同时监听它们的变化。

父子组件的传值

vue3中 使用defineProps 和 defineEmits 进行父子组件的传值：

父传子

子组件：

<template><div>这是子组件：{{fatherName}}</div>
</template><script  setup>
const props= defineProps({
fatherName:String
})</script>

父组件：

<template><div>这是父组件：和vue一样的传递方式<child :fatherName='fatherName'></child></div>
</template><script  setup>
import child  from "子组件地址"
import {ref} from "vue"
const fatherName=ref("父组件变量")</script>

子传父

子组件：

<template><div>这是子组件：{{fatherName}}</div>
</template><script  setup>
const props= defineEmits(['setChildname'])
const sendtoFather=()=>{
emit('setChildname',"向父组件传值")
}
</script>

父组件：

<template><div>这是父组件：<child @setChildname='getChildname'></child></div>
</template><script  setup>
import child  from "子组件地址"
count getChildname=(data)=>{
data就是来自子组件传递的参数
}</script>

顶级向底级传参： provide/inject：用于跨组件通信。

vue2中是使用$evenbus这样的全局变量来传递变量，其中使用的就是$emit 和$on来传递数据，但是vue3中没有$on这个方法

传递值： provide

<template></template><script  setup>
import {provide} from "vue"
provide('setname',"这是传递的参数")
</script>

接收值：inject

<template><div>这是接收的值：{{getName}}</div>
</template><script  setup>
import {inject} from "vue"
const getName=inject('setname')
</script>

注意：provide/inject：用于跨组件通信只是用于顶级向底级传参，就是从上到下的传递

$ref

父组件通过$ref 调用子组件的方法，并传值

vue3中 子组件还可以使用defineExpose来暴露方法和变量来让父组件获取到子组件的数据
子组件：

<template><div>这是子组件：</div>
</template><script  setup>
import {ref} from "vue"const name= ref('子组件名字')const childFun = (data)=>{子组件的方法
}
defineExpose({
name,
chiildFun
})
</script>

父组件：

<template><div>这是父组件：<child ref='child'></child>
子组件的name:{{childObj}}</div>
</template><script  setup>
import child  from "子组件地址"
import {ref} from "vue"const child= ref(null)const dochiildFun=()=>{child.value.chiildFun({id:1,age:30})}
</script>

这篇关于vue3中新增的组合式API：ref、reactive、toRefs、computed、watch、provide/inject、$ref的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---