一、Vue頁(yè)面組成
目前的項(xiàng)目中，Vue頁(yè)面都是采用組件套娃的形式，由一個(gè)一個(gè)的組件拼接而成整個(gè)頁(yè)面。一個(gè)組件就是一個(gè).vue文件。組件通常由template和script兩部分組成：
template部分：頁(yè)面展示的具體元素內(nèi)容，比如文字、文本框、按鈕、圖片等。
script部分：頁(yè)面涉及的具體方法函數(shù)、交互等代碼。
template內(nèi)容舉例如下：
二、script內(nèi)容
2.1 data()
定義頁(yè)面上各個(gè)文本框的值，實(shí)現(xiàn)數(shù)據(jù)雙向綁定并自動(dòng)裝填進(jìn)data：
2.2 mounted()、methods
mounted里面主要定義在頁(yè)面數(shù)據(jù)加載完成后執(zhí)行的方法：比如你的頁(yè)面已經(jīng)加載完了，然后通過操作可以生成一個(gè)二維碼圖片，頁(yè)面上需要在某個(gè)區(qū)域展示這個(gè)二維碼，那么展示二維碼這個(gè)方法的代碼就寫在mounted里面。
method里面主要定義對(duì)頁(yè)面執(zhí)行的所有操作，操作對(duì)應(yīng)的方法函數(shù)都寫在method里面：
2.3 created()
頁(yè)面元素內(nèi)容加載前需要執(zhí)行的方法，都放在created()下面。
比如你要獲取當(dāng)前的時(shí)間戳,然后把時(shí)間戳賦值給頁(yè)面上的某個(gè)文本框作為該文本框的初始值,那么獲取當(dāng)前時(shí)間戳的方法調(diào)用就要寫在created()下面：
2.4 watch()
watch主要用于偵聽vue實(shí)例響應(yīng)數(shù)據(jù)的變化，通常用于處理一些需要?jiǎng)討B(tài)變化的值：比如下圖所示，監(jiān)聽activityId值的變化，并將變化后的值和merchantNo的值合并起來，作為couponCode的值：
此外watch只能監(jiān)聽一層，因?yàn)槲覀兪且幚碓趂orm下的數(shù)據(jù)，一層是監(jiān)聽不到的，所以需要使用deep:true做深度監(jiān)聽。immediate:true 表示初始化的時(shí)候就監(jiān)聽，設(shè)為false則初始化不監(jiān)聽，只有數(shù)據(jù)有變化時(shí)才監(jiān)聽。
2.5 computed()
computed主要用于復(fù)雜的計(jì)算，并且由于有緩存機(jī)制，性能開銷比較小。使用方法如下圖所示：
其實(shí)簡(jiǎn)單的計(jì)算，使用methods也能達(dá)到同樣的效果。但由于computed有緩存機(jī)制，只要數(shù)據(jù)層值不改變，computed就不會(huì)重新去計(jì)算一次，而methods里的函數(shù)在每次調(diào)用時(shí)都要執(zhí)行，因此復(fù)雜計(jì)算時(shí)，建議使用computed：
此外在調(diào)用時(shí)，computed定義的成員像屬性一樣訪問，methods定義的成員必須以函數(shù)形式調(diào)用。比如上圖所示，調(diào)用computed直接用：{{fullName}}，而調(diào)用methods則必須以函數(shù)的方式調(diào)用：{{Names()}}。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至2705686032@qq.com 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。原文轉(zhuǎn)載： 原文出處：
