zoukankan      html  css  js  c++  java
  • Vue的生命周期

    Vue的生命周期

    Vue生命周期的钩子函数:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        {{name}}
    </div>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                name:"eric"
            },
            methods:{
                init:function(){
                    console.log(123)
                }
            },
            beforeCreate(){
                console.group("BeforeCreate");
                console.log(this.$el);
                console.log(this.name);
                console.log(this.init);
            },
            created(){
                console.group("Created");
                console.log(this.$el);
                console.log(this.name);
                console.log(this.init);
            },
            beforeMount(){
                console.group("BeforeMount");
                console.log(this.$el);
                console.log(this.name);
                console.log(this.init);
            },
            mounted(){
                console.group("Mounted");
                console.log(this.$el);
                console.log(this.name);
                console.log(this.init);
            },
            beforeUpdate(){
                console.group("BeforeUpdate");
                console.log(this.$el);
                console.log(this.name);
                console.log(this.init);
            },
            updated(){
                console.group("Updated");
                console.log(this.$el);
                console.log(this.name);
                console.log(this.init);
            },
            beforeDestroy(){
                console.group("BeforeDestroy");
                console.log(this.$el);
                console.log(this.name);
                console.log(this.init);
            },
            destroyed(){
                console.group("Destroyed");
                console.log(this.$el);
                console.log(this.name);
                console.log(this.init);
            }
        })
    </script>
    </body>
    </html>
    

    Vue的生命周期的钩子 LifeCycle hooks

    数据监听之前:beforeCreate();

    监听数据变化:created();

    虚拟dom加载完成前:beforeMount();

    页面真实加载完成后:mounted();

    数据改变前执行的函数:beforeUpdate();

    数据改变后执行的函数:updated();

    Vue实例销毁前:beforeDestroy();

    Vue实例销毁后:destroyed()s

  • 相关阅读:
    Hexo+Github 搭建一个自己的博客
    vue中sessionStorage存储的用法和问题
    vue 页面刷新
    vue渲染完页面后div滚动条定位在底部
    vue 定义全局函数
    vue filter过滤器用法
    vue中bus.$on事件被多次绑定
    vue中引入jQuery的方法
    vue2.0传值方式:父传子、子传父、非父子组件、路由跳转传参
    vue打包后显示为空白页的解决办法
  • 原文地址:https://www.cnblogs.com/wylshkjj/p/12724350.html
Copyright © 2011-2022 走看看