這篇文章主要介紹了Vue中的watch偵聽器、計算屬性、Vue-cli和組件怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中的watch偵聽器、計算屬性、Vue-cli和組件怎么使用文章都會有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)公司專注于正定網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供正定營銷型網(wǎng)站建設，正定網(wǎng)站制作、正定網(wǎng)頁設計、正定網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務，打造正定網(wǎng)絡公司原創(chuàng)品牌,更為您提供正定網(wǎng)站排名全網(wǎng)營銷落地服務。

一、watch 偵聽器

（1）什么是 watch 偵聽器

watch 偵聽器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作。

語法格式如下：

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

監(jiān)聽 username 值的變化，并使用 axios 發(fā)起 Ajax 請求，檢測當前輸入的用戶名是否可用：

代碼演示如下：

watch: {
	// 監(jiān)聽 username 值的變化
	async username( newVal ) {
		if (newVal === '') return
		// 使用 axios 發(fā)起請求，判斷用戶名是否可用
		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 處理函數(shù)
		handler: async function ( newVal ) {
			if (newVal === '') return
			const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
			console.log(res)
		},
		// 表示頁面初次渲染好之后，就立即觸發(fā)當前的 watch 偵聽器
		immediate: true
	}
}

（4）deep 選項

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

代碼演示如下：

（5）監(jiān)聽對象單個屬性的變化

如果只想監(jiān)聽對象中單個屬性的變化，則可以按照如下的方式定義watch 偵聽器：

代碼演示如下：

二、計算屬性

（1）什么是計算屬性

1?? 計算屬性指的是通過一系列運算之后，最終得到一個屬性值。

2?? 這個動態(tài)計算出來的屬性值可以被模板結構或 methods 方法使用。

代碼演示如下：

（2）計算屬性的特點

1?? 雖然計算屬性在聲明的時候被定義為方法，但是計算屬性的本質是一個屬性；

2?? 計算屬性會緩存計算的結果，只有計算屬性依賴的數(shù)據(jù)變化時，才會重新進行運算；

三、vue-cli

（1）什么是 vue-cli

1?? vue-cli 是 Vue.js 開發(fā)的標準工具。它簡化了程序員基于 webpack 創(chuàng)建工程化的 Vue 項目的過程。

2?? 引用自 vue-cli 官網(wǎng)上的一句話：程序員可以專注在撰寫應用上，而不必花好幾天去糾結 webpack 配置的問題；

3?? 中文官網(wǎng)：https://cli.vuejs.org/zh/

（2）安裝和使用

1?? vue-cli 是 npm 上的一個全局包，使用 npm install 命令，即可方便的把它安裝到自己的電腦上：npm install -g @vue/cli

2?? 檢查其版本是否正確：vue --version

3?? 在終端下運行如下的命令，創(chuàng)建指定名稱的項目：vue create 項目的名稱

（3）vue 項目中 src 目錄的構成

• assets 文件夾：存放項目中用到的靜態(tài)資源文件，例如：css 樣式表、圖片資源；

• components 文件夾：程序員封裝的、可復用的組件，都要放到 components 目錄下；

• main.js 是項目的入口文件。整個項目的運行，要先執(zhí)行 main.js；

• App.vue 是項目的根組件；

（4）vue 項目的運行流程

在工程化的項目中，vue 要做的事情很單純：通過 main.js 把 App.vue 渲染到 index.html 的指定區(qū)域中。

• App.vue 用來編寫待渲染的模板結構；

• index.html 中需要預留一個 el 區(qū)域；

• main.js 把 App.vue 渲染到了 index.html 所預留的區(qū)域中；

四、vue 組件

（1）什么是組件化開發(fā)

組件化開發(fā)指的是：根據(jù)封裝的思想，把頁面上可重用的 UI 結構封裝為組件，從而方便項目的開發(fā)和維護。

（2）vue 中的組件化開發(fā)

1?? vue 是一個支持組件化開發(fā)的前端框架；

2?? vue 中規(guī)定：組件的后綴名是.vue。之前接觸到的 App.vue 文件本質上就是一個 vue 的組件；

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

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

• template → 組件的模板結構

• script → 組件的 JavaScript 行為

• style → 組件的樣式

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

3.1 template

vue 規(guī)定：每個組件對應的模板結構，需要定義到