Vue3为什么推荐使用ref而不是reactive

点击关注公众号,技术干货及时送达8eb277ccba484fb782db74da6080f585.png

reactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代option apidata的替代,可以存放任何数据类型,而reactive声明的数据类型只能是对象;

先抛出结论,再详细说原因:非必要不用reactive! (官方文档也有对应的推荐)

官方原文:建议使用 ref() 作为声明响应式状态的主要 API。

最懂Vue的人都这么说了:推荐ref!!!!!!

Vue3为什么推荐使用ref而不是reactive_第1张图片

reactiveref 对比

reactive ref
❌只支持对象和数组(引用数据类型) ✅支持基本数据类型+引用数据类型
✅在

上面这个例子如果是使用ref进行声明,直接赋值即可,不需要将属性拆分一个个赋值

使用ref替代reactive:



  • ref适用范围更大,声明的数据类型.基本数据类型和引用数据类型都行

  • 虽然使用ref声明的变量,在读取和修改时都需要加.value小尾巴,但是正因为是这个小尾巴,我们review代码的时候就很清楚知道这是一个ref声明的响应式数据;

    ref的.value小尾巴好麻烦!

    ref声明的响应式变量携带迷人的.value小尾巴,让我们一眼就能确定它是一个响应式变量!虽然使用ref声明的变量,在读取和修改时都需要加.value小尾巴,但是正因为是这个小尾巴,我们review代码的时候就很清楚知道这是一个ref声明的响应式数据;

    可能有些人不喜欢这个迷人小尾巴,如果我能自动补全阁下又如何应对?

    volar插件能自动补全.value (强烈推荐!!!!!!!)

    本人推荐ref一把梭,但是ref又得到处.value ,那就交给插件来完成吧!!!

    • valor 自动补全.value (不是默认开启,需要「手动开启」)

    • 不会有人不知道Vue3需要不能使用vetur要用valor替代吧?不会不会吧? (必备volar插件)

    • Vue3为什么推荐使用ref而不是reactive_第2张图片

    可以看到当输入ref声明的响应式变量时,volar插件自动填充.value 那还有啥烦恼呢? 方便!

    本文会根据各位的提问和留言持续更新;

    @ 别骂了_我真的不懂vue 说(总结挺好的,因此摘抄了):

    reactive 重新赋值丢失响应是因为引用地址变了,被proxy代理的对象已经不是原来那个所以丢失响应了,其实ref也是一样的,当把.value那一层替换成另外一个有着.value的对象也会丢失响应 ref定义的属性等价于reactive({value:xxx})
    另外说使用Object.assign为什么可以更新模板
    Object.assign解释是这样的:如果目标对象与源对象具有相同的键(属性名),则目标对象中的属性将被源对象中的属性覆盖,后面的源对象的属性将类似地覆盖前面的源对象的同名属性。
    那个解决方法里不用重新赋值,直接Object.assign(state,{count:1})即可,所以只要proxy代理的引用地址没变,就会一直存在响应性

    如果文章对你有帮助的话欢迎

    「关注+点赞+收藏」

    你可能感兴趣的:(okhttp,vue.js,前端,javascript,ecmascript)