Vue语法

转载于 2019-08-25 22:38:00 发布

· 91 阅读

0 ·

版权

原文链接：http://www.cnblogs.com/danmao/p/11409742.html

文章标签：

#javascript #ViewUI

本文深入探讨了Vue.js组件从创建到销毁的整个生命周期，详细解释了每个生命周期钩子函数的作用和调用时机，包括beforeCreate、created、beforeMount、mounted等，并通过一个具体示例展示了如何利用这些钩子进行状态管理和资源操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 生命周期

<template>
    <div id="app1">
        <h1>{{title}}</h1>
        <button @click="randowTitle()">改变title</button>
        <button @click="destoryVm()">销毁实例</button>
    </div>
</template>

<script type="text/javascript">
    export default{
        name:"app1",
        data:function(){
            return {title:"hello"};
        },
        methods:{
           randowTitle:function(){
               this.title='hello' +['China','World','Universe'][Math.floor(Math.random()*2.999)]
           },
           destoryVm:function(){
               this.$destroy();
           }
        },
        beforeCreate(){
            console.log('before create')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('mounted')
        },
        beforeUpdate(){
            console.log('beforeUpdate')
        },
        updated(){
            console.log('updated')
        },
        beforeDestroy(){
            console.log('beforeDestroy')
        },
        destroyed(){
            console.log('destroyed')
        }
    }
</script>

转载于:https://www.cnblogs.com/danmao/p/11409742.html