淺析Vue中的watch偵聽器、計算屬性、Vue-cli和組件

這篇文章帶大家繼續學習Vue，詳細介紹一下Vue入門必備知識中的watch偵聽器、運算屬性、Vue-cli和Vue元件，希望對大家有幫助！

一、watch 偵聽器

（1）什麼是watch 偵聽器

watch 偵聽器允許開發者監視資料的變化，從而針對資料的變化做特定的操作。 （學習影片分享：vue影片教學）

語法格式如下：

（2）使用watch 偵測用戶名是否可用

監聽username 值的變化，並使用axios 發起Ajax 請求，偵測目前輸入的使用者名稱是否可用：

程式碼示範如下：

watch: {
	// 监听 username 值的变化
	async username( newVal ) {
		if (newVal === '') return
		// 使用 axios 发起请求，判断用户名是否可用
		const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
		console.log(res)
	}
}

（3）immediate 選項

預設情況下，元件在初次載入完畢後不會呼叫watch 偵聽器。 如果想要讓 watch 偵聽器立即被呼叫，則需要使用 immediate 選項。

程式碼示範如下：

watch: {
	username: {
	// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
		handler: async function ( newVal ) {
			if (newVal === '') return
			const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
			console.log(res)
		},
		// 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
		immediate: true
	}
}

（4）deep 選項

#如果watch 偵聽的是一個對象，如果對像中的屬性值發生了變化，則無法被監聽到。 此時需要使用 deep 選項。

程式碼示範如下：

（5）監聽物件單一屬性的變更

如果只想監聽物件中單一屬性的變化，則可以按照如下的方式定義watch 偵聽器：

程式碼示範如下：

---

##二、計算屬性

（1）什麼是計算屬性

1️⃣ 計算屬性指的是

透過一系列運算之後，最終得到一個屬性值。

2️⃣

這個動態計算出來的屬性值可以被模板結構或 methods 方法使用。

程式碼示範如下：

（2）計算屬性的特點

1️⃣ 雖然計算屬性在宣告的時候被定義為方法，但是計算屬性的

本質是一個屬性;

#2️⃣ 計算屬性會

快取計算的結果，只有計算屬性所依賴的資料變更時，才會重新運算；

---

三、vue-cli

（1）什麼是vue-cli

1️⃣ vue-cli 是Vue.js 開發的標準工具。它簡化了程式設計師基於 webpack 創建工程化的 Vue 專案的過程。

2️⃣ 引用自vue-cli 官網上的一句話：程式設計師可以專注在撰寫應用程式上，而不必花好幾天去糾結webpack 配置的問題；

3️⃣ 中文官網：

https://cli.vuejs.org/zh/

（2）安裝與使用

1️⃣ vue-cli 是npm 上的一個全域包，使用npm install 指令，即可方便的把它安裝到自己的電腦上：

npm install -g @vue/cli

2️⃣ 檢查其版本是否正確：

vue --version

3️⃣ 在終端機下執行如下的命令，建立指定名稱的項目：

vue create專案的名稱

（3）vue 專案中src 目錄的構成

• assets 資料夾：存放項目中用到的靜態資源文件，例如：css 樣式表、圖片資源；
• #components 資料夾：程式設計師封裝的、可重複使用的元件，都要放到components 目錄下；
• main.js 是專案的入口檔案。整個專案的運行，要先執行main.js；
##App.vue
• 是專案的根元件；

（4）vue 專案的運作流程

在工程化的專案中，vue 要做的事情很單純：透過main.js 把App.vue 渲染到index.html 的指定區域。

• App.vue 用來寫待渲染的範本結構；
• index.html 中需要預留一個el 區域;
• main.js 把App.vue 渲染到了index.html 所預留的區域中;

---

四、vue 元件

（1）什麼是元件化開發

元件化開發指的是：根據封裝的思想，把頁面上可重複使用的UI 結構封裝為元件，以便方便專案的開發與維護。

（2）vue 中的元件化開發

1️⃣ vue 是一個支援元件化開發的前端框架；

#2️⃣ vue 中規定：組件的後綴名稱是.vue。之前接觸到的App.vue 檔案本質上就是一個vue 的元件；

（3）vue 元件的三個組成部分

每個. vue 元件都由3 個部分組成，分別是：

• template → 元件的模板結構
• script → 元件的JavaScript 行為
• style → 元件的樣式

##其中，

每個元件中必須包含template 模板結構，而script 行為和style 樣式是可選的組成部分。

3.1 template##vue 規定：每個元件對應的範本結構，需要定義到