vue2生命周期函数（vuejs生命周期函数）

大家好，我是讯享网，很高兴认识大家。

&lt;!DOCTYPE html&gt;
&lt;html lang=“en”&gt;
&lt;head&gt;

讯享网

讯享网&lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; &lt;title&gt;Vue LifeCircle Hooks&lt;/title&gt;

</head> <body>

&lt;div id="app"&gt; &lt;p&gt;{{message}}&lt;/p&gt; &lt;button style="border:1px red solid" @click="change_message"&gt;change message&lt;/button&gt; &lt;b&gt;{{newMessage}}&lt;/b&gt; &lt;/div&gt; &lt;script src="https://unpkg.com/vue@2.2.6/dist/vue.js"&gt;&lt;/script&gt; &lt;script&gt; <span style="color: rgba(0, 0, 255, 1)">var</span> vue = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Vue({ el:</span>'#app'<span style="color: rgba(0, 0, 0, 1)">, data:{ message:</span>'hello,world'<span style="color: rgba(0, 0, 0, 1)"> }, methods:{ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">用es6 语法省略:function</span>

change_message(){

讯享网

讯享网 </span><span style="color: rgba(0, 0, 255, 1)">this</span>.message='I am changed'<span style="color: rgba(0, 0, 0, 1)"> } }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">life circle hooks</span> beforeCreate:<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ console.log(</span>'=======before create'<span style="color: rgba(0, 0, 0, 1)">) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.message) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$el) }, created:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ console.log(</span>'=======created'<span style="color: rgba(0, 0, 0, 1)">) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.message) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$el) }, beforeMount:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ console.log(</span>'=======beforeMount'<span style="color: rgba(0, 0, 0, 1)">) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.message) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$el) }, mounted:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ console.log(</span>'=======mounted'<span style="color: rgba(0, 0, 0, 1)">) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.message) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$el) },

　　　　　　　//频繁调用

 beforeUpdate:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ console.log(</span>'=======beforeUpdate'<span style="color: rgba(0, 0, 0, 1)">) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.message) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$el) },<br>　　　　　　　//频繁调用 updated:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ console.log(</span>'=======updated'<span style="color: rgba(0, 0, 0, 1)">) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.message) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$el) }, beforeDestory:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ console.log(</span>'=======beforeDestory'<span style="color: rgba(0, 0, 0, 1)">) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.message) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$el) }, destoryed:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){ console.log(</span>'=======destoryed'<span style="color: rgba(0, 0, 0, 1)">) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.message) console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$el) }, watch:{ message(newValue,oldValue){ console.log(oldValue </span>+ '==&gt;' +<span style="color: rgba(0, 0, 0, 1)"> newValue) } }, computed:{ newMessage(){ </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.message + ' balabala'<span style="color: rgba(0, 0, 0, 1)"> } } }) </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">另外一种写法 打印的顺序不一样 这个改变在中间</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> vue.$watch('message',function(newValue,oldValue){</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(oldValue + '--&gt;' + newValue)</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> })</span> &lt;/script&gt;

</body> </html>

vue2生命周期函数（vuejs生命周期函数）

相关推荐