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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。