Vue3.0中Ref与Reactive的区别示例详析
Ref与Reactive
Ref
Ref 用来创建基础类型的响应式数据,模板默认调用value显示数据。方法中修改需要修改value的值才能修改
<!-- 模板语法> <template> <div>{{state}}</div> </template> //js 脚本 setup(){ let state = ref(10) state.value = 11 return {state} }
Reactive
Reactive 用来创建引用类型的响应式数据,
<!-- 模板语法> <template> <div>{{state.name}}</div> </template> //js 脚本 setup(){ let state = reactive({name:'aaa'}}) state.name = 'zhangsan' return {state} }
Ref与Reactive的区别
Ref的本质是通过Reactive创建的,Ref(10)=>Reactive({value:10});
Ref在模板调用可以直接省略value,在方法中改变变量的值需要修改value的值,才能修改成功。Reactive在模板必须写全不然显示整个数据。
Reactive的本质是将每一层的数都解析成proxy对象,Reactive 的响应式默认都是递归的,改变某一层的值都会递归的调用一遍,重新渲染dom。
shallowRef 与shallowReactive
Ref与Reactive创建的都是递归响应的,将每一层的json 数据解析成一个proxy对象,shallowRef 与shallowReactive创建的是非递归的响应对象,shallowReactive创建的数据第一层数据改变会重新渲染dom
var state = shallowReactive({ a:'a', gf:{ b:'b', f:{ c:'c', s:{d:'d'} } } }) state.a = '1' //改变第一层的数据会导致页面重新渲染 //state => Proxy {a:"a",gf:{...}} //如果不改变第一层 只改变其他的数据 页面不会重新渲染 例如 state.gf.b = 2
通过shallowRef创建的响应式对象,需要修改整个value才能重新渲染dom
var state = shallowRef({ a:'a', gf:{ b:'b', f:{ c:'c', s:{d:'d'} } } }) state.value.a = 1 /* 并不能重新渲染,shallowRef的原理也是通过shallowReactive({value:{}})创建的,要修改value才能重新渲染 */ state.value = { a:'1', gf:{ b:'2', f:{ c:'3', s:{d:'d'} } } }
如果使用了shallowRef想要只更新某一层的数据可以使用triggerRef
var state = shallowRef({ a:'a', gf:{ b:'b', f:{ c:'c', s:{d:'d'} } } }) state.value.gf.f.s.d = 4 triggerRef(state)
页面就会重新渲染
toRaw ---只修改数据不渲染页面
如果只想修改响应式的数据不想引起页面渲染可以使用toRaw这个方法
var obj = {name:'test'} var state = reactive(obj) var obj2 = toRaw(state) obj2.name = 'zs'//并不会引起页面的渲染 ---- //如果是用ref 创建的 就要获取value值 var obj = {name:'test'} var state = ref(obj) var obj2 = toRaw(state.value)
markRaw --- 不追踪数据
如果不想要数据被追踪,变成响应式数据可以调用这个方法,就无法 追踪修改数据重新渲染页面
var obj = {name:'test'} obj = markRaw(obj) var state = reactive(obj) state.name = 'zs'//无法修改数据 页面也不会修改
toRef --- 跟数据源关联 不修改UI
如果使用ref 创建的响应式变量,不会与源数据关联,如果想要与源数据关联但数据更改不更新UI,就要使用toRef创建
var obj = {name:'test'} var state = ref(obj.name) state.name = 'zs' //此时obj的name 属性值并不会改变,UI会自动更新 /// var obj = {name:'test'} var state = toRef(obj,'name') //只能设置一个属性值 state.name = 'zs'//此时obj里面的name属性值会发生改变,但是UI 不会更新
toRefs ---设置多个toRef属性值
如果想要设置多个toRef属性值,可以使用toRefs
var obj = {name:'test',age:16} var state = toRefs(obj) state.name.value = 'zs'//obj的name的属性值也会改变,但UI不会更新 state.age.value = 18//obj的age的属性值也会改变,但UI不会更新
customRef ---自定义一个ref
通过customRef这个方法可以自定义一个响应式的ref方法
function myRef(value){ /* customRef函数返回一个对象,对象里面有2个方法,get/set方法,创建的对象获取数据的时候能 访问到get方法,创建的对象修改值的时候会触发set 方法 customRef函数有2个参数,track/trigger,track参数是追踪的意思,get 的方法里面调用,可以随时追踪数据改变。trigger参数 是触发响应的意思,set 方法里面调用可以更新UI界面 */ return customRef((track,trigger)=>{ return { get(){ track()//追踪数据 return value }, set(newVal){ value = newVal trigger()//更新UI界面 } } }) } setup(){ var age = myRef(18) age.value = 20 }
ref 捆绑页面的标签
vue2.0 可以通过this.refs拿到dom元素,vue3取消了这一操作,没有了refs拿到dom 元素,vue3取消了这一操作,没有了refs拿到dom元素,vue3取消了这一操作,没有了refs这个属性值,可以直接用ref()方法生成响应式变量与dom 元素捆绑
<template> <div ref="box"></div> </template> import {ref,onMounted} from 'vue' /* setup 方法调用是在生命周期beforeCreate与created 之间 */ <script> setup(){ var box = ref(null) onMounted(()=>{ console.log('onMounted',box.value) }) console.log(box.value) return {box} } </script>
总结
到此这篇关于Vue3.0中Ref与Reactive区别的文章就介绍到这了,更多相关Vue3.0 Ref与Reactive区别内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了C#中out与ref的区别实例解析,对C#初学者有不错的学习借鉴价值,需要的朋友可以参考下...2020-06-25
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 有过C#基础知识的都应该清楚Ref和Out的使用方法,所以下面这篇文章主要给大家介绍了关于c#基础系列之ref和out的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 众所周知,react推出了hooks之后,很多项目就开始往hooks上靠拢,所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西...2021-06-20
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 本文将通过实例和说明,给大家详细讲解C#中的ref和out参数...2020-06-25
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 本篇文章是对params,ref,out的参数问题进行了详细的分析介绍,需要的朋友参考下...2020-06-25
- 最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下...2023-01-17
- 今天又遇到这个问题了,问了问同事,他说最近面试的时候,也问道他了,于是给我讲了讲,现在大概是记住了,分享一下。...2020-06-25