乐趣区

关于vue.js:Day-48100-Vue3-Ref和Reactive区别

(一)需要

被问到,Ref 和 Reactive 区别,不会。这里小结记录下。

(二)介绍

1、共同点:

  • 都是用来创立响应式数据的;
  • 都能够创建对象类型的响应数据;

2、不同点:

(1)Ref

  • 次要用来创立根底数据类型的响应数据;

    <!-- 模板语法 > 
    <template>
     <div>{{state}}</div>
    </template> 
    //js 脚本
    setup(){let state = ref(10) 
       state.value = 11
       return {state}
    }
  • ref 响应式原理是依赖于 Object.defineProperty()get()set() 实现的
  • 如果想创建对象类型 (其实底层的实质还是 reactive, 零碎会主动依据咱们给 ref 传入的值转换成:{value:”} 来实现

    ref(1)->reactive({value:1})
    //ref 函数只能操作浅层次的数据,把根本数据类型当作本人的属性值;深层次依赖于 reactive

(2)Reactive

是用来创立援用类型的响应式数据的用法(参数必须是援用类型);

<!-- 模板语法 > 
<template>
   <div>{{state.name}}</div>
</template> 
//js 脚本
setup(){let state = reactive({name:'aaa'}}) 
     state.name = 'zhangsan'
     return {state}
}
  • 原理是是应用 Proxy 递归遍历对象实现的
  • 源码

参考链接

https://juejin.cn/post/701332…

写在最初的话

学习路上,经常会懈怠。

《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy…

如果有须要的搭档,能够加我微信:learningisconnecting
或者能够关注我的公众号:国星聊成长(我会分享成长的办法)

退出移动版