Vue3.0中Ref与Reactive的区别示例详析

目录

Ref与Reactive

Ref

Ref 用来创建基础类型的响应式数据,模板默认调用value显示www.qmia.cn数据。方法中修改需要修改value的值才能修改

1

2

3

4

5

6

7

8

9

10

<!-- 模板语法>

<template>

   <div>{{state}}</div>

</template>

//js 脚本

setup(){

     let state = ref(10)

     state.value = 11

     return {state}

}

Reactive

Reactive 用来创建引用类型的响应式数据,

1

2

3

4

5

6

7

8

9

10

<!-- 模板语法>

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

1

2

3

4

5

6

7

8

9

10

11

12

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这个方法

1

2

3

4

5

6

7

8

9

10

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 --- 不追踪数据

如果不想要数据被追踪,变成响应式数据可以调用这个方法,就无法 追踪修改数据重新渲染页面

1

2

3

4

var obj = {name:'test'}

obj = markRaw(obj)

var state = reactive(obj)

state.name = 'zs'//无法修改数据 页面也不会修改

toRef --- 跟数据源关联 不修改UI

如果使用ref 创建的响应式变量,不会与源数据关联,如果想要与源数据关联但数据更改不更新UI,就要使用toRef创建

1

2

3

4

5

6

7

8

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

1

2

3

4

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方法

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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 元素捆绑

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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区别的文章

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值