Vue生命周期

生命周期

• 生命周期：

  • 也叫生命周期回调函数、生命周期函数、生命周期钩子
  • 是vue在关键时刻给我们调用的一些特殊的名称函数
  • 生命周期函数的名字不可以更改，但函数具体内容是我们自己按照需求编写
  • 生命周期函数的this指向的是vm或组件实例对象

• 常用的生命周期钩子

  • 1、mounted：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
  • 2、beforeDestroy：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作

• 关于销毁vue实例

  • 销毁后借助vue开发者工具看不到任何信息
  • 销毁后自定义事件会失效，原生Dom事件依然有效
  • 一般不会再beforeDestroy操作数据

先看一下vue给我们提供的图

​ 为了方便生命周期的演示，在这里写一个基础的样例，演示到哪个阶段代码依次添加即可。以下生命周期均和methods同级关系

    <div id="root">
        <h1>N的值是{{n}}</h1>
        <button @click="add">n+1</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                n:1
            },
            methods:{
                add(){
                    this.n++
                }
            }
        })
    </script>

1、创建

1.1、beforeCreate()

• beforeCreate()
  • 在此阶段无法通过VM访问到data中的数据和methods中的方法

//无法通过VM访问到data中的数据和methods中的方法
beforeCreate(){
                console.log('beforeCreate');
                console.log(this);
                debugger;
}

1.2、created()

• created（）
  • 可以通过vm访问到data中的数据和methods中的方法

            //可以通过vm访问到data中的数据和methods中的方法
            created(){
                console.log('created');
                console.log(this);
                debugger;
            }

2、挂载

2.1、beforeMount()

• beforeMount()
  • 页面呈现的是未经Vue编译的Dom结构
  • 所有对Dom的操作均不奏效

beforeMount(){
        console.log('beforeMount');
        console.log(this);
        debugger;
}

​ 看页面结构

​ 然后我们操作一下Dom

​

​ 一旦我们结束了debug，我们可以看一下变化。

​ 产生这个是原因是因为Vue把内存中的虚拟Dom变成了真实Dom。

2.2、mounted()

• mounted()
  • 页面中呈现的是经过Vue编译的Dom
  • 对Dom的操作均有效（尽可能避免），至此初始化过程结束。
  • 一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作

            mounted(){
                console.log('mounted');
                console.log(this);
				//document.querySelector('h1').innerText='hah'
                debugger
            }

​ 这里如果操作dom元素，页面会直接变化

3、更新

3.1、beforeUpdate()

• beforeUpdate()
  • 当数据被改变时，被触发
  • 此时：数据是新的，但页面是旧的。即页面尚未和数据保持同步

beforeUpdate(){
       console.log('beforeUpdate');
       console.log(this.n);
       debugger
}

3.2、updated()

• updated()
  • 当数据被改变时，被触发
  • 此时：数据是新的，但页面是新的。即页面和数据保持同步

updated(){
      console.log('updated');
      console.log(this.n);
      debugger
}

4、销毁

4.1、beforeDestroy()和destroyed()

• 当vm.$destroy()被调用时
• beforeDestroy()
  • vm所有的data、methods、指令等等，都处于可用状态、马上执行销毁过程。
  • 一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作
• destroyed()

  <div id="root">
        <h1>N的值是{{n}}</h1>
        <button @click="add">n+1</button>
        <button @click="bye">点我销毁VUE</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                n:1
            },
            methods:{
                add(){
                    this.n++
                },
                bye(){
                    console.log('bye');
                   this.$destroy() 
                }
            },
            //vm所有的data、methods、指令等等，都处于可用状态、马上执行销毁过程。
            //一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作
            beforeDestroy(){
                console.log('beforeDestroy');

            },
            destroyed(){
                console.log('destroyed');
            }
        })
    </script>

​ 当我触发点击事件销毁vue，会出现以下结果

​