vue3中新增的组合式API：ref、reactive、toRefs、computed、watch、provide/inject、$ref
在 Vue3 中，组合式 API 是一种新的编程模式，它允许你更灵活地组织和重用代码。组合式 API 主要包括以下几个部分：
- ref：用于创建响应式数据。
- reactive：用于创建一个响应式对象。
- toRefs：将一个响应式对象转换为普通对象。
- computed：用于创建计算属性。
- watch：用于监听数据变化。
- 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>