Vue3.0 Ref与Reactive的区别

·  阅读 5733

Ref与Reactive

Ref\color{black}{Ref}

Ref\color{red}{Ref} 用来创建基础类型的响应式数据,模板默认调用value\color{red}{value}显示数据。方法中修改需要修改value\color{red}{value}的值才能修改

<!-- 模板语法> 
<template>
   <div>{{state}}</div>
</template> 
//js 脚本
setup(){
     let state = ref(10) 
     state.value = 11
     return {state}
}
复制代码

Reactive\color{black}{Reactive}

Reactive\color{red}{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

RefReactive创建的都是递归响应的,将每一层的json 数据解析成一个proxy对象,shallowRefshallowReactive创建的是非递归的响应对象,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这个属性值,可以直接用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>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改