• Vue(十)生命周期


    Vue生命周期
    vue实例从创建到销毁的过程,称为生命周期,共有八个阶段
      <script>
        window.onload=function(){
                let vm = new Vue({
                    el:'#app',
                    data:{
                        msg:'Hello World ! '
                    },
                    methods:{
                        update(){
                            this.msg='Hello Kitty!';
                        },
                        destroy(){
                            // this.$destroy();
                            vm.$destroy();
                        }
                    },
                    beforeCreate(){
                        alert('组件实例刚刚创建,还未进行数据观测和事件配置');
                    },
                    created(){  //常用!!!
                        alert('实例已经创建完成,并且已经进行数据观测和事件配置');
                    },
                    beforeMount(){
                        alert('模板编译之前,还没挂载');
                    },
                    mounted(){ //常用!!!
                        alert('模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示');
                    },
                    beforeUpdate(){
                        alert('组件更新之前');
                    },
                    updated(){
                        alert('组件更新之后');
                    },
                    beforeDestroy(){
                        alert('组件销毁之前');
                    },
                    destroyed(){
                        alert('组件销毁之后');
                    }
                })
            }
    
        </script>
    
    <body>
    
        <div id="app">
            
            {{msg}}
    
            <br>
    
            <button @click="update">更新数据</button>
            <button @click="destroy">销毁组件</button>
        
        </div>
    
    </body>   
     
  • 相关阅读:
    学习路径_Linux
    学习路径_stm32
    大小端判断
    linux下dbg
    vs code使用技巧实际总结
    书单(updating...)
    [转]单点登录原理
    [转]nginx基本配置与参数说明
    [转]linux 网络配置 (配置/etc/sysconfig/network-scripts/ifcfg-ethx)
    [转]nginx的安装与使用
  • 原文地址:https://www.cnblogs.com/yulingjia/p/8257285.html
Copyright © 2020-2023  润新知