昨天下班前碰到一个问题，我是自己写的 loading 组件，注册了全局指令。在指令引用的时候如果 loading 是对象在更新属性时指令方法 updated 不会捕获到修改，v-loading 用扩展运算或者在 template 里引用则能正确更新状态。能在哪里做些调整吗？另外，不确定自己封装通用组件的必要性，现在的是 C 端项目有 ui 要求没用模板，但也有像 form 、table 、dialog 等模块，因为工作量不大我现在都单独抽出了组件库写了文档。越优化越觉得和 element 的组件功能是差不多的只是 ui 不同，引用 element 然后自定义样式，不满足的功能也可以二次封装自己添加，按需加载打包可能更方便？
在 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 ，就对各个属性进行了依赖收集了
修正一下我 9#的错误回复，我又试了一下 ref 定义 loading 变量，在对 loading.value 整体重新赋值后确实会触发更新，我的结论是基于对 loading.value.xx 赋值，这是不能捕获修改的，原因就是 说的创建时默认没有对 object key 监听，进行引用和扩展类似创建新对象则会触发 update ，deep 和`watch binding`则是主动激活监听。```const loading = ref(false)loading.value = { loading: true, text: 'loading...' }// 状态更新正常const loading = ref({ loading: false })loading.value = { loading: true }// 状态更新正常const loading = ref({ loading: false })loading.value.loading = true// 无法更新```不过从组件的角度肯定是不限制 ref 和 reactive 更合适，因为没有严格的代码规范并不能要求所有人都用 ref.value 赋值。
loading.value.loading = true 按照道理是会触发更新的，我一直所有代码都是这么写的，肯定是哪里写错了引用变了，Vue devtools 你点进去看看就知道了喜欢用 reactive 就用，就像有些人喜欢父子传值传进去再 watch 写的复杂的不得了，我是感觉不如 expose 个方法出去让父组件 ref 调用方法一次性传值。这种写法出来的程序只能在中午运行，早晚出问题
watch 默认下不会深入观察 ref ，要加 deep 参数：```j**ascriptwatch(loading, () => {console.log('ref deep watch')}, { deep: true })```
这句话并不对啊，确实没有规范要求用 ref 还是 reactive ，但作为组件，我只需要规定 binding.value 是一个 bool 类型就好了，不管你是基本类型还是对象类型，如果用对象，就应该吧 loading 这单个属性传递给我。参考 element ui ，你的其他 text ，color ，size 属性，应该通过 el 的 dataset 获取，不应该在 binding.value 中。