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

目录

  • 一、ref——定义任意类型响应式数据
    • 1、对于在 setup 中手动返回的响应式数据,在 template 中使用时无需加 `.value`
    • 2、ref 能定义“任何类型”的响应式数据
  • 二、reactive——定义响应式 “对象”
  • 三、toRef——将一个 reactive 转化为一个 ref
  • 四、toRefs——将多个 reactive 自动解构为多个 ref


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

  • ref 能定义“任何类型”的响应式数据(ref 在 vue3 中指响应式数据)。
  • 参数可以传入任意数据类型。
  • 使用 ref 定义的属性必须通过 .value 的形式才能修改其值。属性的值一旦被修改就会触发模板的重新渲染以显示最新的值。
  • 对于在 setup 返回的 refs(return 出的对象里的属性),因为在模板中访问它们时,它们会被自动浅解包,所以在 template 中使用时无需加 .value

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 写在

你可能感兴趣的:(#,Vue.js,vue.js)