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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue postcss-px2rem 自适应布局
May 15 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
深入探究node之Transform
2017/07/20 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
使用EduBlock轻松学习Python编程
2018/10/08 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python 3 判断2个字典相同
2019/08/06 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
英国现代市场:ARKET
2019/04/10 全球购物
大班上学期幼儿评语
2014/04/30 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
Python基础之pandas数据合并
2021/04/27 Python
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
python之django路由和视图案例教程
2021/07/26 Python