Vue本质是DOM结构的抽象，在介绍之前，理解一些核心概念对后续学习帮助很大。
我试图通过模拟一个场景来介绍这些概念。
假设程序员Jack正在编写登陆页面，它使用的是Element UI框架，页面需要输入用户名，密码，验证码，以及登陆按钮。
1、 组件
Jack在编写时，组件有三层抽象。
从整个前端项目考虑，它在编写login.vue，它是App.vue树中的一个叶子节点。login.vue只是整个项目的一个组成部分。
从单个页面考虑，它在编写login.vue, 它会映射为登陆页面。它是登陆页面的抽象。
从单个页面的元素考虑，它自身是树的根节点，其中使用的用户名，密码，验证码等Element UI组件是它的叶子节点。
粒度分别为整个web项目，单个页面，单个UI组件。
2、子组件 & 父组件
它的关系类似于类和实例的关系，在登陆页面中的el-input称为父组件，el-input源码称为子组件。
3、Vue实例
Jack编写的login.vue最终会被渲染为登陆页面，同时会创建一个Vue实例对象。
Vue实例有自己的生命周期，自身的属性等等。登陆页面中使用到的属性，文本节点，元素节点，甚至整个DOM结构都与Vue实例相关。它会触发Vue属性变更的事件。当变更之后，会重新渲染页面，重新渲染过程不会再次创建Vue实例
4、 生命周期