Vue3.0中Ref与Reactive的区别示例详析


Posted in Vue.js onJuly 07, 2021
目录
  • Ref与Reactive
    • Ref
    • Reactive
  • Ref与Reactive的区别
  • shallowRef 与shallowReactive
    • toRaw ---只修改数据不渲染页面
    • markRaw --- 不追踪数据
    • toRef --- 跟数据源关联 不修改UI
    • toRefs ---设置多个toRef属性值
    • customRef ---自定义一个ref
    • ref 捆绑页面的标签
  • 总结

 

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区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
idea编译器vue缩进报错问题场景分析
Vue实现导入Excel功能步骤详解
Vue图片裁剪组件实例代码
vue3中provide && inject的使用
Jul 01 #Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 #Vue.js
vue+element ui实现锚点定位
Jun 29 #Vue.js
You might like
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python内置类型性能分析过程实例
2020/01/29 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
校园门卫岗位职责
2013/12/09 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
个人股份合作协议书
2014/10/24 职场文书