Bootstrap

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

6fbec5f6d2aa4fb3f8a73045045db2cd.png

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

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

/**

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

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

{

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

8cdb5473b813b6e36a87002a3db8c96f.png

是的,主要逻辑70行

然后,我们新建一个 VirtualContainer 组件:

e9b0e0e313b12385ba1252a8db63f748.png

也很简单,只有 20 行

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

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

最后,我们来测试一下成品:

import 

84ce0257399c2fd94b62ad401ea1b515.png

嗯,100万条数据也很流畅

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

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

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

setItems

你的可操作空间都很大

;