数据挂载mounted

Vue完成模板的解析并把“初始真实的DOM元素”（不包括后期更新DOM）放入页面后(挂载完毕)调用mounted

<h2:style="{opacity}">Vue</h2>  // {opacity: opacity} key与value变量名相同时可简写为{opacity}

new Vue({
    el:'#root',
    data:{
        opacity:1
    },
    methods:{
    },
    mounted(){
        console.log( ' mounted' ,this)
        setInterva1(() => {
            this.opacity -= 0.01
            if(this popacity <= 0) this.opacity = 1
        },16)
    }
})

生命周期函数中的this指向是vm 或 组件实例对象

四对生命周期函数：

1.数据代理前beforeCreated

此时无法通过vm访问到data中的数据与methods中的方法

2.数据代理后created

此时可以通过vm访问到data中的数据与methods中配置的方法

3.数据挂载前beforeMounted

1.页面呈现的是未经Vue编译的DOM结构
2.所有对DOM的操作，最终都不奏效

4.数据挂载后mounted

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

5.数据更新前beforeUpdate

此时数据是新的，但页面是旧的，即页面尚末和数据保持同步

6.数据更新后updated

此时数据是新的，页面也是新的，即页面和数据保持同步

7.VM实例销毁前beforeDestroy

此时vm中所有的data、methods指令等，都处于可用状态，马上要执行销毁过程，一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作

8.VM实例销毁后destroyed

常用的生命周期钩子:

1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]

生命周期图示：

声明：下图引用自“尚硅谷”仅作为笔记记录，侵权删