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 18 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
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开发微信支付获取用户地址
2015/10/04 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
零基础php编程好学吗
2019/10/11 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python制作Windows系统服务
2017/03/25 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
技术负责人任命书
2014/06/05 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
职工食堂管理制度
2015/08/06 职场文书
暑假生活随笔
2015/08/15 职场文书