22vue生命周期

vue生命周期

一、引出生命周期

总结

生命周期:
    1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
    2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
    3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
    4.生命周期函数中的this指向是vm或组件实例对象。

人的一生(人的生命周期)︰
    呱呱坠地了 ===> 检查身体各项指标。
    学会说话了
    学会走路了

vm的一生(vm的生命周期)∶
	????了	 ===> 调用????豳数。
	挂载完毕了 ===> 调用mounted函数。
	????了	 ===> 调用????豳数。

实例

<div id="root">
    <h3 v-if="flags">你好</h3>
    <h3 :style="{opacity: opacity}">欢迎学习vue</h3>
</div>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            flags:false,
            opacity:1,
        },

        //Vue完成模板的解析并把初始的(第一次)真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted(){
            console.log(this)
            setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) this.opacity = 1;
            }, 16);
        }
    });
    
    // 不推荐
    // setInterval(() => {
    //     vm.opacity -= 0.01;
    //     if(vm.opacity <= 0) vm.opacity = 1;
    // }, 16);
</script>

生命周期流程

常用的生命周期钩子:
    1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】.
    2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
    
关于销毁Vue实例
    1.销毁后借助Vue开发者工具看不到任何信息。
    2.销毁后自定义事件会失效,但原生DOM事件依然有效。
    3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

beforeUpdate：数据已经更新，但是页面还未来得及更新。（数据新，页面旧）

beforeDestory && destroy: 可以获取到数据，可以执行数据更改，但是不会触发更新操作;(命令执行，页面已经不被vue接管)

生命流程钩子

• 创建

  • beforeCreate
  • created
    • （完成） 数据监视&&数据代理

• 挂载

  • beforeMount

  • mounted

    • Vnode-->Rnode

    • 开始时操作， 发送 ajax 请求, 启动定时器等异步

• 更新

  • beforeUpdate
    • 数据更新，页面来不及更新
  • updated

• 销毁

  • beforeDestory
    • 可获取可修改数据，但不被vue更新页面
    • 结束时操作，做收尾工作, 如: 清除定时器
  • destory