Vue组件完整生命周期（按顺序,1.创建；2.挂载；3.更新；4.销毁）

本文链接：https://blog.csdn.net/qq_43371287/article/details/100540183

Vue组件完整生命周期（按顺序,1.创建；2.挂载；3.更新；4.销毁）
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div id="app">
           <!-- <App></App> -->
       </div>
       <script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
       <script type="text/javascript">
           /*
               生命周期的钩子函数   函数
               beforeCreate
               created
               beforeMount
               mounted
               beforeUpdate
               updated
               activated
               deactivated
               beforeDestroy
               destroyed
           */
           var Test = {
               data: function() {
                   return {
                       msg: 'hello world'
                   }
               },
               template: `
                   <div>
                       <div>{{msg}}</div>
                       <button @click = 'changeHandler'>改变</button>
                   </div>
               `,
               methods: {
                   changeHandler() {
                       this.msg = this.msg + '哈哈哈';
                   }
               },
               beforeCreate: function() {
                   // 组件创建之前
                   console.log('beforeCreate',document.getElementById('app'));
                   console.log('beforeCreate',this.msg);
               },
               created: function() {
                   // 组件创建之后

                   // 使用该组件，就会调用created方法 在created这个方法中可以操作后端的数据，数据响应视图
                   // 应用： 发起ajax请求
                   console.log('created',this.msg);
                   this.msg = '改变了吧'
               },
               beforeMount: function() {
                   // 挂载数据到DOM之前会调用
                   console.log('beforeMount',document.getElementById('app'));
               },
               mounted: function() {
                   // 挂载数据到DOM之后会调用  Vue 作用以后的DOM
                   console.log('mounted',document.getElementById('app'));
               },
               beforeUpdate() {
                   // 在更新DOM之前 调用此钩子函数 应用：可以获取原始的DOM
                   console.log('beforeUpdate',document.getElementById('app').innerHTML);
               },
               updated() {
                   // 在更新DOM之后 调用此钩子函数 应用：可以获取最新的DOM
                   console.log('updated',document.getElementById('app').innerHTML);
               },
               beforeDestroy() {
                   console.log('beforeDestroy');
               },
               destroyed() {
                   console.log('destroyed');
               },
               activated() {
                   console.log('组件被激活了');
               },
               deactivated() {
                   console.log('组件被停用了');
               }
           }

           var App = {
               data: function() {
                   return {
                       isShow: true
                   }
               },
               // Vue的内置组件，能在组件的切换过程中将状态保留在内存中父，防止重复渲染DOM
               template: `
                   <div id='app'>
                       <keep-alive>
                           <Test v-if = 'isShow'></Test>
                       </keep-alive>
                       <button @click = 'isShow = !isShow'>改变生死</button>
                   </div>
               `,
               components: {
                   Test
               },
               methods: {

               }
           }
           new Vue({
               el: '#app',
               data: function() {
                   return {

                   }
               },
               template: `<App />`,
               components: {
                   App
               }
           });
       </script>
   </body>
</html>

哪个生命周期适合请求后端接口，为什么；
看实际情况，一般在created（或beforeRouter）里面就可以，如果涉及到需要页面加载完成之后的话就用mounted。在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素。而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。