【JavaScript源代码】Vue3中ref与toRef的区别浅析.docx

Vue3中ref与toRef的区别浅析 　　如果利用ref将某一个对象中的某一个属性值变成响应式数据　　我们修改响应式数据是不会影响原始数据的;　　同时视图会跟新。　　ref就是复制 复制是不会影响原始数据的　　<template>　　 <div>　　    <div>　　      <div>{{stateObj}}</div>　　       <button @click="func1">按钮</button>　　    </div>　　 </div>　　</template>　　<script>　　import {ref} from 'vue'　　export default {　　   在Vue3中，`ref`和`toRef`都是用于创建响应式数据的工具，但它们之间存在着重要的差异。理解这些差异对于有效地管理Vue3应用的状态至关重要。 `ref`用于创建一个响应式的引用，它实际上是对一个值的封装。当你使用`ref`时，你创建了一个新的对象，这个对象的`value`属性持有原始值。当你修改`ref`的`value`属性时，虽然视图会更新以反映这个变化，但原始数据并未改变。例如，在提供的代码片段中，`stateObj`是一个通过`ref(obj.name)`创建的响应式引用，当调用`func1`并修改`stateObj.value`时，`stateObj`的值发生了变化，但原始对象`obj`的`name`属性仍然是"张三"。 相比之下，`toRef`则是在现有对象上创建一个对特定属性的引用。当你使用`toRef`时，你不是创建一个新的值，而是创建了一个指向原始对象某个属性的指针。因此，当你修改`toRef`的值时，实际上是直接修改了原始对象的属性，导致视图不会自动更新。在提供的另一段代码中，`state`是一个通过`toRef(obj, 'name')`创建的引用，当调用`func1`并改变`state.value`为"我是李四"时，`obj`的`name`属性也随之改变，但因为没有触发Vue的依赖追踪，视图不会自动更新，需要手动操作来触发更新。 `ref`和`toRef`的主要区别可以总结如下： 1. **数据更改的影响**：`ref`创建的响应式数据是独立于原始值的，修改它不会影响原始数据，而`toRef`创建的响应式数据直接关联原始数据，修改响应式数据会影响原始数据。 2. **视图更新**：`ref`的改变会自动触发视图更新，而`toRef`的改变不会，除非手动触发更新。 3. **参数传递**：`ref`接收一个值作为参数，而`toRef`需要两个参数，一个是包含目标属性的对象，另一个是目标属性的字符串键。 在实际开发中，选择`ref`还是`toRef`取决于你希望如何处理数据变化以及是否需要自动更新视图。如果你希望保持原始数据不变并让视图自动响应变化，`ref`是合适的选择。而如果你需要响应式数据与原始数据同步，并且可能不希望每次数据变化都立即更新视图，`toRef`就更有优势。