企业网站开发 外文文献,湖州建设企业网站,网站开发环境安装程序,wordpress整站无刷新这几天看到好多文章标题都是类似于#xff1a;
不用 ref 的 xx 个理由不用 reactive 的 xx 个理由历数 ref 的 xx 宗罪
我就很不解#xff0c;到底是什么原因导致有这两批人#xff1a;
抵触 ref 的人抵触 reactive 的人
看了这些文章#xff0c;我可以总结出他们的想法…这几天看到好多文章标题都是类似于
不用 ref 的 xx 个理由不用 reactive 的 xx 个理由历数 ref 的 xx 宗罪
我就很不解到底是什么原因导致有这两批人
抵触 ref 的人抵触 reactive 的人
看了这些文章我可以总结出他们的想法
抵触 reactive 的人
抵触 reactive 的人他们的想法大概就是
1、Vue 官方推荐 ref2、reactive 有类型限制ref 没有3、reactive 使用不当会丢失响应式比如解构4、reactive 无法修改整个对象的值
抵触 ref 的人
抵触 ref 的人他们的想法大概就是
1、ref 的底层其实就是 reactive用 ref 相当于多了一层耗费性能2、ref 的 .value 用起来很麻烦增加使用者心里负担3、ref 到模板的时候会解掉 value 这一层这时候也会耗费性能
把我整笑了~
说实话看到这些文章有点把我整笑了其实你要用 ref 或者 reactive 都没错但是没比必要那么抵触编程很多时候并不是非黑即白啊。。。
既然 Vue3 推出了 ref 和 reactive那就说明他们都有存在的必要在项目中不同的场景去运用他们我觉得才是最好的而不是用一个不用另一个不止这两个还有很多其他好用的 Vue3 API
我想针对这两批人的想法做一个回应
回应 - 抵触 reactive 的人
1、官方是推荐不是抵触2、reactive 既然有类型限制那就在特定时候用 reactive 就行3、使用不当会丢失响应式那就是开发者对于 Vue3 API 的使用还不熟4、用 Object.assign 就可以修改整个对象的值
回应 - 抵触 ref 的人
1、耗费性能的话这么久了也没人贴出到底耗费了多少性能2、.value 不麻烦我觉得 .value 可以起到辨别响应式和非响应式数据的效果而且现在编辑器都有插件提供的代码补全了多个 .value 也花不了多少时间吧
灵活使用 Vue3 API 才是王道
其实在平时开发中我觉得基本数据类型和数组都可以用 ref 来管理而对象的话可以使用 reactive 来管理比如表单对象、状态对象
其实 Vue3 不止有这两个 API 还有很多其他 API 也很好用大家只要去灵活使用它们能让你的Vue3 项目上一个层次
readonly
顾名思义就是只读的意思如果你的数据被这个 API 包裹住的话那么修改之后并不会触发响应式并且会提示警告 readonly 的用途一般用于一些 hooks 暴露出来的变量不想外界去修改比如我封装一个 hooks这样去做的话那么外界只能用变量但是不能修改变量这样大大保护了 hooks 内部的逻辑~ shallowRef
shallowRef 用来包住一个基础类型或者引用类型如果是基础类型那么跟 ref 基本没区别如果是引用类型的话那么直接改深层属性是不能触发响应式的除非直接修改引用地址如下 注意改深层属性能改数据只是没触发响应式所以当下一次响应式触发的时候你修改的深层数据会渲染到页面上~ shallowRef 的用处主要用于一些比较大的但又变化不大的数据比如我有一个表格数据通过接口直接获取并且主要用在前端展示需要修改一些深层的属性但是这些属性并不需要立即表现在页面上比如以下例子我只需要展示 name、age 字段至于 isOld 字段并不需要展示我想要计算 isOld 但是又不想触发响应式更新所以可以用 shallowRef 包起来进而减少响应式更新优化性能 shallowReactive
shallowReactive 用来包住一个引用类型被包住后修改第一层才会触发响应式更新也就是浅层的属性修改深层的属性并不会触发响应式更新 注意改深层属性能改数据只是没触发响应式所以当下一次响应式触发的时候你修改的深层数据会渲染到页面上~ shallowReactive 用的比较少shallowReactive 的用处跟 shallowRef 比较像都是为了让一些比较大的数据能减少响应式更新进而优化性能
toRef toRefs
先说说 toRef 吧我们平时在使用 reactive 的时候会有一个苦恼那就是解构比如看以下例子我们为了少些一些代码解构出来了 name 并放到模板里渲染但是当我们想改原数据的时候发现 name 并不会更新这就是解构出来基础类型的苦恼 这时我们可以使用 toRef这个时候我们直接修改 name 也会触发原数据的修改修改原数据也会触发 name 的修改 但是如果是属性太多了我们想一个一个去用 toRef 的话会写很多代码 所以我们可以使用 toRefs 一次性解构 toRaw markRaw unref
toRaw 可以把一个响应式 reactive 转成普通对象也就是把响应式对象转成非响应式对象 toRaw 主要用在回调传参中比如我封装一个 hooks我想要把 hooks 内维护的响应式变量转成普通数据当做参数传给回调函数可以用 toRaw markRaw 可以用来标记响应式对象里的某个属性不被追踪如果你的响应式对象里有某个属性数据量比较大但又不想被追踪你可以使用 markRaw unref 相当于返回 ref 的 value effectScope onScopeDispose
effectScope 可以有两个作用
收集副作用全局状态管理
收集副作用
比如我们封装一个共用的 hooks为了减少页面隐患肯定会统一收集副作用并且在组件销毁的时候去统一消除比如以下代码 但是这么收集很麻烦 effectScope 能帮我们做到统一收集并且通过 stop 方法来进行清除且 stop 执行的时候会触发 effectScope 内部的 onScopeDispose 我们可以利用 effectScope onScopeDispose 来做一些性能优化比如下面这个例子我们封装一个鼠标监听的 hooks 但是如果在页面里调用多次的话那么势必会往 window 身上监听很多多余的事件造成性能负担所以解决方案就是无论页面里调用再多次 useMouse我们只往 window 身上加一个鼠标监听事件 全局状态管理
现在 Vue3 最火的全局状态管理工具肯定是 Pinia 了那么你们知道 Pinia 的原理是什么吗原理就是依赖了 effectScope 所以我们完全可以自己使用 effectScope 来实现自己的局部状态管理比如我们封装一个通用组件这个组件层级比较多并且需要共享一些数据那么这个时候肯定不会用 Pinia 这种全局状态管理而是会自己写一个局部的状态管理这个时候 effectScope 就可以排上用场了
vueuse 中的 createGlobalState 就是为了这个而生 provide inject
Vue3 用来提供注入的 API主要是用在组件的封装比如那种层级较多的组件且子组件需要依赖父组件甚至爷爷组件的数据那么可以使用 provide inject最典型的例子就是 Form 表单组件可以去看看各个组件库的源码表单组件大部分都是用 provide inject 来实现的比如 Form、Form-Item、Input这三个需要互相依赖对方的规则、字段名、字段值所以用 provide inject 会更好。具体用法看文档吧~cn.vuejs.org/guide/compo…
