响应式网页设计代码_Vue组件设计 - 深入响应式

好的，今天来点干货，深入一下 Vue 的响应式

首先我们来看这么一个例子：

const 

然后使用的时候，我们不用 ref/reactive ，直接声明一个变量：

export 

请问组件 Test，会响应变化么？

答案显而易见 —— 不会

为何？因为组件 Test 没有触发变更检测

那么，如果我们给组件 Test 加上一个 props，然后再在使用时增加另一个 ref，响应变化：

const 

使用时：

export 

注意，core.value 仅仅是传入，在 Test 中并没有使用

这时响应式会生效么？

会！

奇怪了，为什么 name 只是个普通的 javascript 变量，也会有响应式效果呢？

因为组件是变更检测的最小单位，这一点不同于 React，FiberNode 最小单位，因此，一旦 ref/react 导致了组件重绘，那么所有相关的所有数据都会应用到最新状态

---

控制变更检测

利用Vue响应式原理，你可以直接控制组件的变更检测，并使得代码完全脱离 ref/reactive

首先完成一个自定义Hooks，markDirty()

function 

然后，全程不用 ref/reactive ：

let 

全程没有 ref/reactive，仅仅是在变化的时候 mark 一下

这种感觉像不像 Angular 1代的digist，或者 Angular 2+ 的 changeDetector？

这么做有什么问题呢？

会不会导致一些意外情况发生呢？

会，因为这其实是彻底摒弃了不可变，并且以命令的方式强制控制组件渲染，这么做能做到较好的性能，但是你也必须确定，你能保证单向的依赖关系

要是以前，这种方式做到单向依赖关系，或者说单向数据流很难，但是现在，还真不是什么大问题：

function 

呢，您看，谁还管什么 ref/reactive，也不用管可变不可变，直接一把梭吧~