Skip to content

mounted

第一次把东西放到页面叫挂载

html
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'Vue',
            opacity:1
        },
        methods: {
        },
        // Vue完成模板的解析并把初始的真实DOM放入页面后(挂载完毕)调用mounted
        mounted() {
            console.log('mounted');
            setInterval(()=>{
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            },16)
        },
    })
</script>

生命周期函数

Vue会在一些关键的时期,帮我调用的一些函数。这些函数统称为生命周期函数,生命周期钩子。

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

beforeCreate

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

created

可以访问data和methods

beforeMount

mounted

beforeUpdate

此时数据是新的,但是页面还没更新。

updated

beforeDestroy

destroyed