Vue: 生命周期

Posted 2022-04-23 ycherry

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue: 生命周期相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>title</h1>
    <button @click="title = ‘changed‘">Update title</button>
    <button @click="destory">Destory</button>
  </div>
  <script>
    new Vue(
      el: ‘#app‘,
      data: 
        title: ‘Vuejs instance‘
      ,
      methods: 
        destory: function() 
          this.$destory();
        
      ,
      // 初始化的时候调用，调用顺序为：beforeCreate-> created-> beforeMount -> mounted
      beforeCreate: function() 
        console.log(‘before created called‘);
      ,
      created: function() 
        console.log(‘created called‘);
      ,
      beforeMount: function() 
        console.log(‘beforeMount called‘);
      ,
      mounted: function() 
        console.log(‘mounted called‘);
      ,
      // beforeUpdate/updated data更新的时候调用，如果数据不更新，则不调用
      beforeUpdate: function() 
        console.log(‘beforUpdate called‘);
      ,
      updated: function() 
        console.log(‘updated called‘);
      ,
      // destory调用以后，所有的data不再受vuejs控制，意思是destory以后所有的方法都不再有用，移除了所有的js逻辑
      beforeDestory: function() 
        console.log(‘befor destory called‘);
      ,
      destoryed: function() 
        console.log(‘destoryed called‘);
      
    );
  </script>
</body>

</html>

以上是关于Vue: 生命周期的主要内容，如果未能解决你的问题，请参考以下文章