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单元格多列合并的实现
Nov 26 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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实现将GB编码转换为UTF8
2006/11/25 PHP
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
php测试kafka项目示例
2020/02/06 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
js判断是否是手机页面
2017/03/17 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
模具毕业生推荐信
2014/02/15 职场文书
优秀党员获奖感言
2014/02/18 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
计算机专业自荐信
2014/05/24 职场文书
产品委托授权书范本
2014/09/16 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis