Vue 的实例是有生命周期的，在 Vue 的实例创建的过程中会经历一系列关键的过程，如数据观测、模板编译、挂载 DOM 元素、数据更新导致 DMO 更新、以及实例销毁，当 Vue 创建实例执行到这些关键步骤时，可以执行一些钩子函数，我们称这些函数为生命周期函数；学习 Vue 生命周期的钩子函数，要掌握每个钩子函数中 Vue 的实例所处的状态，以及我们在这些钩子中能干啥

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6. </head>
    7. <body>
    8. <div id="app">
    9.   <div>hahahhahah</div>
    10.   <button @click="fn">{{msg}}</button>
    11. </div>
    13. <script src="vue.js"></script>
    14. <script>
    15.   let vm = new Vue({
    16.     // el: '#app',
    17.     data: {
    18.       msg: 'hello'
    19.     },
    20.     methods: {
    21.       fn() {
    22.         console.log('hello world');
    23.       }
    24.     },
    25.     beforeCreate() {
    26.       // 在实例初始化以后，数据观测、watch 配置之前被调用；data 中的数据还没有代理到 vm 上，侦听器没有配置；
    27.       // 不能通过 this 访问 data 中的数据；
    28.       console.log(1);
    29.       // console.log(this);
    30.       console.log(this.msg); // undefined
    31.       console.log(this.$el); // this.$el 是根 DOM 节点，此时还没挂载，所以是 undefined
    32.     },
    33.     created() {
    34.       // 在实例创建完成后被调用，此时数据观测、计算属性、事件绑定、 watch 都已配置完成；可以通
    35.       // 过 this 访问 data 中的数据；
    36.       // 但是还没有挂载到根 DOM 元素，所以 this.$el 不可见
    37.       console.log(2);
    38.       console.log(this.msg); // hello
    39.       console.log(this.$el); // undefined
    41.       // 我们一般在这个钩子中发送 ajax 请求
    42.     },
    43.     beforeMount() {
    44.       // 在挂载之前被调用，创建虚拟 DOM（Virtual DOM）；把模板编译成虚拟 DOM，虚拟 DOM 不是真正的 DOM 元素，而是 JS 对象，这些对象中包含了它变成真正的 DOM 元素所必须的东西；
    46.       //模板： <div @click="fn"> <span>{{msg}}</span> </div>
    47.       // VNode 如下
    48.       let obj = {
    49.         tagName: 'div',
    50.         innerText: '',
    51.         children: [
    52.           {
    53.             tagName: 'span',
    54.             innerText: 'hello'
    55.           }
    56.         ],
    57.         event: {
    58.           click: function() {}
    59.         }
    60.       };
    61.       // 挂载后变成真实的元素：<div> <span>hello</span> </div>
    62.       console.log(3);
    63.       console.log(this.msg); // hello
    64.       console.log(this.$el); // div#app 在这里就能访问 this.$el
    65.     },
    66.     mounted() {
    67.       // Vue 把虚拟 DOM 挂载到真实的 DOM 元素上
    68.       // 如果我们操作 DOM，一般在这个钩子中获取 DOM 元素
    69.       // ajax 也可以在这个钩子中发送
    70.       console.log(4);
    71.       console.log(this.msg); // hello
    72.       console.log(this.$el); // div#app 这里面的所有模板语法都被替换成真实的数据了
    73.     },
    74.     beforeUpdate() {
    75.       // 只有数据发生改变的时候才会触发这个钩子，并且发生在更新视图之前；
    76.       console.log(5);
    77.     },
    78.     updated() {
    79.       // 由于数据更新导致的虚拟 DOM 重新渲染和打补丁（把更改的部分修改成最新的视图），在这之后会调用该钩子；
    80.       console.log(6);
    81.     },
    82.     beforeDestroy() {
    83.       // 在 Vue 的实例被销毁之前调用，此时实例中所有的东西都是可用的；
    84.       // 如果页面（组件中）有定时器，要在这个钩子中清除定时器；
    85.       console.log(7);
    86.     },
    87.     destroyed() {
    88.       // Vue 的实例被销毁之后调用，数据不再是响应式的，watch 也会被销毁；如果修改数据，页面不会再更新了。
    89.       console.log(8);
    90.     }
    91.   });
    93.   // vm.$set(vm, 'msg', 'HELLO WORLD'); // 修改数据才会触发 beforeUpdate 和 updated
    95.   // vm.$destroy() 销毁 Vue 实例的方法；
    97.   vm.$mount('#app'); // vm.$mount('根DOM节点') 手动挂载，当需要动态挂载的时候需要这个方法；
    99.   // 什么时候会销毁？
    100.   // 1. 动态组件切换时，被切走的那一个组件会销毁；
    101.   // 2. 单页面应用切换路由时，上一个组件会被销毁；
    104. </script>
    106. </body>
    107. </html>