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

    它可以总共分为8个阶段:

    beforeCreate(创建前),

    created(创建后),

    beforeMount(载入前),

    mounted(载入后),

    beforeUpdate(更新前),

    updated(更新后),

    beforeDestroy(销毁前),

    destroyed(销毁后)

    然后用一个实例的demo 来演示一下具体的效果:

    <div id=app>{{a}}</div>

    <script>

    var myVue = new Vue({          

    el: "#app",          

    data: {

    a: "Vue.js"        

    },         

     beforeCreate: function() { 

              console.log("创建前")            

    console.log(this.a)            

    console.log(this.$el)          

    },         

     created: function() {

                    console.log("创建之后");            

    console.log(this.a)            

    console.log(this.$el)          

    },         

     beforeMount: function() {            

    console.log("mount之前")            

    console.log(this.a)            

    console.log(this.$el)          

    },          

    mounted: function() {            

    console.log("mount之后")            

    console.log(this.a)            

    console.log(this.$el)          

    },          

    beforeUpdate: function() {            

    console.log("更新前");            

    console.log(this.a)            

    console.log(this.$el)          

    },          

    updated: function() {            

    console.log("更新完成");            

    console.log(this.a);            

    console.log(this.$el)          

    },          

    beforeDestroy: function() {            

    console.log("销毁前");            

    console.log(this.a)            

    console.log(this.$el)            

    console.log(this.$el)          

    },          

    destroyed: function() {           

    console.log("已销毁");          

    console.log(this.a)          

    console.log(this.$el)          

    }   

      });  

    </script>

     

     在beforeUpdate,可以监听到data的变化但是view层没有被重新渲染,view层的数据没有变化。等到updated的时候 view层才被重新渲染,数据更新。

  • 相关阅读:
    C#根据用户输入字符串,输出大写字母有几个,小写字母有几个
    C#把大写英文变成小写英文,把小写英文变成大写英文
    C#中去除字符串里的多个空格且保留一个空格
    工作中遇到的99%SQL优化,这里都能给你解决方案(二)
    MySQL如何选择合适的索引
    工作中遇到的99%SQL优化,这里都能给你解决方案
    周期性线程池与主要源码解析
    Mysql关键字Explain 性能优化神器
    Mysql Explain详解
    Executor线程池只看这一篇就够了
  • 原文地址:https://www.cnblogs.com/panzai/p/12653649.html
Copyright © 2011-2022 走看看