1.     vue生命周期: 一个vue对象从创建到销毁所经历的整个过程, 在这个过程中, vue会在特定的时刻主动调用一些函数, 这些函数叫做生命周期函数 或 生命周期钩子
    1. <body>
    3.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    4.     <div id='myApp'>
    5.         <button @click="()=>{obj.age++}">{{obj.age}}</button>
    6.     </div>
    7.     <script>
    8.         var vm = new Vue({
    9.             el: '#myApp',   // 根标签
    10.             data: { obj: {age:20} },      // 动态数据
    11.             methods: { },   // 自定义函数
    12.             filters: {},    // 过滤器
    13.             computed: {},   // 计算属性
    14.             watch: {},      // 监视器
    15.             // vue中除了以上几个常用字段之外,还提供了以下8个生命周期函数
    16.             beforeCreate() {
    17.                 // beforeCreate调用时, 栈内存已经确定了一个内存地址,用于存放这vue对象, 但此时,vue对象虽然有内存地址,但还未创建完成, 里边的数据还未定义, 所以,this有值, this.obj没值
    18.                 console.log(1, "vue对象还没有创建", this, this.obj)
    19.             },
    20.             created() {
    21.                 // 一般在这里发起ajax请求, 得到数据, 赋值到data中
    22.                 console.log(2, "vue对象已经创建", this, this.obj)
    23.                 fetch("./goodList.json").then(res=>{
    24.                     return res.json()
    25.                 }).then(res=>{
    26.                     console.log(res)
    27.                 })
    28.             },
    29.             beforeMount() {
    30.                 console.log(3, "vue中的数据还没有渲染到视图上")
    31.             },
    32.             mounted() {
    33.                 console.log(4, "vue中的数据已经渲染到视图上")
    34.             },
    35.             beforeUpdate() {
    36.                 console.log(5, 'data数据更新之前')
    37.             },
    38.             updated() {
    39.                 console.log(6, 'data数据更新之后')
    40.             },
    41.             beforeDestroy() {
    42.                 // 如果一个页面中有window的事件监听, 或计时器, 一定要在销毁时停掉
    43.                 console.log(7, "vue对象将要被销毁")
    44.             },
    45.             destroyed() {
    46.                 console.log(8, "vue对象已经被销毁")
    47.             }
    49.             // 总结: vue的生命周期钩子
    50.             // beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDeatroy, destroyed 
    51.         })
    52.         // 2秒后, 销毁vue对象
    53.         setTimeout(() => {
    54.             vm.$destroy()
    55.         }, 2000);
    56.         setTimeout(() => {
    57.             // vue对象销毁后, 依然可以调用, 但更新的生命周期函数不存在了,无法调用
    58.             console.log(vm, vm.obj.age)
    59.         }, 3000);
    60.     </script>
    61. </body>