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

发布时间:2023年12月27日

在 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 的响应式对象。然后,我们使用 toRefsstate 转换为一个普通对象 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>

在这个示例中,我们创建了两个计算属性:reversedMessageuppercaseMessage。它们分别返回 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 函数监听它的变化。最后,我们创建了两个数组 numberscomplexObjects,并使用 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>
文章来源:https://blog.csdn.net/TTianYe/article/details/135247621
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。