vue3的ref和reactive以及toRef和toRefs的区别。

一、ref能定义任何类型的响应式数据,

1、但是使用的时候需要通过.value的形式去修改。

2、参数可以传入任意数据类型。

3、vue 3.0 setup里定义数据时推荐优先使用ref,方便逻辑拆分和业务解耦。

import { reactive } from 'vue'

// 响应式状态
const state = reactive({
  count: 0
})

// 打印count的值
console.log(state.count)

二、reactive定义的是对象类型的响应式数据。

1、直接添加了响应式可以直接使用,不用.value

2、参数只能传入对象类型.

3、不能通过 ...state 方式结构,这样会丢失响应式。

import { ref } from 'vue'
// 为基本数据类型添加响应式状态
const name = ref('Neo')
// 为复杂数据类型添加响应式状态
const state = ref({
  count: 0
})
// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)
注意reactive封装的响应式对象,不要通过解构的方式return,这是不具有响应式的。可以通过 toRefs 处理,然后再解构返回,这样才具有响应式

三、toRef

针对一个响应式对象(reactive 封装)的 prop(属性)创建一个ref,且保持响应式
两者 保持引用关系

1、接收两个参数:源响应式对象和属性名,返回一个ref数据。

例如使用父组件传递的props数据时,要引用props的某个属性且要保持响应式连接时就很有用。

2、获取数据值的时候需要加.value

toRef后的ref数据如果是复杂类型数据时,不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据。

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

四、toRefs

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法
将响应式对象(reactive封装)转成普通对象
对象的每个属性(Prop)都是对应的ref
两者保持引用关系
用于将响应式对象转换为结果对象,其中结果对象的每个属性都是指向原始对象相应属性的ref。

1、常用于es6的解构赋值操作,因为在对一个响应式对象直接解构时解构后的数据将不再有响应式,而使用toRefs可以方便解决这一问题。

2、获取数据值的时候需要加.value

toRefs后的ref数据如果是复杂类型数据时,不是原始数据的拷贝,而是引用,改变结果数据的值也会同时改变原始数据
作用其实和 toRef 类似,只不过 toRef 是对一个个属性手动赋值,而 toRefs 是自动解构赋值。

import { defineComponent, toRefs } from 'vue'
export default defineComponent({
  props: [title],
  setup (props) {
    // 使用了解构赋值语法创建了变量myTitle
    const { myTitle } = toRefs(props)
    console.log(myTitle.value)
  }
})
在vue3中,可以直接使用ref和toRefs来定义数据。

你可能感兴趣的:(vue3的ref和reactive以及toRef和toRefs的区别。)