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-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 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
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Django 拆分model和view的实现方法
2019/08/16 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
python 写一个文件分发小程序
2020/12/05 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
魅力教师事迹材料
2014/01/10 职场文书
学校与家长安全责任书
2014/07/23 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
大学生求职意向书
2015/05/11 职场文书
党员公开承诺书2016
2016/03/24 职场文书
文书工作总结(范文)
2019/07/11 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python