vue 指令更新问题

昨天下班前碰到一个问题，我是自己写的 loading 组件，注册了全局指令。在指令引用的时候如果 loading 是对象在更新属性时指令方法 updated 不会捕获到修改，v-loading 用扩展运算或者在 template 里引用则能正确更新状态。能在哪里做些调整吗？





另外，不确定自己封装通用组件的必要性，现在的是 C 端项目有 ui 要求没用模板，但也有像 form 、table 、dialog 等模块，因为工作量不大我现在都单独抽出了组件库写了文档。越优化越觉得和 element 的组件功能是差不多的只是 ui 不同，引用 element 然后自定义样式，不满足的功能也可以二次封装自己添加，按需加载打包可能更方便？

let loading = ref(false)

在 mounted 和 updated 中 watch 一下 bindingValue ，根据这边变量的用法，属性变化不会触发 updated 。用 element-plus 覆盖样式也挺香，或者 fork 下来改改

https://github.com/vuejs/core/blob/f6e84af30aeffd281aebbab02b0e623e5fc159e0/packages/runtime-core/src/directives.ts#L95 有一个 deep 的配置，如果加一个 deep：ture 就可以了，因为在 mount 时，默认没有对这个响应式数据的各个 key 进行依赖收集，所以才没有触发对应的 update 钩子， 如果你在模板中使用使用{{loadingValueObj}}，是直接编译成_toDisplayString($setup.loadingValueObj)，里面是使用的 JSON.stringify ，就对各个属性进行了依赖收集了

@wangtian2020 boolean 是正常的，用 object 是因为要设置其他属性，已经按 3#的方法修改了

@ljl024 原本建项目的时候就在想要不要引 elementplus ，因为以前也一直用这个，原本二次封装的也能直接拿来用。最后还是感觉太重了就自己撸，现在想想可能草率了。XD

@ooo4 非常感谢！这是不爱读源码的坏处吗 XD

ref 也能处理 object 啊，reactive 就是因为使用中容易出现像你这种丢失响应性的问题，其实官方更推荐 ref

@NerbraskaGuy 这个问题的本质是，渲染函数的副作用没有对这种情况进行依赖收集，这就会导致组件始终不会更新了，那么自定义指令的 update 钩子也当然无法执行了

@NerbraskaGuy ref 之前试过了也不会更新， @ooo4 说的是对的