解析：通过window.customElements方法可以创建自定义元素，里面的define方法就是用来指定自定义元素的名称，以及自定义元素对应的类。 这里有一个细节，自定义元素中间一定要用中划线隔开，不然是无效的。 这时候在这个类里面就可以定义元素里的所有内容了，这和Vue…

随着 React Vue 等框架的流行，Virtual DOM 也越来越火，snabbdom 是其中一种实现，而且 Vue 2.x 版本的 Virtual DOM 部分也是基于 snabbdom 进行修改的。snabbdom 这个库核心代码只有 200 多行，非常适合想要深入了…

很多人提起 Vue 中的 computed，第一反应就是计算属性会缓存，那么它到底是怎么缓存的呢？缓存的到底是什么，什么时候缓存会失效，相信还是有很多人对此很模糊。 本文以 Vue 2.6.11 版本为基础，就深入原理，带你来看看所谓的缓存到底是什么样的。 本文假定你对 Vue…

createElement方法也是vue和react用来创建虚拟DOM的方法，我们也叫这个名字，方便记忆。接收三个参数，分别是type，props和children 到目前为止，已经轻而易举的实现了创建虚拟DOM。那么，接下来进行下一步，将其渲染为真实的DOM，别犹豫，继续回到…

Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。 本文的结论对于性能的毁灭是针对列表子元素顺序被改变、或者子元素被删除的特殊情况，提前说明清楚。 那么它的 vnode 也就是虚拟 dom 节点大…

无论是对象还是数组，需要实现双向绑定的话最终都会执行这个函数，该函数可以监听到 set 和 get 的事件。 在 Object.defineProperty 中自定义 get 和 set 函数，并在 get 中进行依赖收集，在 set 中派发更新。接下来我们先看如何进行依赖收集…

从其他的方面看，github日榜，Vue每天都有过100的star，足见其火热程度，这也是为什么大家都争先恐后的在非web领域提供Vue的支持。那么Vue的底层架构及其应用就尤为重要了 了解Vue的底层架构，是为非web领域提供Vue能力的大前提。Vue核心分为三大块：core…

我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。 我们在触发 this.msg = 'Hello, Changed~'的时候，会触发组件的更新，视图的重新渲染。 但是 <ChildComponent…

因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。 文章的原地址：https://github.com/answershuto/learnVue。 在学习过程中，为Vue加上了中文的注释http…