首页 > 其他分享 >Vue3之reactive和ref对比

Vue3之reactive和ref对比

时间:2022-12-27 10:45:51浏览次数:32  
标签:定义 数据 value reactive Vue3 ref 对比

reactive对比ref

  • 从定义数据角度对比:
    • ref用来定义:基本类型数据
    • reactive用来定义:对象(或数组)类型数据
    • 备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象
  • 从原理角度对比:
    • ref通过Object.defineProperty()getset来实现响应式(数据劫持)。
    • reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。
  • 从使用角度对比:
    • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value
    • reactive定义的数据:操作数据与读取数据:均不需要.value

标签:定义,数据,value,reactive,Vue3,ref,对比
From: https://www.cnblogs.com/anjingdian/p/17007550.html

相关文章

  • Vue之reactive函数
    reactive函数作用:定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数,ref函数可以用基本类型也可以对象类型)语法:const代理对象=reactive(源对象)接收一个对......
  • Vue3之ref
    ref函数作用:定义一个响应式的数据语法: constxxx=ref(initValue)创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。JS中操作数据: xxx.value模板......
  • Vue3之setup
    setupsetup是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据、方法等等,都要配置在setup中。setup函数的返回值有两种1、返回一个渲染函数,可以自定义渲染内容......
  • Vue3之创建工程
     创建Vue3工程 VueCli脚手架创建工程 类似于之前创建的vue2工程,我们在需要创建工程的文件下打开cmd,执行创建的工程命令:成功: 分别执行蓝色的命令来启动,根据生成......
  • vue3_01生命周期函数
    <template><div><p>这是第一个组件</p></div></template><scriptlang="ts">import{defineComponent,onBeforeMount,onMounted}fr......
  • Vue之ref
    ref属性1.被用来给元素或子组件注册引用信息(id的替代者)2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)3.使用方式:  1.打标识:```<h1......
  • C#基础⑧——方法(函数、重载、out、ref)
    目录​​一、什么是方法(函数)?​​​​二、使用方法有什么好处呢?​​​​三、语法:​​​​四、实战演练​​     ​​五、ref和out传参的区别​​​​①、out的传参:​......
  • [CTF] 攻防世界-xff_referer
    X-Forwarded-For:,,https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Forwarded-For大致理解:就是你有代理服务器,它只能看到你最后代理的那个IP,但是用这......
  • 兼容IE6和Firefox的PNG背景透明CSS…
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""​​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd​​​"><htmlxmlns="​​​http://ww......
  • Reflector 源码分析
    Reflector源码分析前面我们说了Informer通过对APIServer的资源对象执行List和Watch操作,把获取到的数据存储在本地的缓存中,其中实现这个的核心功能就是Reflecto......