13、watch偵聽器（監視器）

（1）作用：監視數據變化，執行一些業務邏輯或異步操作

（2）語法：

1）簡寫語法——簡單數據類型，直接監視

①

Watch:{

數據屬性名（newValue,oldValue）{

一些業務邏輯或異步操作

}，

‘對象·屬性名’（newValue,oldValue）{

一些業務邏輯或異步操作

}

}

②示例：

結果：

2）完整寫法——添加額外配置項

①deep:true對復雜類型深度監視

②immediate:true初始化立刻執行一次handler方法

14、Vue生命周期和生命周期的四個階段

（1）Vue生命周期

????????1）概念：

????????一個Vue實例從創建到銷毀的整個過程。

（2）生命周期的四個階段（創建、掛載、更新、銷毀）

????? ? 1）創建階段：將數據變為響應式數據。執行一次。在數據轉化完成后可以發送初始化渲染???? 請求

? ??????2）掛載階段：渲染模版。執行一次。掛載完后，可以進行dom操作。

????????3）更新階段：數據修改，視圖更新。可以執行多次。

????????4）銷毀階段：銷毀實例。

（3）Vue生命周期函數（鉤子函數）

Vue生命周期過程中，會自動運行一些函數，被稱為生命周期鉤子，讓開發者可以在特定的階段運行自己的代碼

????????1）創建階段：

????????????????①beforeCreate

????????????????②created：發送初始化渲染請求

????????2）掛載階段

????????????????①beforeMount

????????????????②mounted：操作dom

????????3）更新階段

????????????????①beforeUpdate

????????????????②updated

????????4）銷毀階段

????????????????①before Destroy：釋放除Vue以外的資源（清除定時器，延時器……）

????????????????②destroyed

（4）示例

代碼：

結果：

15、工程化開發和腳手架Vue cli

（1）開發Vue的兩種方式

????????1）核心包傳統開發模式：基于html/css/js文件，直接引入核心包，開發Vue。

????????2）工程化開發模式：基于構建工具（例如：webpack）的環境中開發Vue。

（2）概念

????????Vue cli是Vue官方提供的一個全局命令工具，可以幫助我們快速創建一個標準化基礎架子。（集成了webpack配置）

（3）好處

????????1）開箱即用，0配置

????????2）內置babel等工具

????????3）標準化

（4）使用步驟

????????1）全局安裝（一次）：yarn global add @vue/cli 或npm i @vue/cli -g

????????2）查看Vue版本vue –version

????????3）創建項目架子：vue create project-name（項目名-不能用中文）

????????????????①新建一個文件夾，右鍵打開“終端”

????????????????②創建vue項目架子（vue create 項目名）

回車：

????????????????③選擇Vue2

回車：

（創建，需等待）

創建成功（自動產生一個vue-demo1文件）：

（沒產生，先刷新一下）

4）啟動項目：yarn serve 或npm run serve（找package.json）

????????①進到創建的目錄里，執行npm run serve

回車：

????????②在瀏覽器輸入：“localhost:8080”，啟動成功

（5）安裝出現問題

如果已經安裝或者安裝了nvm，又或者初次安裝，但是出現（vue : 無法將“vue”項識別為 cmdlet、函數、腳本文件或可運行程序的 名稱。請檢查名稱的拼寫,如果包括路徑,請確保路徑正確,然后再試一 次。 所在位置 行:1 字符: 1 + vue create vue-demo1 + ~~~???? + Category）

（或者安裝了nvm的），可以嘗試一下這個方法

1）通過vue.cmd在你安裝腳手架的那個盤查找（這里是D盤）vue-codemod.cmd文件，復制它的路徑

2）按win鍵，打開“設置”，找到“高級系統設置”

3）打開“環境變量”，在“系統變量”里，新建一個“VUE”的變量，找到“Path”，新建一個，將“%VUE%”填進去