VUE框架基础--------生命周期理解

文章目录

  • vue的生命周期
    • 1. 生命周期
    • 2. 周期阶段
    • 3. 生命周期详解
      • 1. 创建阶段
        • 1. beforeCreate
        • 2. created
      • 2. 挂载阶段
        • 1. beforeMount
        • 2. mounted
      • 3. 运行阶段
        • 1. beforeUpdate
        • 2. updated
      • 4. 摧毁阶段
        • 1. beforeDestroy
        • 2. destroyed
    • 4. 周期Demo

vue的生命周期

1. 生命周期

  • Vue实例从创建到销毁的过程,就是生命周期
  • 创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、销毁等一系列过程

2. 周期阶段

Vue生命周期可以简单分为四个阶段:

  • 创建阶段----> beforeCreate,created
  • 挂载阶段----> beforeMount,mounted
  • 运行阶段----> beforeUpdate,updated
  • 销毁阶段----> beforeDestroy,destroyed

3. 生命周期详解

1. 创建阶段

1. beforeCreate

  • beforeCreate是new Vue之后触发的第一个钩子函数,此时data、methods、computed、以及watch上的数据和方法还未初始化,都不能被访问
  • 在初始化实例之后,数据观测和event\watcher事件配置之前被调用

2. created

  • 数据据观测、property和方法的运算,watch、event事件回调
  • data和methods初始化完成,异步请求适合在此钩子函数中调用
  • 此时无法与Dom交互,如果必须则用this.$nextTick来访问

2. 挂载阶段

1. beforeMount

  • template模板已经导入render函数编译,但未进行渲染

2. mounted

  • DOM已经完成挂在,双向数据绑定,可以$refs属性对DOM进行操作
  • 如果希望整个视图渲染完毕
mounted: function() {
     
	this.$nextTick(function(){
     
	})
}

3. 运行阶段

1. beforeUpdate

  • beforeUpdate发生在响应式数据更新之前,虚拟DOM重新渲染之前被触发,
  • 你可以在当前阶段进行更改数据,不会造成重新渲染,但会再次触发当前钩子函数

2. updated

  • 此时DOM已经更新,现在可以执行依赖于DOM的操作
  • 如果要相应状态改变,最好使用计算属性或 watcher 取而代之。最好不要在此期间更改数据,因为这可能会导致无限循环的更新。
  • 如果你希望等到整个视图都重绘完毕,可以在 updated 里使用 vm.$nextTick。
updated: function () {
     
  this.$nextTick(function () {
     
   			// 代码将在整个视图重新渲染后执行
  })
}

4. 摧毁阶段

1. beforeDestroy

  • 实例销毁之前,在这期间实例完全可以被使用
  • 在这时进行清楚定时器的操作

2. destroyed

  • 实例被销毁、实例也被销毁、事件监听器被移除
生命周期钩子函数 实例处于阶段描述 能否获取到el (this.$el) 能否获取到data (this.xxx) 能否使用methods中的方法 (this.xxx())
beforeCreate 创建前 实例已初始化,但数据观测, watch/event 事件回调还未配置 获取不到
created 创建后 已完成如下配置,数据观测 (data observer),property 和方法的运算,watch/event 事件回调 获取不到
beforeMount 挂载前 dom已初始化,但并未挂载和渲染
mounted 挂载后 dom已完成挂载和渲染 能
beforeUpdate 更新前 数据已改变,但dom为更新 能
updated 更新后 dom已更新
beforeDestroy 销毁前 实例销毁前,实例仍然可用
destroyed 销毁后 实例已销毁,所有指令被解绑,事件监听器被移除,子实例都被销毁

4. 周期Demo

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{
     {
      message }}</p>
    <button @click="change()">change改变数据</button>
    <button @click="destr()">destroy销毁实例</button>
    <hr>
    <button @click="getDom()">获取实例dom</button>
    <button @click="getData()">获取实例data</button>
    <button @click="getMethods()">获取实例methods</button>
</div>

<script type="text/javascript">
    var obj = {
     "el: ": this.$el, "data: ":this.data}

    function Life(name,el,data,methods){
     
        this['生命周期钩子函数'] = name;
        this['el (实例挂载的dom)'] = el;
        this['data (实例的数据)'] = data;
        this['methods (实例中的方法)'] = methods;
    }

    var app = new Vue({
     
        el: '#app',
        data: {
     
            message: 66
        },
        beforeCreate: function () {
     
            var obj = new Life('beforeCreate',this.$el,this.message,this.test)
            console.table({
     '创建前':obj})
        },
        created: function () {
     
            var obj = new Life('created',this.$el,this.message,this.test)
            console.table({
     '创建后':obj})
        },
        beforeMount: function () {
     
            var obj = new Life('beforeMount',this.$el,this.message,this.test)
            console.table({
     '挂载前':obj})

            alert('当前阶段处于 beforeMount ,此时虚拟 dom 已经创建完成,即将开始渲染。')
        },
        mounted: function () {
     
            // 实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。
            var obj = new Life('mounted',this.$el,this.message,this.test)
            console.table({
     '挂载后':obj})
        },
        beforeUpdate: function () {
     
            // 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
            var obj = new Life('beforeUpdate',this.$el,this.message,this.test)
            console.table({
     '数据更新,DOM 重新渲染前':obj})

            alert('当前阶段处于 beforeUpdate ,此时实例中的数据已更新,但 dom 上的数据还未更新。')
        },
        updated: function () {
     
            // 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
            var obj = new Life('updated',this.$el,this.message,this.test)
            console.table({
     '数据更新,DOM 重新渲染后':obj})

            // 注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 updated 里使用 vm.$nextTick:

            // 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
            // 它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
            this.$nextTick(function () {
     
                  // DOM 现在更新了
                  // `this` 绑定到当前实例
                  console.log('这是 update 中的回调')
                })

        },
        beforeDestroy: function () {
     
            this.change()
            // 实例销毁之前调用。在这一步,实例仍然完全可用。
            var obj = new Life('beforeUpdate',this.$el,this.message,this.test)
            console.table({
     '实例销毁前,此时实例还完全可用':obj})
        },
        destroyed: function () {
     
            this.message = 123
            // 实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
            var obj = new Life('beforeUpdate',this.$el,this.message,this.test)
            console.table({
     '实例销毁后':obj})

            this.test()
        },
        methods: {
     
            test() {
     
                console.log('666')
            },
            change() {
     
                this.message++;
                console.log(this.message)
            },
            destr() {
     
                this.$destroy();
            },
            getDom() {
     
                console.log(this.$el)
            },
            getData() {
     
                console.log(this.message)
            },
            getMethods() {
     
                console.log(this.test)
            }
        }
    })
</script>
</body>
</html>

你可能感兴趣的:(VUE框架,vue)