序文

研究の最後の章では、我々はそれが何ができるかを最終的にVUEの予備的な理解を持っており、これは、Javaの庭の友人が学んだことがある場合のブログは、VUEのライフサイクルとその一般的なフック関数を記述しています学校へのアクセスVUEの面で、彼はまた表情で、その後、独自のライフサイクルを持っているため、サーブレットのライフサイクルサーブレットの上にサーブレットがロードされている--->インスタンス化--->サービス--->破壊を学びます！

本章の目的

Vueがライフサイクルとフック関数を学び、理解します

VUEライフサイクルとフック関数

実際には、ライフサイクルと時間のVUEフック関数を参照して、何人かの人々が共通のフック関数10があると思うし、何人かの人々は私が同じであるためにそれは、10または8 8だと思います、我々主に8つのVUEフック関数に。まずは、VUEのためのライフサイクル図の公式ウェブサイトを振ってみましょう

これは、VUEのためのライフサイクルの画像はすでに、特に具体的に説明するが、単独でも、そのライフサイクルを理解するには不十分であるというマップは、我々は少し練習する必要がある、良い古いことわざがあり、練習は真実の唯一のテストです標準、VUEフック関数について教えてください。

beforeCreate（旧インスタンスの作成）

コンポーネント作成DOM要素とデータの最初のインスタンスで初期化されていません

シナリオ：このイベントではロードを追加することができます

作成された（後にインスタンスの作成）

データ初期化データが完了しているDOMアンマウント、またはあまりにも多くの要求が長すぎるために占有するので、要求は、データを変更してレンダリングすることである期間がページ行の原因となります場合は、この方法はまた、DOMをレンダリングするために呼び出されますが、されてことができます空白の
シナリオ：この最後のロードではなく、自己実行機能を実現するために、いくつかの初期設定を行います

beforeMoute（フロント要素マウント）

DOMは、データの初期化が完了したが、双方向のデータバインディングまたは{{}}仮想化技術のVUE DOM使用するため、マウント未完成

mroutedは（要素が実装後）

データが完全であるとDOMは、プレースホルダの値の期間に取り付けられた後にデータをレンダリングし、ここだけのデータ変更要求をレンダリングするため、要求は通常、この場所に配置されています

（更新例前）のBeforeUpdate

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候就会执行这个周期，如果没有数据改变不执行

updated(实例更新后)

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的，beforeUpdated和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和死循环

beforeDestory(实例销毁前)

实例销毁之前调用，在这一步，实例仍然完全可用

destory(实例销毁后)

Vue实例销毁后调用，调用后，Vue实例指示的所有内容都会解除绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁

实例一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue的生命周期实例一</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="msg" />
            {{msg}}
        </div>
        <button onclick="destory()">销毁</button>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    msg:'vue'
                },
                beforeCreate(){
                    console.log('vue实例创建前:'+this.msg+','+this.$el);
                    //    数据data和dom都还没有初始化
                },
                created(){
                    console.log('vue实例创建后:'+this.msg+','+this.$el);
                    //数据dom初始化完成，dom还没有初始化完成
                },
                beforeMount(){
                    console.log('元素挂载前:');
                    console.log(this.$el);
                },
                mounted(){
                    console.log('元素挂载后:');
                    console.log(this.$el);
                },
                beforeUpdate(){
                    console.log('实例更新前');
                    console.log(this.msg);
                    console.log(this.$el);
                },
                updated(){
                    console.log('实例更新后');
                    console.log(this.msg);
                    console.log(this.$el);
                },
                beforeDestroy(){
                    console.log('实例销毁前');
                    console.log(this.msg);
                },
                destroyed(){
                    console.log('实例销毁后');
                    console.log(this.msg);
                }
            });
            function destory(){
                vm.$destroy();
            }
        </script>
    </body>
</html>

结果

实例二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue的生命周期实例二</title>
    </head>
    <body>
        <div id="app">
            {{name}}
        </div>
        <button onclick="destory()">销毁实例</button>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    name:'一只流浪的kk',
                    age:18
                },
                beforeCreate(){
                    console.log('============实例创建前=============');
                    console.log(this.$el);    //undefined
                    console.log(this.$data);//undefined
                },
                created(){
                    console.log('============实例创建后=============');
                    console.log(this.$el);
                    console.log(JSON.stringify(this.$data));
                },
                beforeMount(){
                    console.log('============元素挂载前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                mounted(){
                    console.log('============元素挂载后=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                beforeUpdate(){
                    console.log('============实例更新前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                updated(){
                    console.log('============实例更新后=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                beforeDestroy(){
                    console.log('============实例销毁前=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                },
                destroyed(){
                    console.log('============实例销毁后=============');
                    console.log(this.$el);    
                    console.log(JSON.stringify(this.$data));
                }
            });
            function destory(){
                vm.$destroy();
            }
        </script>
    </body>
</html>

总结

　beforeCreate() : 此时$el、data 的值都为undefined,即el 和 data 并未初始化。
　create(): 此时可以拿到data的值，但是$el依旧为undefined，即data完成了数据的初始化，el没有。
　beforeMounte(): $el的值为“虚拟”的元素节点,dom未完成挂载，数据初始化完成，但是数据的双向绑定还是{{}},这是因为vue采用了虚拟dom技术。
　mouted(): 数据和dom都完成挂载，在上一个周期占位的数据把值渲染进去，一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染。

VUEの研究ノート（b）はVUEのライフサイクルとフック関数

序文