ref、reactive、toRef、toRefs的区别

目录

1.ref

2.reactive

3.toRef 

4.toRefs

5.总结

---

在vue3.0里给数据添加响应式有很多api可用,下面给大家简单说一下:

1.ref

ref : 为数据添加响应式状态，返回一个具有响应式状态的副本。

• 获取数据值的时候需要加.value。（对于基本数据类型，ref是自己的实现方式且性能优于reactive，而对于对象类型，ref可以理解为是通过reactive包装实现的）
• 参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广。
• vue 3.0 setup里定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦。

import { ref } from 'vue'

// 为基本数据类型添加响应式状态
const name = ref('Neo')

// 为复杂数据类型添加响应式状态
const state = ref({
  count: 0
})

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

2.reactive

reactive：为对象数据添加响应式状态，同样返回一个具有响应式状态的副本

• 获取数据值的时候直接获取，不需要加.value
• 参数只能传入对象类型

import { reactive } from 'vue'

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

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

3.toRef 

toRef ：将某个对象中的属性变成响应式数据, 修改通过toRef创建的响应式数据，会触发UI界面的更新。所以，toRef的本质是引用，与原始数据有关联

import { defineComponent, toRef } from 'vue'

export default defineComponent({
  props: [title],
  
  setup (props) {
    // 创建变量myTitle
    const myTitle = toRef(props, 'title')

    console.log(myTitle.value)
  }
})

4.toRefs

toRefs： 和toRef的区别类似与reactive和ref,可以理解成批量包装 props 对象,用于将响应式对象转换为结果对象，它会遍历对象身上的所有属性，然后挨个调用toRef执行,其中结果对象的每个属性都是指向原始对象相应属性的ref:我们在使用reactive 的时候，在template模板里需要用对象店方法的形式绑定数据：

import { defineComponent, toRefs } from 'vue'

export default defineComponent({
  props: [title],
  
  setup (props) {
    // 使用了解构赋值语法创建了变量myTitle
    const { myTitle } = toRefs(props)

    console.log(myTitle.value)
  }
})

5.总结

ref初值到底写啥？null, [], 1, {} ....
1. 如果知道是列表数组，要做v-for的，就写 ref([])
2. 如果知道是对象。就写 ref(null),再通过axios拿值: xx.value = res.result
      为啥不写 ref({})呢？
      不是不行，而是在实操时 {} 不好判断！
3. 如果是基本数据类型（bool,string,number...）,根据业务来写
  const isOpen = ref(false)
  const name = ref('')

注意:尽量不要混着用，reactive 和 ref 选一种，toRef 和 toRefs 选一种，不然代码会很乱                 在明确对象的内容的时候建议用reactive 比如登录页的表单 推荐使用ref和toRefs