vue生命周期

时间 2019-12-08

标签 vue 生命周期繁體版

原文原文链接

beforeCreate => 组件实例刚刚被建立，属性和方法都没有；
create => 属性和方法已经绑定成功，但DOM尚未生成；
beforeMount => 模板编译以前；
mounted => 模板已经编译完成，相似以前的ready,就是模板引擎数据有没有展现；有用
beforeUpdate => 组件（数据）更新以前，用于监测实例内的变化；有用
updated => 组件更新完毕;
beforeDestroy => 组件销毁以前;
destroyed => 组件销毁以后;

<body>
    <div id="app">
        <input type="button" value="更新数据" @click="update" />
        <input type="button" value="销毁组件" @click="destroy" />
        {{ msg }}
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            msg: 'Vue2.x 生命周期'
        },
        methods: {
            update(){
                this.msg = '点击了数据更新吧'
            },
            destroy(){
                this.$destroy();//销毁组件
            }
        },
        beforeCreate() {
            console.log('vue刚刚被建立');//尚未属性和方法
        },
        created() {
            console.log('vue实例已经建立完成');//属性和方法已经绑定成功，DOM尚未生成
        },
        beforeMount() {
            console.log('模板编译以前');
        },
        mounted() {
            console.log('模板已经编译完成');//相似以前的ready,就是模板引擎数据有没有展现
        },
        beforeUpdate() {
            console.log('组件更新以前');
        },
        updated() {
            console.log('组件更新完毕');
        },
        beforeDestroy() {
            console.log('组件销毁以前');
        },
        destroyed() {
            console.log('组件销毁以后');//组件销毁以后，更新数据就无效了
        }
    });
</script>

页面效果如图：javascript