Vue知识点

Posted by hubcarl on 17-08-13

Object.observe

受现代JavaScript的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。 由于 Vue 会在初始化实例时对属性执行 getter/setter转化过程,所以属性必须在 data 对象上存在才能让 Vue转换它,这样才能让它是响应的。

Object 数组

observe先对传入的数组作一个判断:如果不是引用类型,则返回,如果其原型上已有__ob__实例(即其已经被observe过了),则返回。否则就去做递归,使得其每一子项都是可观察的:ob = new Observer(value)。

observer对象

Vue执行this.walk(value)时,会对其对象每一项进行递归遍历,并对每一项执行defineReactive(obj, keys[i], obj[keys[i]]),使得对象是可响应的。

响应式

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。 Object.defineProperty 是仅 ES5 支持,且无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

对于getter/setter,同样也需要对每一项进行递归的发布 - 订阅其主要为依赖于Dep对象的发布 - 订阅模式.

对于getter,一旦订阅到这一个变化,还会去发布一个自身已经改变的状态给订阅其的数据。即源码中的dep.depend()。

对于setter,一旦一个数据触发其set方法,Vue便会发布消息,通知订阅这个数据的元素也要发生改变。即源码中的dep.notify()

虚拟DOM

新旧 VNode 对比的 diff 函数,主要是为了优化dom,通过算法使操作dom的行为降到最低,diff 算法来源于 snabbdom,是 VDOM 思想的核心。snabbdom 的算法为了 DOM 操作跨层级增删节点较少的这一目标进行优化,它只会在同层级进行, 不会跨层级比较

https://segmentfault.com/a/1190000008291645

https://github.com/aooy/blog/issues/2

https://github.com/zoro-web/blog/issues/2

https://juejin.im/entry/59116fa6a0bb9f0058aaaa4c

生命周期

服务端渲染

性能

相关文章

https://zhuanlan.zhihu.com/p/28498615