首页 > 其他分享 >unref、isref、toRef、toRefs

unref、isref、toRef、toRefs

时间:2023-01-29 17:55:34浏览次数:40  
标签:val toRefs state value toRef unref isref foo

unref() 如果参数是一个ref则返回它的value,否则返回参数本身
unref(val) 相当于val=isRef(val)?val.value:val

  function initialCount(value: number | Ref<number>) {
    // Make the output be true
    console.log(value === 10)
  }

  const initial = ref(10)

  initialCount(unref(initial))  // 必然输出true

isref() 检查一个值是否是一个ref对象
toRef、toRefs的本质是引用,修改响应式数据,会影响到原始数据,视图不会更新

toRef 一次仅能设置一个数据,接收两个参数,第一个参数是哪个对象,第二个参数是对象的哪个属性
toRefs接收一个对象作为参数,它会遍历对象身上的所有属性,然后挨个调用toRef执行

const state = reactive({
  foo: 1,
  bar: 2,
})
// const fooRef = toRef(state,'foo')
const fooRef = toRefs(state).foo

 

fooRef.value++
console.log(state.foo === 2)


state.foo++
console.log(fooRef.value === 3)

 

标签:val,toRefs,state,value,toRef,unref,isref,foo
From: https://www.cnblogs.com/hwy6/p/17073400.html

相关文章

  • toRef、toRefs、toRaw解析
    1、toRef 2、toRefs   3、toRaw当你的对象不需要它去做响应式的操作,可以对其进行使用,让它脱离原本的proxy层变成普通的对象(没有响应式)......
  • 搞懂vue3的ref、reactive、toRef、toRefs
    首先需要明确这四个函数都是用于在setup中创造响应式变量的。四个函数都需要从vue中导出:import{ref,reactive,toRef,toRefs}from'vue'总结:reactive对比ref从......
  • vue-ref,reactive,toRefs,toRef总结
    总结:ref,reactive,toRefs,toRef方法响应式引用的原理:通过proxy对数据进行封装,当数据变化时,触发模版等内容的更新。一、ref:作用:接受一个内部值并返回响应式且可变的ref对象......
  • ref、toRef、toRefs
     ref、toRef、toRefs都可以将某个对象中的属性变成响应式数据ref的本质是拷贝,修改响应式数据,不会影响到原始数据,视图会更新toRef、toRefs的本质是引用,修改响应式数据,会影......
  • vue3 toRef toRefs toRaw使用
    //只能修改响应式对象的值constperson=reactive({name:"zhangsan",age:18});//将age属性单独提出来响应式数据constageCopy=toRef(person,"age");cons......
  • vue3-组合式api-定义响应式数据-reactive,toRefs
    <template> <div>  {{obj.name}}  {{name}}  <button@click="changeObjName">改变名字</button> </div></template><script>import{react......
  • 【Vue3】ref, reactive, shallowRef, shallowReactive, toRaw, markRaw, readonly, sh
    ref的实现ref实现响应式(基本类型)也是采用Object.definedProperty()来实现的getter和setterref实现响应式(对象类型)也是采用Proxy来实现(底层调用reactive方法)reac......
  • ref、reactive、toRef、toRefs使用与区别
    reactive传参:reactive(arg),arg只能是对象arg为普通对象返回响应式对象,不管层级多深,都能响应使用:获取数据值的时候直接获取,不需要加.value特点:解构、扩展运算......
  • 高级vue 组合api setup toRefs 用法
    <script>import{ref,reactive,toRefs}from'vue'exportdefault{  setup(){   letdata=reactive({    mes:0,    userObj:{   ......
  • vue3 的 ref、isRef、toRef、toRefs、toRaw 详细介绍
    ref、isRef、toRef、toRefs、toRaw看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别。1、refref属性除了能够获取元素外,也可以使用ref函数,创建......