首页 > 其他分享 >Vue3.0文档学习心得--响应式工具

Vue3.0文档学习心得--响应式工具

时间:2022-12-12 16:12:07浏览次数:62  
标签:-- 学习心得 toRef state Vue3.0 props foo ref 属性

1.isRef:检查某个值是否为 ref。返回值是true或者false

let foo: unknown    //返回值是一个类型判定 (type predicate),这意味着 isRef 可以被用作类型守卫。
if (isRef(foo)) {    
  // foo 的类型被收窄为了 Ref<unknown>
  foo.value
}

 

2.isProxy:检查一个对象是否是由 reactive()readonly()shallowReactive() 或 shallowReadonly() 创建的代理。

reactive()readonly()shallowReactive() 或 shallowReadonly()的原理是在外层包裹proxy)

 

3.isReactive:检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

 

4.isReadonly():检查传入的值是否为只读对象。只读对象的属性可以更改,但他们不能通过传入的对象直接赋值。

通过 readonly() 和 shallowReadonly() 创建的代理都是只读的,因为他们是没有 set 函数的 computed() ref。

 

5.unref():如果参数是 ref,则返回内部值,否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语糖。

 

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

(1)使用示例:

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')  //针对的是属性,而对象

// 更改该 ref 会更新源属性 fooRef.value++ console.log(state.foo) // 2 // 更改源属性也会更新该 ref state.foo++ console.log(fooRef.value) // 3

(2)注意事项

  2.1 不等同于const fooRef = ref(state.foo),这个 ref() 接收到的是一个纯数值。

  2.2 与props配合使用时,禁止对 props 做出更改的限制依然有效。尝试将新的值传递给 ref 等效于尝试直接更改 props,这是不允许的。在这种场景下,你可能可以考虑使用带有 get 和 set 的 computed 替代。(可以通过toref取出

props,但不允许对其进行赋值等操作等)

import { toRefs, toRef } from 'vue'

export default {
  setup(props) {    //要具有响应式的解构props,需要使用toRef解构props
    // 将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}

  2.3即使源属性当前不存在,toRef() 也会返回一个可用的 ref。这让它在处理可选 props 的时候格外实用,相比之下 toRefs 就不会为可选 props 创建对应的 refs。

 

7.toRefs():将一个响应式对象转换为一个普通对象,这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

(1)使用示例:

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

(2)如同toRef中所说具有结构而不失去响应性,经常用在组合式函数中返回响应式对象。

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // ...基于状态的操作逻辑

  // 在返回时都转为 ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

(3)toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref,请改用 toRef

对应toRef中的2.3所说的点。

 

 

标签:--,学习心得,toRef,state,Vue3.0,props,foo,ref,属性
From: https://www.cnblogs.com/LylePark/p/16976342.html

相关文章

  • k8s init
    [preflight]PullingimagesrequiredforsettingupaKubernetescluster[preflight]Thismighttakeaminuteortwo,dependingonthespeedofyourinternetcon......
  • Spring-day02
    Spring_day02今日目标掌握IOC/DI配置管理第三方bean掌握IOC/DI的注解开发掌握IOC/DI注解管理第三方bean完成Spring与Mybatis及Junit的整合开发1,IOC/DI配置管理第......
  • 怎么彻底解决Windows如何不进行更新——问题解决
    文章目录​​一、情况描述​​​​二、问题解决​​​​2.1方法一​​​​2.2方法二​​一、情况描述感觉最近一直在更新啊,如果一直不更新,就会没有关机选项,而更新的话,电......
  • 苏嵌实训——day13
    文章目录​​零、概述​​​​一、文件IO​​​​1.1学习IO的前提​​​​1.2IO是什么​​​​1.3如何使用IO​​​​1.4IO的分类​​​​1.5文件IO的接口​​​​1.6......
  • 系统编程之文件IO(二)——文件系统及文件描述符
    文章目录​​一、文件编程​​​​二、文件IO​​​​2.1文件IO重要性​​​​2.2根目录​​​​2.3文件描述符​​一、文件编程文件io:一切皆文件!(VFS)虚拟文件系统节省成......
  • 蓝桥杯之单片机学习(一)——LED指示灯的基本控制
    文章目录​​一、前言​​​​课程内容结构​​​​二、训练任务​​​​三、训练重点​​​​四、74HC138​​​​五、74HC573​​​​六、代码展示​​一、前言课程内容结......
  • Kubernetes 和云原生
    1.云原生相关1.1.什么是云原生CloudNative最早是在2013年由Pivotal公司的MattStine提出的。2015年CNCF(CloudNativeComputingFoudation,云原生计算基金会)成立。......
  • 蓝桥杯之单片机学习(三)——共阳数码管的静态显示
    文章目录​​一、训练任务​​​​二、训练重点​​​​三、训练准备​​​​3.1原理图展示​​​​3.2数字对照表​​​​3.3数码管分路​​​​3.4一些解释​​​​四......
  • 我从写三百篇技术文章中学到的几件事 | 2022 年中总结
    时光不负,创作不停,本文正在参加​​2022年中总结征文大赛​​......
  • 嵌入式C++(三)
    文章目录​​一构造函数​​​​1.1构造函数的重载和调用​​​​1.2拷贝构造函数​​​​<1>概念​​​​<2>拷贝构造函数的调用时机​​​​1>用一个对象去初始化另......