本文适合新手小白，也适合熟悉Vue的人，加深对源码的理解。

Vue的两种使用方法：

1、可以通过脚手架搭建项目，注意

   ⑴. Vue脚手架版本并非Vue版本

   ⑵. Vue有官方脚手架vue-cli，还有其它民间脚手架，比如：webpack-simple

2、可以使用传统方法，在html文件中引入vue.js，再搭建项目（此方法虽行的通，但几乎没人用）

Vue使用mustache模板引擎和比较高效的diff算法

渲染采用虚拟DOM树的概念

简而言之：Vue为了提高渲染效率，把模板编译成为虚拟DOM树，然后再转化生成真实DOM。

虚拟DOM的好处是，当数据变动时，将重新编译生成新虚拟DOM树，然后使用diff算法前后两棵树对比，仅将差异部分反映到真实的DOM中，这样可以最小程度改动DOM，提升渲染效率

提升Vue效率的两个方法：

1、减少新的虚拟DOM的生成

2、减少真实DOM的改动，保证对比之后，只有必要的节点发生变化

Vue提供多种方式生成虚拟DOM树（新手可理解为：Vue有多种渲染模板的方法）：

1、在挂载内部直接写vue代码，也就是传统HTML+JS的写法（先做好模板，然后通过js代码赋值），此时将使用元素的outerHTML作为模板；

2、在实例化Vue对象中的template配置中写代码；

3、在实例化Vue对象中的render配置中，用函数直接创建虚拟节点，此时完全脱离模板，将省略编译步骤

上面三种的优先级顺序：render > template > outerHTML

注意：模板只能有一个根节点，虚拟节点树必须是单根的，diff算法决定了，只能由真实DOM和虚拟DOM两棵树对比

使用Vue时，首先使用new Vue({})进行实例化，实例化vue对象后，vue下的data、methods等，都会被提取到vue实例中，提取的过程被称为注入

注入的目的：

1、完成数据响应式

2、绑定this

Vue怎么知道数据被更改

Vue2.0是通过ES5的Object.defineProperty方法完成数据响应式

Vue3.0是通过ES6的Class Proxy完成数据响应式

Class Proxy效率高

Object.defineProperty有缺陷，有些情况下无法感知新增属性，比如：

1、渲染页面时，某个变量并没有被定义，在页面渲染完成后通过程序或其它方式定义变量并赋值，无法完成数据响应式

2、事先定义了一个空对象，渲染页面时，使用了此对象中不存在的一个变量，在页面中动态对此对象添加这个变量，无法完成数据响应式

删除也是如此