一、详解生命周期

1. 创建Vue实例钩子函数

  • 这是生命周期钩子的第一个钩子函数，在vue实例创建之前做的事情,在这个方法中我们无法获取实例中的数据和定义的方法

    1. beforeCreate(){
    2.   console.log(this.msg,"beforeCreate");
    3.   console.log(this.add,"beforeCreate");
    4. },

  • 这是生命周期钩子的第二个钩子函数，vue实例已经创建完毕，此时可以获取实例中的数据和定义的方法

  • 不要在这个方法中获取页面元素，即使获取到了也会被后面生命周期钩子函数中所创建页面替换掉
    1. created(){
    2.   console.log(this.msg,"created");
    3.   console.log(this.add,"created");
    4. },

2. 确定页面模板的钩子函数（内存中构建页面并且绑定到dom中）

  • 这是生命周期钩子的第三个钩子函数

  • beforeMount在内存中构建页面，但是这个方法在执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串

    1. beforeMount(){
    2.   console.log(document.getElementById("title"),"beforeMount");
    3. },

  • 这是生命周期钩子的第四个钩子函数

  • 表示内存中的页面已经构建完毕，并且页面的模板数据也已经被完全替换了，会将模板挂载到页面中，用户已经可以看到渲染好的页面了
  • 所以在mounted()方法中我们可以获取到真正的页面
    1. mounted(){
    2.   console.log(document.getElementById("title"),"mounted");
    3. },

3. 数据源发生变化之后，和更新页面相关的

  • 这是生命周期钩子的第五个钩子函数

  • beforeUpdate 是在数据源发生变化之后，页面更新之前执行，所以在这个方法中我们无法获取到最新的页面

    1. beforeUpdate(){
    2.   console.log(document.getElementById('title').innerText,"beforeUpdate")
    3. },

  • updated在数据源变化之后，页面更新之后执行，在这个方法中我们可以获取到最新的页面

    1. updated(){
    2.   console.log(document.getElementById('title').innerText,"beforeUpdate")
    3. },

4. 销毁Vue实例的

  • 销毁实例之前

    1. beforeDestroy(){
    2.   //可以在这个方法中做一些数据保存工作
    3. },

  • 销毁实例之后 ```javascript destroyed(){

},

  2. <a name="39228266"></a>
  3. ## 二、代码各个阶段
  4. ```javascript
  5. var myVue=new Vue({
  6.         el:"#app-8",
  7.         data:{
  8.             data:"aaaaa",
  9.             info:"nono"
  10.         },
  11.         //数据没有 元素没有
  12.         beforeCreate:function(){
  13.             console.log("创建前========")
  14.             console.log(this.data)
  15.             console.log(this.$el)
  16.         },
  17.         //数据有 元素没有
  18.         created:function(){
  19.             console.log("已创建========")
  20.             console.log(this.info)
  21.             console.log(this.$el)
  22.         },
  23.         //数据有 元素有 虚拟dom
  24.         beforeMount:function(){
  25.             console.log("mount之前========")
  26.             console.log(this.info)
  27.             console.log(this.$el)
  28.         },
  29.         //数据有 元素有，真实dom
  30.         mounted:function(){
  31.             console.log("mounted========")
  32.             console.log(this.info)
  33.             console.log(this.$el)
  34.         },
  35.         beforeUpdate:function(){
  36.             console.log("更新前========");
  37.         },
  38.         updated:function(){
  39.             console.log("更新完成========");
  40.         },
  41.         beforeDestroy:function(){
  42.             console.log("销毁前========")
  43.             console.log(this.info)
  44.             console.log(this.$el)
  45.         },
  46.         destroyed:function(){
  47.             console.log("已销毁========")
  48.             console.log(this.info)
  49.             console.log(this.$el)
  50.         }
  51.     })
  1. created()     --组件创建时
  2. mounted()     --组件被装载时
  3. updated()     --data的数据更新，update生命周期函数会触发
  4. destroyed()   --组件被销毁时     a-b b页面显示
  6. //初次加载会触发
  7. created()   mounted()
  8. //a-b  b页面会显示
  9. destroyed()
  10. //a-b b-a  a页面会显示
  11. created()   mounted()

三、图解生命周期

四、生命周期，事件监听 - 图1

四、生命周期，事件监听 - 图2

四、事件监听

  1. <template>
  2.   <div class="about">
  3.     <h1 ref="dom">This is an about page</h1>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   data(){
  9.     return{
  10.       msg:"hello world"
  11.     }
  12.   },
  13.   beforeCreate(){},
  14.   created(){},
  15.   beforeMount(){},
  16.   mounted(){
  17.     console.log(this.$refs.dom)
  18.     window.addEventListener("scroll",this.go)
  19.   },
  20.   beforeUpdate(){},
  21.   updated(){},
  22.   beforeDestroy(){},
  23.   destroyed(){
  24.     window.removeEventListener("scroll",this.go)
  25.   },
  26.   methods:{
  27.     go(){
  28.       console.log(1)
  29.     }
  30.   }
  31. }
  32. </script>
  33. <style>
  34.   .about{
  35.     height:2000px;
  36.   }
  37. </style>

image.png

五、使用建议

  • beforeCreate :加载loading事件
  • created :结束loading，还做一些初始化，实现函数自执行
  • mounted :在这发起axios请求，拿回数据，配合路由钩子做一些事情
  • beforeDestory： destoryed :当前组件已被删除，清空相关内容
    综上：建议你吧页面进入出现加载框写在beforeCreate,请求接口数据写在created,

六、Vue.nextTick()

该方法会在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
应用场景：

  • 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

  • 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

    1. created() {
    2.    //改变数据
    3.   vm.message = 'changed'
    5.   //想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
    6.   console.log(document.getElementById('testCount').innerHTML) // 并不会得到'changed'
    8.   //这样可以，nextTick里面的代码会在DOM更新后执行
    9.   Vue.nextTick(function(){
    10.       console.log(document.getElementById('testCount').innerHTML) //可以得到'changed'
    11.   })
    12. },

    6-1 nextTick原理

    6-1-1 异步说明

    Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

具体来说，异步执行的运行机制如下。

  1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
  2. 主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
  3. 一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
  4. 主线程不断重复上面的第三步。

下图就是主线程和任务队列的示意图。3835190331-580cd2a9443a7_articlex.png

6-1-2 事件循环说明

简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。图解：
hei.jpg
事件循环：
第一个 tick（图例中第一个步骤，即’本次更新循环’）：

  1. 首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。
  2. Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

第二个 tick（图例中第二个步骤，即’下次更新循环’）：

  • 同步任务执行完毕，开始执行异步 watcher 队列的任务，更新 DOM 。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel 方法，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

第三个 tick（图例中第三个步骤）：
此时就是文档所说的：下次 DOM 更新循环结束之后
此时通过 Vue.nextTick 获取到改变后的 DOM 。通过 setTimeout(fn, 0) 也可以同样获取到。

总结事件循环 ：
同步代码执行 -> 查找异步队列，推入执行栈，执行Vue.nextTick[事件循环1] ->查找异步队列，推入执行栈，执行Vue.nextTick[事件循环2]…
异步是单独的一个tick，不会和同步在一个 tick 里发生，也是 DOM 不会马上改变的原因。

6-2 nextTick案例

  1. //点击按钮显示文本输入框，同时让其获取焦点
  2. methods:{
  3.    showsou(){
  4.       this.showit = true
  5.       this.$nextTick(function () {
  6.         // DOM 更新了
  7.         document.getElementById("keywords").focus()
  8.       })
  9.     }
  10. }