vue ref是在组件里唯一吗_Vue组件设计 - 丢掉 ref/reactive 畅快开发

书接上文，如果服务应用到子组件，你会发现好像响应式仍然没有生效

原因很简单，服务的 markDirty 是在服务注册的组件中调用，而子组件的 markDirty 并没有声明，因此，我们用两个简单的小函数：

/**

为什么 dirty 用 null 和 undefine 之间的数据来回 toggle 呢？因为这两个数据类型都是不会渲染出内容的

所以，我们可以大摇大摆地在子组件中填入：

{

好的，我们以 virtual scroll 虚拟滚动的简单实现为例：

是的，主要逻辑70行

然后，我们新建一个 VirtualContainer 组件：

也很简单，只有 20 行

注意，两份代码都没有出现 ref/reactive/watch 等响应式相关 api

另外，reactor.value 需要写在 template/jsx 中，否则确定不了依赖，并且确保不要写在顶层fragment中

最后，我们来测试一下成品：

import 

嗯，100万条数据也很流畅

观察作为服务的 virtual scroll，此时由于服务中没有任何 ref/reactive/watch，你在开发的时候很长时间不需要为响应式而操心

如果需要优化，让其适配千万级数据，那就直接在 service 中更改相关逻辑实现即可

如果想要设置新的 items 并保持响应，那就：

setItems

你的可操作空间都很大