使用Vue有两年半啦，想回过头来，看看自己收获了什么，就出来这一系列，就当温故知新~😊😊😊
👀P.S. 如有不对，欢迎指正~
tempalte
Vue通过template模板，声明式地把数据渲染到DOM上的（enables us to declaratively render data to the DOM using straightforward template syntax）
在其内部把这些数据和DOM联系起来，借助direvtive来和DOM交互（v-if，v-show, v-for改变DOM structure; v-bind, v-model绑定响应性数据给DOM；v-on进行事件的监听，触发相应的handler），你就会发现在写代码时，你并不需要更新DOM的操作，你只需要关注如何写JS
组件系统
Vue中很重要的就是组件系统，它让你创建独立，功能单一的小组件，然后再把这些小组件组合拼接起来，形成一个完整的程序。这让程序在组件的维度解耦开来，比如子组件通过 props 接口与父组件很好地解耦，父组件无需关心子组件干了啥，子组件做啥也不会影响父组件。
在Vue中，组件本质上是一个具有预定义选项的实例，既然是个实例，那就如const instance = new Object({data: {a:1}})一样，需要有定义的过程，就如定义{data: {a:1}}一样，也需要有生成实例的过程，就如使用new创建instance一样。
定义过程：
创建过程：
P.S. new Vue(), Vue.extend(), Vue.component(), $mount()都分别做了什么，这块内容我还在整理中(To be honest, I am Lazy)，就请尽情期待🥳🥳🥳
根组件实例与子组件实例
说到组件，vue中可根据定位不同划分为两类，一种是整个Vue项目级别的，被称为root component(当我们挂载应用程序时，该组件用作渲染的起点) ，类外一种是子组件级别的，一般就说component。就类似于二叉树中，开头的根节点和其下面的孩子节点。
这两类生成的实例，叫法也不一样，一个叫application instance（在Vue3由createApp生成，Vue2中是new Vue()来生成), 一个叫component instance.
图上的每一个组件都会对应一个instance，且此应用程序中的所有组件实例将共享相同的根组件实例，在实例中你总能通过parent属性向上取到root
生命周期钩子
组件实例要经过一系列初始化过程才能被创建，这过程包括数据响应式处理，模板的编译，把实例渲染到DOM，当数据变化了更新DOM等，那在这个过程中，Vue提供了一些时机可以让开发者执行自定义的代码，这些时机就是lifecycle hook。
平时开发时，需要注意以下俩点：
-
不能使用箭头函数，因为在生命周期中的this要指向当前的组件实例，在初始化过程中，Vue会把this绑定到组件实例上，而箭头函数是没有this的，它的this要到其上级的词法作用域寻找，找不到就会报错了，就会看到
Uncaught TypeError: Cannot read property of undefined，Uncaught TypeError: this.myMethod is not a function之类的错误下图是Vue源码中，调用
callHook(vm, 'beforeCreate')触发的函数，可以看到用call来绑定当前vm -
同步执行，不会等异步结束后再继续。经常在组进内，会看到在lifecycle中使用async/await，而它并不会阻碍当前组件继续初始化下去，这点和路由的异步解析不一样哦。
这里粘贴一张来自官网的lifecycle图示，这图真的是简单明了，每个步骤关键点都在这图中了
P.S. 当使用keep-alive时，还会有activated和deactivated哦~
Reference：v3.vuejs.org/guide/insta…
