1.为什么我们把属性定义在data、props、methods等参数里，却能通过this对象直接访问呢。 用过Vue都知道，Vue本身是一个构造函数，所以我们的用法是直接new Vue()。下面我们用代码模拟一下Vue内部的代理 这里的代码主要是示例，并没有判断属性是否重复。 …

既然data属性是被深度监听，那我们就首先自己实现一个简单的深拷贝，理解下思路。 为什么是简单的深拷贝，因为没考虑 RegExp, Date, 原型链，DOM/BOM对象等等。要写好一个深拷贝，不简单。 有的同学可能会问，为什么不直接一个 for in 解决。如下: 其实 fo…

众所周知，Vue 是在触发数据的 get 时，收集依赖，改变数据时触发set, 达到派发更新的目的。 依赖收集 和 派发更新的 代码 在上一篇文章，有简单解释过。我们再来重温下代码 这里我省略了部分用于判断和兼容的代码，因为感觉一下子要看所有代码的话，会有些懵比。我们现在知道了…

这两篇文章中作者都分享了关于把函数防抖/函数节流包装成通用组件的经验。 在这里我就不介绍函数防抖/函数节流的概念了，将这样的功能封装是组件真的是非常实用。 这里我使用了abstract: true来创建一个抽象组件。 我们常用的transition和keep-alive就是一个…

虽然写了很长一段时间的Vue了，对于CSS Scoped的原理也大致了解，但一直未曾关注过其实现细节。最近在重新学习webpack，因此查看了vue-loader源码，顺便从vue-loader的源码中整理CSS Scoped的实现。 本文展示了vue-loader中的一些源码…

目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，一起来get吧。 先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起…