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

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

相对于Vue2来说，Vue3最大的突破就是 Composition API 。与现有的 Option API 截然不同。他的好处可以总结为两点

• 更集中的逻辑关注点
• 更方便的函数逻辑复用机制

1、ref、reactive 可触发页面改变

区别

ref可用于任何类型的数据创建响应式，

reactive只用于创建引用类型数据的响应式。

注意
ref对引用类型变量创建响应式，其根本是当你给ref传入引用类型，则调用reactive方法为其创建响应式。

1.1、reactive

reactive 用于为对象添加响应式数据。接收一个js对象作为参数，返回一个具有响应式状态的副本。

在对象属性发生变化时，模版是可以 响应更新渲染的

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

<template>
  <div>count: {{state.count}}</div>
</template>

<script>
import { reactive } from '@vue/composition-api'

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

    setTimeout(() => {
      state.count++
      // 打印count的值
	  console.log(state.count)
    }, 1000)

    return { state }
  }
}
// 一秒后页面数字从0变成1
</script>

1.2、ref

ref 用于为数据添加响应式状态。

由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用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、toRef、toRefs 不可触发页面改变

ref 和 reactive 可以改变页面。接下来这两个则不能去改变页面，但是数据还是会遵循响应式。

区别、特点：

toRef 用于创建对象指定的属性响应式，换句话说就是只能控制一个对象中的一个属性。
toRefs 用于创建对象响应式。
他们对响应式的处理你可以理解为： toRef 类似 ref， toRefs 类似 reactive

2.1、toRef

toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。

toRef 接受两个参数：

1. 需要给属性创建响应式的对象
2. 需要创建响应式的属性名

返回一个ref数据。

toRef是能改变原始数据的。从页面上也能看出，并不能触发页面改变。

// template
<div class="item">
    <input type="text" v-model="toRefVal" @input="inputToRefHander" />
    {{ toRefVal }}
</div>

// js
const obj = { type: 'obj', target: '5' }
const toRefVal = toRef(obj, 'target');
const inputToRefHander = () => {
  	console.log("toRef:::", toRefVal, "原始数据:::", obj);
}

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

• 获取数据值的时候需要加.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)
  }
})

2.2、toRefs

toRefs 用于将响应式对象转换为普通对象，其中结果对象的每个property属性都是指向原始对象相应属性的ref。和响应式对象 property 一一对应。

常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题，可以从一个组合逻辑函数中返回响应式对象。该 API 让消费组件可以 解构 / 扩展（使用 … 操作符）返回的对象，并不会丢失响应性

• 获取数据值的时候需要加.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)
  }
})

实例

// template
<div>
    <input type="text" v-model="target" @input="inputToRefsHander" />
    {{ target }}
</div>

// js
const obj = { type: 'obj', target: '5' }
const { target } = toRefs(obj);
const inputToRefsHander = () => {
    console.log("toRefs:::", target, "原始数据:::", obj);
}

从打印结果中可以看出，原始数据被改变，页面没有被触发。但toRefs 返回的对象，随便解、随便构。丝毫不会影响值的响应性。

小结

尽量不要混着用，reactive和ref选一种，toRef和toRefs选一种，不然代码会很乱

3、setup基础知识

• ref、reactive、toRef、toRefs 这些方法 均需从 vue 中导入到组件。
• ref、reactive、toRef、toRefs 创建的变量在 setup 中都需要 return { ... } 抛出才可在页面使用，除非你是为props创建响应式。

toRef和toRefs选一种，不然代码会很乱

3、setup基础知识

• ref、reactive、toRef、toRefs 这些方法 均需从 vue 中导入到组件。
• ref、reactive、toRef、toRefs 创建的变量在 setup 中都需要 return { ... } 抛出才可在页面使用，除非你是为props创建响应式。