Vue2.0 新手入門 — 從環境搭建到釋出

前言

vue的征戰開始了，糾結了很久到底是學Vue還是React,然後發現有糾結那麼久的時間，說不定一個已經入門了。於是先挑一個基於原生js的框架Vue開始吧（還有個主要原因是Vue的中文官網做的比較小清新，看起來舒服).

生命週期

如上圖所示，Vue的生命週期一共有"Create","Mount","Update","Destroy"四個步驟。
vue.js提供了以下8個生命週期鉤子函式，給我們提供了執行自定義邏輯的機會：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed
  從字面很好理解分別是建立前後，掛接前後，更新前後，銷燬前後
  注:所謂的mount個人理解就是用vue.js的el去替換dom元素。

用個最簡單的demo說明：
html:

{{data}}

javascript:

 var vmData = { name:"vmData", a:"999", data:"this is data" }; var log = function(msg){ console.log(msg); }; var vm = new Vue( { el:"#vm1", data:vmData, beforeCreate:function(){log("beforeCreate")}, created:function(){log("created")}, beforeMount:function(){log("beforeMount")}, mounted:function(){log("mounted")}, beforeUpdate:function(){log("beofreUpdate")}, updated:function(){log("updated")}, beforeDestroy:function(){log("beforeDestroy")}, destroyed:function(){log("destroyed")} }); vmData.b = "998"; vm.$watch("a",function(oldVal,newVal){ console.log("oldVal:" + oldVal + ";newVal:" +newVal); });

在頁面初次載入時，會觸發"create"和"mount"生命週期鉤子：

在控制檯中修改data中的值，以及呼叫$destroy()方法，分別會觸發"update"和"destroy"生命週期鉤子: