vue---ライフサイクル関数
11861 ワード
vue内のすべてのフック関数: beforeCreate(作成前) created(作成後) beforeMount(ロード前) mounted(ロード後) beforeUpdate(更新前) updated(更新後) beforeDestroy(破棄前) destroyed(破棄後) ライフサイクル関数
"en">
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
"X-UA-Compatible" content="ie=edge">
vue
"https://cdn.bootcss.com/vue/2.4.2/vue.js"</span>>
"app">
"message">
{{message1}}
<span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({<span class="hljs-comment">/* vue */</span>
el: <span class="hljs-string">'#app'</span>,<span class="hljs-javadoc">/**** ****/</span>
data: {<span class="hljs-javadoc">/**** ****/</span>
message: <span class="hljs-string">'Hello World!'</span>
},
computed:{<span class="hljs-javadoc">/**** ****/</span>
message1:function(){
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.message.split(<span class="hljs-string">""</span>).reverse().join(<span class="hljs-string">""</span>);
}
},
watched:{<span class="hljs-javadoc">/**** ****/</span>
},
methods:{<span class="hljs-javadoc">/**** ****/</span>
},
beforeCreate: function() {
console.group(<span class="hljs-string">'------beforeCreate ------'</span>);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-comment">//undefined</span>
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-comment">//undefined </span>
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message)<span class="hljs-comment">//undefined</span>
},
<span class="hljs-javadoc">/**
* 1. beforeCreate created ， Data vue
*
* */</span>
created: function() {
console.group(<span class="hljs-string">'------created ------'</span>);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-comment">//undefined</span>
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-comment">// </span>
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); <span class="hljs-comment">// </span>
},
<span class="hljs-javadoc">/**
* 2. created beforeMount ， el ， ， ， ；
* templete ， ， render 。 ， html （template html ）
*
* */</span>
beforeMount: function() {
console.group(<span class="hljs-string">'------beforeMount ------'</span>);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"el : "</span> + (<span class="hljs-keyword">this</span>.$el)); <span class="hljs-comment">// </span>
console.log(<span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-comment">// </span>
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); <span class="hljs-comment">// </span>
},
<span class="hljs-javadoc">/**
* 3. beforeMount mounted ， html el dom html
*
* */</span>
mounted: function() {
console.group(<span class="hljs-string">'------mounted ------'</span>);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el); <span class="hljs-comment">// </span>
console.log(<span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data); <span class="hljs-comment">// </span>
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message); <span class="hljs-comment">// </span>
},
<span class="hljs-javadoc">/**
* 4.mounted beforeUpdate ，
*
* */</span>
beforeUpdate: function() {
console.group(<span class="hljs-string">'beforeUpdate ===============》'</span>);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message);
},
<span class="hljs-javadoc">/**
* 5.beforeUpdate updated ， dom
*
* */</span>
updated: function() {
console.group(<span class="hljs-string">'updated ===============》'</span>);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message);
},
beforeDestroy: function() {
console.group(<span class="hljs-string">'beforeDestroy ===============》'</span>);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message);
},
<span class="hljs-javadoc">/**
* 6.
*
* */</span>
destroyed: function() {
console.group(<span class="hljs-string">'destroyed ===============》'</span>);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"el : "</span> + <span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-keyword">this</span>.$el);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"data : "</span> + <span class="hljs-keyword">this</span>.$data);
console.log(<span class="hljs-string">"%c%s"</span>, <span class="hljs-string">"color:red"</span>, <span class="hljs-string">"message: "</span> + <span class="hljs-keyword">this</span>.message)
}
})