2021-7-12 VUE的生命周期

挂载：

beforeCreate

created

beforeMount

mounted：el挂载到实例上时运行

更新：

beforeUpdate

updated

销毁：

beforeDestory

destoryed

各自出现的时机如下列代码所示：在log中查看

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
  <div>{{msg}}</div>
  <input type="button" name="" value="更新" @click="update">
  <input type="button" name="" value="销毁" @click="destory">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
  el: '#app',
  data: {
    msg:''
  },
  methods:{
    update:function(){
      this.msg="new";
    },
    destory:function(){
      this.$destroy();
    }
  },
  beforeCreate:function(){
    console.log("beforeCreate");
  },
  created:function(){
    console.log("created");
  },
  beforeMount:function(){
    console.log("beforeMount");
  },
  mounted:function(){
    console.log("mounted");
  },
  beforeUpdate:function(){
    console.log("beforeUpdate");
  },
  updated:function(){
    console.log("updated");
  },
  beforeDestroy:function(){
    console.log("beforeDestory");
  },
  destroyed:function(){
    console.log("destroyed");
  }
})
</script>
</body>
</html>
View Code

 

posted @ 2021-07-12 10:21  月长生  阅读(62)  评论(0)    收藏  举报