获得徽章 24
- 大家好，我是Grow Admin开源框架的开源作者，我们致力于打造一个开源的低代码平台，目前项目在持续的推进中，目前我们需要找两个热爱编程的后端Java大佬一起做开源项目，如果有感兴趣的大佬可以私信我。
官网地址：
gadmin.top 赞过
评论3 - Vue3.0 ref和reactive的区别
使用层面：
ref在使用时需要使用.value访问熟悉过，在template中不需要.value
reactive 可以直接访问不需要.value
数据层面：
ref推荐绑定基础类型数据，虽然也可以绑定应用类型数据接收的数据仍然是使用reactive去实现的。
reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。
底层方面：
ref是实用createRef创建响应声明，在createRef方法中接受两个参数value和shallow(深或浅)，该函数执行完成之后返回了RefImpl，之后利用类的属性访问器，取值的时候track来进行依赖收集，设置值的时候调用trigger去触发更新。属性访问器通过babel转化成es5代码就是defineProperty。
reactive函数中使用createReactiveObject创建响应式对象，reactive接收一个普通对象，reactive接收的是一个对象形式，如果不是对象形式就会抛出一个错误，如果是返回该普通对象的响应式代理，响应式代理是基于基于es6的 Proxy 实现，响应式代理响应式转换是“深层的”，会影响对象内部所有嵌套的属性。然而返回的代理对象不等于原始对象。reactive的时候接收的实际上是个对象，当然也可以接收一个数组,如果目标对象存在并且是一个只读的会直接返回这个对象，否则会创建一个reactive 对象。
总结：
reactive只能接收一个引用对象，不可以传递普通类型的数据，比如字符串、数字等，但是ref可以，因为ref返回的是一个响应式代理对象，这个对象value值就是我们的传递参数。
所以如果是想代理一个对象或者是数组还是使用reactive更合适，如果我们想要代理一个普通类型的值就需要使用ref去代理更合理。展开赞过 评论2 - 关于Vite + Vue3 + vue-router4 动态路由问题
场景描述：
后端通过接口把组件路径给到前端，前端需要动态注入组件路由地址包括组件。
解决问题方法：
使用 import.meta.glob 可以引入多个模块具体代码如下：
const modules = import.meta.glob("views/**/**.vue");
使用 router.addRoute 方法将路由动态注入到路由中即可。
需要注意的是 import.meta.glob 方法读取出来的路径是引入多个组件的对象路径对象。
{
"views/Test/index.vue": {}
}
通过[]取值的方式取出对应的组件即可。
router.addRoute({
...item,
path: `/${item.path}`,
component: modules[`../../${item.component}`]
});展开赞过 13
![[阴险]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_49.392c709.png)
gadmin.top![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
![[爱心]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_106.ba42c9a.png)