我们讨论转载请注明出处：www.tangshuang.netref-sugar本文作者：唐霜，转载请注明出处。本质上在讨论三件事：原创内容，盗版必究。设计原则，开发体验，实现魔法转载请注明出处：www.tangshuang.net。【本文首发于唐霜的博客】

我们现在在该问题上争论，很多人直接从第三原创内容，盗版必究。转载请注明出处：www.tangshuang.net点出发，认为实现魔法不好，但实际上，根源转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】在于第一点，vue3发布的ref没有遵循著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】vue原有的设计原则，使得变量的使用在s【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】cript和template中呈现了两种【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】形态。

export default {
  setup() {
    const count = ref(0)
    const plus = (inc) => count.value += inc // 脚本中使用 count.value
    return { count, plus }
  }
}

<div>{{ count }}</div> // 模板中使用 count

设计原则原创内容，盗版必究。

Vue的设计原则包含两个基本点：1.通过本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。直接修改状态变量而非调用接口完成响应式，【未经授权禁止转载】【版权所有，侵权必究】2.接近原始js变量操作而非复杂操作的0本文作者：唐霜，转载请注明出处。【作者：唐霜】成本理解。简单说就是，vue帮你封装好响未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。应式，你只要无脑使用，做到真正0心智模型【作者：唐霜】原创内容，盗版必究。。但在ref这个点上，0心智失效了，因为本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。我们在脚本中经常忘记.value。

对问题的解决，不能超出设计原则，这是vu【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】e所坚守的，超出原则的设计，比如这篇本文版权归作者所有，未经授权不得转载。文章，虽然可以解决问题，但是一旦泛滥，那【本文受版权保护】【转载请注明来源】么vue就没啥价值了。

开发体验【原创内容，转载请注明出处】

在开发体验道路上分出了两条岔路，AoT和本文版权归作者所有，未经授权不得转载。【转载请注明来源】Runtime。前者把活交给编译过程，能本文作者：唐霜，转载请注明出处。【转载请注明来源】力实现全靠工具，但是可以随意发明语法，想转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】怎么玩都可以，爽，缺点就是脱离了那套编译【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。工具跑不了，典型就是svelte。后者需【未经授权禁止转载】【作者：唐霜】要自己写一套基于原始js能力的系统实现效【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。果，提供接口，按照接口文档用就完事了，浏【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】览器里面随便跑，缺点是运行时代码加大，心著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。智负担加剧（要记住用法）。

vue想尽一切办法在两者之间做平衡，几年原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net来，长期坚持能够纯runtime实现，还【作者：唐霜】【作者：唐霜】是干不过js语言本身的限制。所以，新提案【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netref-sugar妥协了，是纯粹的AoT【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】实现方案。当然，AoT也可以在浏览器端搞【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net编译，就像当年less搞的一样，但很明显转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，这是歧途，自己在浏览器里面解释执行js本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。是不明智的，太不安全了。

对该方案的喷点，多多少少是由于这个原因。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net因为如果把解决问题的方法丢给编译器去解决著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，那还有啥是编译器不能解决的？

所以，能够平息这次风波的根本解决办法，一【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。定是：0心智负担+runtime的方案【原创内容，转载请注明出处】。连尤大都掉坑的问题，是不是无解了呢？接原创内容，盗版必究。原创内容，盗版必究。下来看看实现魔法。

实现魔法【访问 www.tangshuang.net 获取更多精彩内容】

我想，尤大掉坑的根源，可能是对设计原则的【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。误解，认为vue必须是基于单一方案实现响【原创不易，请尊重版权】【本文首发于唐霜的博客】应式，所谓单一方案，就是vue里面只能有转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】数据拦截这一套方案。但是，响应式方案真不本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net止数据拦截这一条路。vue1,2采用了d著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】efineProperty方案实现响应式本文作者：唐霜，转载请注明出处。【作者：唐霜】，而vue3采用了Proxy，开发者的心转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。智没有任何负担，反而叫好，这说明，问题的未经授权，禁止复制转载。【转载请注明来源】根源不在于实现响应式的内部细节，而在最终【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。表现出来的效果。

所以，为什么vue只能基于单一方案实现响【作者：唐霜】著作权归作者所有，禁止商业用途转载。应式？为什么不能同时用两套响应式方案？在本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ref这个点上，脏检查机制就是一个赠送的【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】方案。（这想法不是我提的【转载请注明来源】）未经授权，禁止复制转载。

