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>