数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、toRef()

toRef() 函数基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

toRef() 函数一次仅能设置一个数据，接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性。

 const state = reactive({  title: '标题',  name: 'wff'  })   const name = toRef(state, 'name')   console.log(state.name)  console.log(name.value) " _ue_custom_node_="true">   name:{ {name}}

二、toRefs()

toRefs() 函数将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。

 const state = reactive({  title: '标题',  name: 'wff'  })   const { title } = toRefs(state)   console.log(state.title)  console.log(title.value) " _ue_custom_node_="true">   title:{ {title}}

注：我们使用 reactive创建的对象，如果想在模板中使用，就必须得使用 xxx.xxx的形式；如果大量用到的话还是很麻烦的，但是使用 es6解构以后，会失去响应式。那么toRefs的作用就体现在这，利用toRefs可以将一个响应式 reactive 对象的所有原始属性转换为响应式的ref属性。

三、toRaw()

toRaw() 函数可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象（将响应式对象转化为普通对象）。

这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。

const foo = {} const reactiveFoo = reactive(foo)  console.log(toRaw(reactiveFoo) === foo) // true

四、ref、toRef、toRefs 异同点

ref、toRef、toRefs 函数都可以将某个对象中的属性变成响应式数据

ref 函数的本质是拷贝，修改响应式数据，不会影响到原始数据（引用数据类型会有影响），视图会更新

toRef、toRefs 函数和传入的数据形成引用关系，修改 toRef 会影响这些数据，但是不会更新视图

作用：把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref

toRef 函数一次仅能设置一个数据，接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

toRefs 函数接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用 toRef 执行。用于批量设置多个数据为响应式

ref 数据会引起监听行为，而 toRef 不会