vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 ref toRef toRefs reactive

浅谈vue3中ref、toRef、toRefs 和 reactive的区别

作者:weixin79893765432...

本文主要介绍了浅谈vue3中ref、toRef、toRefs 和 reactive的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、ref——定义任意类型响应式数据

1、对于在 setup 中手动返回的响应式数据,在 template 中使用时无需加 .value

例如:

<template>
  <div>{{ count }}</div>
</template>
<script>
  import { ref } from 'vue'

  export default {
    setup(props) {
      const count = ref(0)
      // 暴露给 template 的属性,可以直接在 template 中使用
      return {
        count
      }
    }
  }
</script>

2、ref 能定义“任何类型”的响应式数据

如果将 setup 写在 <script> 标签里,则该标签里的脚本都是执行在 setup 里的,并且里面声明数据均会默认地暴露给 template,在 template 中使用时无需加 .value。

例如:

<template>
  <div>{{ name }} : {{ state.age }}</div>
</template>
<script setup>
  import { ref } from 'vue'

  // 为基本数据类型添加响应式状态
  const name = ref('Marry')
  // 为复杂数据类型添加响应式状态
  const state = ref({
    age: 18
  })
  // 打印name的值
  console.log(name.value)
  // 打印count的值
  console.log(state.value.age)
</script>

二、reactive——定义响应式对象

例如:

<template>
  <div>{{ obj.count }}</div>
</template>
<script setup>
  import { reactive } from 'vue'
  
  const obj = reactive({
    count: 0
  })
  // 使用 reactive 定义的属性可以直接使用,不需要加 .value
  console.log(state.count)
</script>

三、toRef——将一个 reactive 转化为一个 ref

例如:在 setup 中使用父组件传递的 props 数据时,要引用 props 的某个属性,且要保持响应式连接,就必须使用 toRef。

<template>
  <div>{{ myTitle }}</div>
</template>
<script>
  import { defineComponent, toRef } from 'vue'

  export default defineComponent({
    props: [title],
    setup (props) {
      // 创建变量myTitle
      const myTitle = toRef(props, 'title')
      console.log(myTitle.value)
      return {
        myTitle
      }
    }
  })
</script>

四、toRefs——将多个 reactive 自动解构为多个 ref

<template>
  <div>{{ myTitle }}</div>
</template>
<script>
  import { defineComponent, toRefs } from 'vue'

  export default defineComponent({
    props: [title],
    setup (props) {
      // toRefs 默认使用了解构赋值,创建了变量 myTitle
      const { myTitle } = toRefs(props)
      console.log(myTitle.value)
      return {
        myTitle
      }
    }
  })
</script>

到此这篇关于浅谈vue3中ref、toRef、toRefs 和 reactive的区别的文章就介绍到这了,更多相关vue3 ref toRef toRefs reactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文