let a = ref(0, () => a) 
function handle() { 
    a = a + 1 
}

<div @click="handle">{{ a }}</div>

另外，js里面有一些魔法可以用上了，主要【转载请注明来源】本文作者：唐霜，转载请注明出处。是valueOf和Symbol.toPr【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。imitive，这两个属性可以帮助我们完【作者：唐霜】原创内容，盗版必究。成对象的值运算。我简单举个例子你就能明白【本文首发于唐霜的博客】【版权所有，侵权必究】其中的道理。

var a = {
  value: 1,
  valueOf() { return this.value },
}

var b = {
  value: 2,
  valueOf() { return this.value },
}

接下来我们做这个运行：a + b得到的结本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net果是3.我们还可以修改a.value =本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】 2，再执行a + b结果是4. 道理就【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。是这么简单。let a = ref(0,【本文首发于唐霜的博客】未经授权，禁止复制转载。 () => a) 中，a的结果是本文作者：唐霜，转载请注明出处。【未经授权禁止转载】一个如上结构的对象，所以参与运行是OK的未经授权，禁止复制转载。【未经授权禁止转载】，对a.value进行改造，就可以做依赖【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。收集了。比如：

let c = computed(() => a + b)

由于上面式子中会调用a.value和b.原创内容，盗版必究。【转载请注明来源】value，所以可以知道c对a,b有依赖【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】。下面是最关键的：

a = a + 1

对a重新赋值，此时a的数据类型发生了变化转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】，从对象变成了数字。但是没有关系，在co原创内容，盗版必究。【未经授权禁止转载】mputed进行依赖收集时，我们已经得到【本文首发于唐霜的博客】【版权所有，侵权必究】了一个计算公式：

c = (() => a)() + (() => b)()

也就是说，无论a, b是什么数据类型，计转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】算后得到的c的结果是确定的。而关键的问题【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。在于，一旦a丢失了object类型，就没【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】有办法依靠vue的响应式设计完成响应式效著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。果。此时，脏检查就来了。

• 用callback包装handle（效果【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】类似computed，主要做依赖收集）:未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net handle = callback((著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net) => a = a + 1)
转载请注明出处：www.tangshuang.net【转载请注明来源】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】
• 执行handle时，a.value被收集本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。，代表handle函数有可能对a产生副作【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net用，每次执行handle，可能收集到的r【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ef变量不同，由if…els【未经授权禁止转载】未经授权，禁止复制转载。e决定，根据这个情况，还可以做一些优化
原创内容，盗版必究。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】本文作者：唐霜，转载请注明出处。
• 当handle被调用结束时，对收集到的所转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】有依赖进行检查，检查依据是上一个值和这一【本文受版权保护】【未经授权禁止转载】次的() => a结果
【作者：唐霜】转载请注明出处：www.tangshuang.net【作者：唐霜】转载请注明出处：www.tangshuang.net
• 当发现值不相等时，表示依赖被更新了，此时【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】回溯所有computed，如果发现对a有【转载请注明来源】未经授权，禁止复制转载。依赖，那么对应computed属性需要被【版权所有，侵权必究】【版权所有，侵权必究】更新
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。

和angularjs的脏检查不同，因为这【版权所有，侵权必究】转载请注明出处：www.tangshuang.net里我可以明确知道自己依赖了哪些变量，所以【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net我做的检查范围会小很多。而且由于next【本文受版权保护】【本文首发于唐霜的博客】Tick机制的存在，脏检查也仅限于数据层【本文受版权保护】未经授权，禁止复制转载。面，不会触发DOM的更新。

结束【本文首发于唐霜的博客】

你看，仅仅给ref加了第二个参数，就可以本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。把这个issue给结了。但是，你可能会说转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，我() => a真不想写啊！！！【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。要解决这个问题，最好的办法，就是你去做T未经授权，禁止复制转载。未经授权，禁止复制转载。C39主席，然后强推PrimitiveP【版权所有】唐霜 www.tangshuang.net【转载请注明来源】roxy，并且让Proxy完全适用于Pr【转载请注明来源】未经授权，禁止复制转载。imitiveProxy，这下世界安静了【作者：唐霜】【版权所有，侵权必究】。