Vue 进阶系列之响应式原理及实现

文章预览

（给 前端大全 加星标，提升前端技能 ） 转自： 高级前端进阶 什么是响应式Reactivity Reactivity表示一个状态改变之后，如何动态改变整个系统，在实际项目应用场景中即数据如何动态改变Dom。 需求 现在有一个需求，有a和b两个变量，要求b一直是a的10倍，怎么做？ 简单尝试1： let a = 3 ; let b = a * 10 ; console .log(b); // 30 乍一看好像满足要求，但此时b的值是固定的，不管怎么修改a，b并不会跟着一起改变。也就是说b并没有和a保持数据上的同步。只有在a变化之后重新定义b的值，b才会变化。 a = 4 ; console .log(a); // 4 console .log(b); // 30 b = a * 10 ; console .log(b); // 40 简单尝试2： 将a和b的关系定义在函数内，那么在改变a之后执行这个函数，b的值就会改变。伪代码如下。 onAChang ………………………………