遇見 vue.js --------阿文的vue.js學習筆記（3）----vue範例

**
新學習新徵程，我們一起踏上學習 vue.js的新長征

… … …

關注我，我們一起學習進步。

1、構造器

我們所寫的每個 Vue 應用都是通過使用 Vue 函數建立一個新的 Vue 範例開始的。

即

    new Vue({
    			})

這就相當於是用構造器構造了一個 Vue範例，而範例就是我們的MVVM中的 VM，所以很多時候我們經常會使用 vm (即ViewModel 的縮寫) 這個變數名來表示 Vue 範例

寫作

（1）                   或者     (2)
var vm = new Vue({          const  vm = new Vue({
   // 選項							//選項
   })							 )}

你可以簡單的理解為這裡的 vm 就是我們建立出來的範例，而我們的 new Vue 就是我們建立範例的構造器。

2、屬性與方法

我們建立的每一個Vue範例都會代理其 data 物件裡所有的屬性。

舉個例子：
在這裡插入圖片描述
執行結果：你可以看到是true 因為我們範例vm 是代理data 中的所有屬性的，所以二者是相等的。

下面我們補充一個知識點：
Object.freeze() 函數，這個函數的作用是將物件進行凍結，凍結之後，後續的操作將無法再對該物件進行修改

舉個例子：首先來看這段程式碼列印出來的name
在這裡插入圖片描述
執行結果：

然後我們對其進行更改，再最下面新增一條 vm.name="我的資料已被更改"

執行結果：你可以看出我們的name被更改了
在這裡插入圖片描述
然後我們在中間新增上我們的 Object.freeze() 方法

執行結果：你可以發現我們的資料回到最先的樣子，即在我們新增了Object.freeze()方法之後我們下面的修改無效了
在這裡插入圖片描述

當然除了資料屬性，Vue 範例還暴露了一些有用的範例屬性與方法。它們都有字首 $，以便與我們自己定義的屬性區分開來。

就用我們上面的例子中的範例 vm 中的 $el 和 $data 都是我們範例中的屬性 property。

最後我們再補充一個實體方法 $swatch

可以簡單的理解為監聽一個元素，當監聽的這個元素髮生變化之後，執行裡面寫的函數

我們舉個例子：我們寫一個輸入框然後當我們輸入框中的資料發生改變之後，彈出內容
在這裡插入圖片描述
執行結果：你可以看到當我們輸入框內的值一旦發生改變，就會執行我們$watch 裡面的函數彈出「我的值已改變」

3、生命週期

我們的每個 Vue 範例在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將範例掛載到 DOM 並在資料變化時更新 DOM 等。

解釋： 將範例掛載到 DOM 的意思就是將我們的範例顯示在我們的網頁上

生命週期圖示：
在這裡插入圖片描述

簡單來說我們範例的生命週期大致分為以下幾個階段
beforeCreate 建立前
created 建立後
beforeMounted 掛載檢視前
mounted 掛載檢視後
beforeUpdate 更新前
updated 更新完之後
beforeDestroyed 死亡前
destroyed 死亡之後

從上面我們可以看出，我們的週期可以分為好幾個階段，而在這些階段中也會執行一些叫做 生命週期勾點 的函數，這給了我們在不同階段新增自己的程式碼的機會。

大致也就是上面的階段
在這裡插入圖片描述
簡單舉個例子：

執行結果： 你可以發現因為我們執行之後就意味著，我們的範例已經被建立並且被掛載在我們的 dom 頁面上的，所以這二者的勾點函數就被直接呼叫。因為我們的資料並未被更改所以 update 這個勾點函數沒有被呼叫。
而是等我們在輸入框中更改資料之後，我們update這個勾點函數才被呼叫
在這裡插入圖片描述

**
關注校園君有話說公眾號，回覆 web前端免費領取50G 前端學習資料一份，我們一起學習進步吧。
在這裡插入圖片描述