法與響應(yīng)式開發(fā)入門)
提到Vue現(xiàn)在很多人第一反應(yīng)就是腳手架、Webpack/Vite那一套。但我今天想聊的是另一種打開方式——不使用Webpack的Vue傳統(tǒng)前端使用方式。也就是直接把Vue當(dāng)做一個(gè)普通的JS庫(kù)來(lái)用在HTML里用script標(biāo)簽引進(jìn)來(lái)就開干。這種玩法在如今構(gòu)建工具滿天飛的環(huán)境下聽起來(lái)確實(shí)有點(diǎn)“復(fù)古”但它真的不是過(guò)時(shí)而是很多場(chǎng)景下的最優(yōu)解。剛接觸Vue的朋友被各種工具鏈繞得頭暈眼花配置環(huán)境的時(shí)間比寫代碼還長(zhǎng)。而有經(jīng)驗(yàn)的開發(fā)者也知道不是所有項(xiàng)目都需要一套完整工程化體系。這篇我先講最基礎(chǔ)的部分怎么引入Vue、怎么創(chuàng)建一個(gè)最簡(jiǎn)單的實(shí)例、怎么寫模板語(yǔ)法、怎么處理事件和樣式。這些是整個(gè)系列的地基也是后續(xù)深入組合式API、組件化開發(fā)的前提。把基礎(chǔ)打牢你后面看任何Vue代碼都不會(huì)發(fā)怵。1. 緣起為什么還要聊一個(gè)“老掉牙”的話題1.1 現(xiàn)代構(gòu)建流程的復(fù)雜度問(wèn)題這幾年前端開發(fā)的“工程化”確實(shí)成熟了但也把不少初學(xué)者擋在了門外。記得我最早接觸Vue時(shí)按教程走第一步就是裝Node.js然后全局安裝腳手架再執(zhí)行創(chuàng)建命令。中間遇到權(quán)限問(wèn)題、網(wǎng)絡(luò)超時(shí)、版本沖突光環(huán)境就折騰了兩三天真正寫Vue代碼的時(shí)間幾乎為零。那種挫敗感很多人應(yīng)該體會(huì)過(guò)。而且構(gòu)建工具本身也在不斷演進(jìn)。今天你用Webpack配置了一大堆東西明天可能社區(qū)就推薦Vite了。但無(wú)論工具怎么變Vue的核心概念——響應(yīng)式數(shù)據(jù)、模板指令、組件這些從來(lái)沒(méi)變過(guò)。不通過(guò)構(gòu)建工具直接在瀏覽器里跑Vue恰恰能讓這些核心概念以最直白的方式呈現(xiàn)出來(lái)。說(shuō)白了工具是為解決問(wèn)題服務(wù)的而不是反過(guò)來(lái)。如果只是做一個(gè)活動(dòng)頁(yè)、一個(gè)課程表小程序、一個(gè)后臺(tái)系統(tǒng)的局部交互模塊非要上一套完整的工程化體系反而是本末倒置。1.2 傳統(tǒng)引入方式的適用場(chǎng)景那什么樣的情況適合這種傳統(tǒng)方式我盤點(diǎn)了一下大概有這么幾類公司老項(xiàng)目里要局部引入Vue做交互比如給原有的服務(wù)端模板頁(yè)面加上實(shí)時(shí)篩選、動(dòng)態(tài)表格。個(gè)人練手做小demo驗(yàn)證一個(gè)想法或者寫點(diǎn)學(xué)習(xí)筆記。后端同學(xué)一個(gè)人想搞定一個(gè)帶簡(jiǎn)單交互的內(nèi)部工具不想折騰node環(huán)境。某些部署環(huán)境限制多不能隨意跑構(gòu)建命令但可以直接放靜態(tài)文件。其實(shí)還有一個(gè)很實(shí)際的原因加載速度快。CDN上的Vue文件本身就是壓縮好的直接引入沒(méi)有任何打包和轉(zhuǎn)換過(guò)程。對(duì)于簡(jiǎn)單頁(yè)面來(lái)說(shuō)首屏性能可能比你引一堆按需加載的模塊還要好。這個(gè)系列我打算用幾篇文章把這種傳統(tǒng)Vue開發(fā)方式從入門到進(jìn)階完整過(guò)一遍。作為第一篇先把地基打好。補(bǔ)充一句本文的示例代碼都能直接在瀏覽器里跑不需要任何命令行操作。你只需要準(zhǔn)備一個(gè)文本編輯器和一個(gè)瀏覽器就夠了。2. 環(huán)境準(zhǔn)備與引入Vue2.1 CDN引入與本地文件引入之爭(zhēng)在傳統(tǒng)方式下引入Vue就兩種做法一種是直接用script標(biāo)簽引用CDN地址另一種是下載一個(gè)Vue的JS文件放到項(xiàng)目目錄里。CDN方式最簡(jiǎn)單幾行代碼搞定!-- 開發(fā)版包含完整警告和輔助調(diào)試工具適合學(xué)習(xí)階段 -- script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script注意上面是Vue 2的寫法。如果你用的是Vue 3標(biāo)簽路徑略有不同后面會(huì)專門提到。這里我為什么要提Vue 2因?yàn)橄喈?dāng)一部分傳統(tǒng)項(xiàng)目和老代碼庫(kù)用的還是Vue 2而且很多開箱即用的UI框架在Vue 2下生態(tài)最穩(wěn)定。學(xué)習(xí)傳統(tǒng)開發(fā)方式時(shí)從Vue 2入手一天就能上手后續(xù)再看Vue 3也不會(huì)覺(jué)得困難。畢竟響應(yīng)式的核心思想和模板機(jī)制是一脈相承的。本地文件方式也簡(jiǎn)單官網(wǎng)下載vue.js和vue.min.js兩個(gè)文件放到j(luò)s目錄下頁(yè)面里引用相對(duì)路徑就行script src/js/vue.min.js/script兩種方式怎么選我的建議是只要能聯(lián)網(wǎng)優(yōu)先用CDN。別問(wèn)為什么省事。但要注意如果目標(biāo)項(xiàng)目是在內(nèi)網(wǎng)運(yùn)行或者對(duì)首屏加載速度有極致要求那就下載到本地。下載到本地時(shí)記得開發(fā)時(shí)引vue.js有警告提示上線時(shí)引vue.min.js壓縮版。2.2 開發(fā)版與生產(chǎn)版的差異Vue的JS文件官方分了開發(fā)版和生產(chǎn)版。差別主要在開發(fā)版會(huì)帶上完整的警告信息、把所有的斷言和提示邏輯都保留生產(chǎn)版則把這些全部壓縮去掉體積小一大截。比如你在代碼里寫了不存在的屬性開發(fā)版會(huì)立刻在控制臺(tái)給你一條紅色的警告提示哪個(gè)組件、哪個(gè)位置出了問(wèn)題生產(chǎn)版呢悄悄忽略什么都不報(bào)。所以自己學(xué)習(xí)的時(shí)候一定用開發(fā)版。我以前見(jiàn)過(guò)一位同事上線后某個(gè)數(shù)據(jù)一直顯示不出來(lái)排查了半天才發(fā)現(xiàn)生產(chǎn)版把警告都吞了要是開發(fā)時(shí)能看到警告一分鐘就能定位問(wèn)題。具體CDN地址可以根據(jù)版本去官方文檔的安裝頁(yè)找到。記住一句話學(xué)的時(shí)候帶警告部署的時(shí)候換壓縮版這是兩條鐵律。2.3 創(chuàng)建第一個(gè)Vue實(shí)例hello world的又一個(gè)版本項(xiàng)目文件就三個(gè)一個(gè)HTML文件、一個(gè)JS文件或直接在HTML里寫、引入Vue。我習(xí)慣把Vue邏輯單獨(dú)放在一個(gè)app.js里HTML只負(fù)責(zé)結(jié)構(gòu)。先看HTML!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleVue傳統(tǒng)方式入門/title /head body div idapp p{{ message }}/p /div script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script script srcapp.js/script /body /html再看app.jsvar app new Vue({ el: #app, data: { message: 你好Vue } });打開瀏覽器頁(yè)面上就會(huì)顯示“你好Vue”。核心就三行el指定Vue實(shí)例掛載到哪個(gè)DOM節(jié)點(diǎn)data里存放響應(yīng)式數(shù)據(jù){{ message }}把數(shù)據(jù)渲染到模板里。當(dāng)你通過(guò)app.message 換個(gè)內(nèi)容修改數(shù)據(jù)時(shí)頁(yè)面會(huì)自動(dòng)刷新不需要寫任何DOM操作代碼。這就是響應(yīng)式最直觀的體現(xiàn)。3. 模板語(yǔ)法花括號(hào)、指令和它們背后的邏輯3.1 Mustache插值把數(shù)據(jù)“放”進(jìn)去上面用到的{{ message }}這種雙花括號(hào)的寫法在Vue里叫Mustache插值。它不只是放一個(gè)簡(jiǎn)單的變量里面可以寫任何合法的JavaScript表達(dá)式注意是表達(dá)式不能是語(yǔ)句。p{{ number 1 }}/p p{{ message.split().reverse().join() }}/p p{{ isOK ? 條件為真 : 條件為假 }}/p這些寫法都是允許的。但不要太離譜比如在插值里寫一長(zhǎng)串業(yè)務(wù)邏輯那就很糟糕了。模板的意義在于聲明結(jié)構(gòu)復(fù)雜的計(jì)算應(yīng)該挪到后面要講的計(jì)算屬性里去。還有一個(gè)細(xì)節(jié)插值是正確的做HTML轉(zhuǎn)義的。什么意思如果message的值是scriptalert(xss)/scriptVue在渲染時(shí)會(huì)把尖括號(hào)轉(zhuǎn)成lt;和gt;直接當(dāng)成字符串顯示出來(lái)而不會(huì)去執(zhí)行里面的腳本。這是安全底線千萬(wàn)別用不需要轉(zhuǎn)義的v-html指令去渲染用戶輸入的內(nèi)容。3.2 v-bind與v-model屬性綁定的兩種形態(tài)花括號(hào)插值只能作用于標(biāo)簽體里的文本內(nèi)容如果你想動(dòng)態(tài)綁定HTML標(biāo)簽上的屬性比如href、class、style就得用指令。指令是Vue模板里以v-開頭的那幾個(gè)特殊屬性。v-bind的作用就是動(dòng)態(tài)綁定一個(gè)屬性a v-bind:hreflinkUrl點(diǎn)擊跳轉(zhuǎn)/a這里的linkUrl是Vue實(shí)例data里的一個(gè)數(shù)據(jù)項(xiàng)。Vue會(huì)把它的值設(shè)置為href屬性的最終值。這個(gè)指令太常用了所以Vue提供了非常流行的縮寫——直接用冒號(hào)a :hreflinkUrl點(diǎn)擊跳轉(zhuǎn)/a初看可能會(huì)有點(diǎn)奇怪但習(xí)慣之后你會(huì)發(fā)現(xiàn)寫代碼效率高了不少。v-model則是專門用于表單元素的雙向綁定。所謂雙向指的不只是數(shù)據(jù)變化會(huì)更新頁(yè)面頁(yè)面上的用戶輸入也會(huì)反向同步到數(shù)據(jù)里。比如input typetext v-modelsearchText用戶在輸入框里敲的每一個(gè)字符都會(huì)實(shí)時(shí)同步到searchText這個(gè)數(shù)據(jù)上。這在以前的原生開發(fā)里要監(jiān)聽input事件再手動(dòng)賦值現(xiàn)在一行指令搞定也體現(xiàn)了Vue數(shù)據(jù)驅(qū)動(dòng)思想的意義——你只管維護(hù)數(shù)據(jù)DOM層的變化全交給框架。3.3 v-on事件綁定用戶交互的入口有了數(shù)據(jù)綁定自然就需要事件處理。v-on用來(lái)綁定DOM事件同樣有縮寫用代替button v-on:clickhandleClick點(diǎn)擊/button button clickhandleClick點(diǎn)擊縮寫寫法/buttonhandleClick是Vue實(shí)例methods里定義的方法var app new Vue({ el: #app, data: { count: 0 }, methods: { handleClick: function() { this.count 1; } } });methods里的方法在Vue實(shí)例上可以直接通過(guò)this訪問(wèn)到data里的數(shù)據(jù)。這是傳統(tǒng)方式寫交互最核心的技能之一。你可能會(huì)想為什么不直接在v-on后面寫個(gè)表達(dá)式其實(shí)也可以比如clickcount 1但復(fù)雜邏輯一定要提到methods里面去。模板里寫邏輯越少越好。4. 響應(yīng)式原理與數(shù)據(jù)驅(qū)動(dòng)頁(yè)面為什么能自己動(dòng)4.1 為什么數(shù)據(jù)改了頁(yè)面就更新Vue的響應(yīng)式機(jī)制是它最核心的競(jìng)爭(zhēng)力。在傳統(tǒng)方式下這個(gè)機(jī)制在底層是怎么實(shí)現(xiàn)的以Vue 2為例它會(huì)把data里的每個(gè)屬性都經(jīng)過(guò)Object.defineProperty處理給屬性加上getter和setter。當(dāng)屬性被讀取時(shí)比如模板渲染Vue會(huì)記錄誰(shuí)在依賴這個(gè)屬性當(dāng)屬性被修改時(shí)它就會(huì)通知所有依賴方去更新。打個(gè)比方這就好比一間教室里老師在黑板上寫了個(gè)通知“明天下午三點(diǎn)開會(huì)”。同學(xué)們模板中的各個(gè)位置看到這個(gè)通知后都會(huì)記在備忘錄里。老師后來(lái)又把通知改成“推遲到四點(diǎn)”只要改一次黑板所有記了備忘錄的同學(xué)都會(huì)按新時(shí)間去執(zhí)行不需要挨個(gè)通知。這正是Vue開發(fā)的思維模式你只需要修改數(shù)據(jù)界面上所有跟這個(gè)數(shù)據(jù)有關(guān)的部分都會(huì)自動(dòng)跟著變化。4.2 data為什么推薦用函數(shù)返回既然提到了data就不得不提一個(gè)關(guān)鍵細(xì)節(jié)。對(duì)于最簡(jiǎn)單的Vue實(shí)例data可以是一個(gè)對(duì)象data: { message: hello }但在后面會(huì)遇到的組件定義里data就必須是一個(gè)函數(shù)返回一個(gè)新對(duì)象。這么設(shè)計(jì)是為了保證每個(gè)組件實(shí)例都持有自己獨(dú)立的數(shù)據(jù)拷貝不會(huì)互相串味。這可能是很多初學(xué)者第一次寫組件死活不更新數(shù)據(jù)的根源兩個(gè)組件實(shí)例共享了同一個(gè)data對(duì)象。我建議從一開始就養(yǎng)成良好的習(xí)慣——即使是根實(shí)例也寫成函數(shù)返回的形式data: function() { return { message: hello }; }傳統(tǒng)方式的演示階段不改問(wèn)題不大但一旦過(guò)渡到組件協(xié)作這個(gè)習(xí)慣能幫你少踩很多坑。4.3 計(jì)算屬性模板里少寫邏輯的利器模板里寫復(fù)雜表達(dá)式不僅看著亂每渲染一次還會(huì)重新計(jì)算一遍浪費(fèi)性能。Vue為此提供了計(jì)算屬性computed。它看起來(lái)像是一個(gè)方法但本質(zhì)上是基于依賴緩存的屬性。var app new Vue({ el: #app, data: { firstName: 張, lastName: 三 }, computed: { fullName: function() { return this.firstName this.lastName; } } });模板里直接用{{ fullName }}把拼接邏輯放在計(jì)算屬性里清清楚楚。而且只要firstName和lastName沒(méi)有變化多次訪問(wèn)fullName返回的都是緩存值不會(huì)重復(fù)執(zhí)行函數(shù)體。理解緩存機(jī)制是區(qū)分老手和新手的標(biāo)志之一。5. 條件渲染與列表渲染讓頁(yè)面結(jié)構(gòu)和數(shù)據(jù)對(duì)齊5.1 v-if與v-show條件渲染的二選一開發(fā)過(guò)程中經(jīng)常會(huì)遇到這種需求某個(gè)區(qū)塊在特定條件下顯示否則隱藏。Vue提供兩條指令來(lái)處理v-if和v-show。兩者的區(qū)別很多網(wǎng)上的文章都講過(guò)。這里我用最real的經(jīng)驗(yàn)總結(jié)v-if是真正的條件渲染為false時(shí)DOM位置上就是空的什么都不會(huì)渲染v-show則是用CSS的display來(lái)控制顯隱元素始終存在于DOM中只是被隱藏了?；谶@個(gè)區(qū)別選擇依據(jù)就很清楚了如果這個(gè)條件在頁(yè)面生命周期內(nèi)幾乎不會(huì)變或者切換頻率極低用v-if能省下不必要的DOM渲染開銷。如果元素頻繁切換顯示狀態(tài)比如標(biāo)簽頁(yè)切換、下拉菜單展開收起用v-show避免反復(fù)創(chuàng)建和銷毀DOM的性能損耗。在實(shí)際項(xiàng)目里我一般默認(rèn)用v-show除非該元素在初始渲染時(shí)就確實(shí)不需要出現(xiàn)或者加載成本很高。這個(gè)選擇直接影響用戶體驗(yàn)。5.2 v-for列表渲染的核心套路動(dòng)態(tài)列表是每個(gè)前端項(xiàng)目里逃不掉的需求。Vue用v-for指令來(lái)實(shí)現(xiàn)?；緦懛╱l li v-foritem in items v-bind:keyitem.id{{ item.name }}/li /ul對(duì)應(yīng)的數(shù)據(jù)data: { items: [ { id: 1, name: 蘋果 }, { id: 2, name: 香蕉 }, { id: 3, name: 橘子 } ] }Vue會(huì)遍歷items數(shù)組為每個(gè)元素生成一個(gè)li。在遍歷時(shí)可以拿到兩個(gè)參數(shù)值和索引li v-for(item, index) in items{{ index }} - {{ item.name }}/li這里的索引index是從0開始的常用于顯示序號(hào)。v-for還可以用來(lái)遍歷對(duì)象但實(shí)際開發(fā)中遍歷數(shù)組占90%以上。另外注意v-for通常配合key使用這個(gè)屬性極其重要。5.3 key屬性的價(jià)值別小看它key是Vue虛擬DOM算法的錨點(diǎn)。簡(jiǎn)單說(shuō)當(dāng)數(shù)據(jù)順序或內(nèi)容變化時(shí)Vue需要知道哪些節(jié)點(diǎn)是移動(dòng)了、哪些是新增的、哪些是刪除的。如果沒(méi)有keyVue只能靠索引去匹配很容易出現(xiàn)復(fù)用錯(cuò)亂尤其當(dāng)列表包含有狀態(tài)的子組件或表單輸入時(shí)后果是數(shù)據(jù)更新了但界面顯示的是舊內(nèi)容。選擇key值時(shí)盡量用業(yè)務(wù)上唯一的ID別用數(shù)組索引。為什么因?yàn)樗饕淼氖俏恢貌皇巧矸荨１热鐒h掉列表第一項(xiàng)后面所有項(xiàng)的索引都變了Vue會(huì)以為整個(gè)列表都變了性能變差同時(shí)還會(huì)引發(fā)選中狀態(tài)錯(cuò)亂。一個(gè)經(jīng)典的坑列表里每項(xiàng)有個(gè)輸入框你刪除了中間一項(xiàng)結(jié)果輸入框里的內(nèi)容錯(cuò)位了這就是不寫key或亂寫key的典型后遺癥。6. 實(shí)操演練做一個(gè)可排序的課程篩選頁(yè)面理論講再多不如動(dòng)手做一個(gè)能跑的例子。這節(jié)我們手寫一個(gè)小頁(yè)面把前面這些知識(shí)串起來(lái)。需求很簡(jiǎn)單給一組課程數(shù)據(jù)做篩選和排序。6.1 頁(yè)面結(jié)構(gòu)與樣式還是老規(guī)矩一個(gè)HTML文件一個(gè)JS文件。先定義頁(yè)面布局div idapp h3課程列表/h3 div 搜索關(guān)鍵詞: input typetext v-modelkeyword 排序方式: select v-modelsortType option valuedefault默認(rèn)/option option valuepriceAsc價(jià)格從低到高/option option valuepriceDesc價(jià)格從高到低/option /select /div ul li v-foritem in filteredList :keyitem.id {{ item.name }} - {{ item.price }}元 /li /ul p v-iffilteredList.length 0沒(méi)有符合條件的課程/p /div這個(gè)HTML里我們用到了v-model綁定輸入框和下拉框、v-for循環(huán)渲染、:key綁定唯一ID、v-if做空狀態(tài)處理。全部是通過(guò)數(shù)據(jù)驅(qū)動(dòng)的形態(tài)完成的。6.2 數(shù)據(jù)處理邏輯JS部分直接上完整代碼var app new Vue({ el: #app, data: { keyword: , sortType: default, courses: [ { id: 1, name: JavaScript基礎(chǔ), price: 99 }, { id: 2, name: Vue實(shí)戰(zhàn)入門, price: 129 }, { id: 3, name: CSS高級(jí)技巧, price: 79 }, { id: 4, name: Node.js服務(wù)端開發(fā), price: 199 } ] }, computed: { filteredList: function() { var self this; var list self.courses.filter(function(item) { return item.name.indexOf(self.keyword) ! -1; }); if (self.sortType priceAsc) { list.sort(function(a, b) { return a.price - b.price; }); } else if (self.sortType priceDesc) { list.sort(function(a, b) { return b.price - a.price; }); } return list; } } });核心邏輯全都封裝在filteredList這個(gè)計(jì)算屬性里。先按關(guān)鍵詞過(guò)濾再按價(jià)格排序。模板里不需要寫任何復(fù)雜邏輯只需要引用filteredList即可。6.3 運(yùn)行效果與優(yōu)化點(diǎn)打開頁(yè)面你會(huì)看到四個(gè)課程。在搜索框里輸入“Vue”列表只會(huì)剩下“Vue實(shí)戰(zhàn)入門”把排序方式切換為“價(jià)格從高到低”課程順序會(huì)立刻反過(guò)來(lái)。全程沒(méi)有任何DOM操作所有改變都是數(shù)據(jù)驅(qū)動(dòng)的。為什么用computed而不是methods因?yàn)閿?shù)據(jù)不變時(shí)計(jì)算屬性有緩存搜索和排序的結(jié)果不需要重復(fù)計(jì)算。如果每次渲染都調(diào)用一個(gè)方法性能會(huì)白白浪費(fèi)在一些很簡(jiǎn)單的運(yùn)算上。這個(gè)案例還可以繼續(xù)擴(kuò)展加篩選分類、加分頁(yè)、加數(shù)量統(tǒng)計(jì)等等。但核心模式已經(jīng)展示出來(lái)了——數(shù)據(jù)和模板的聲明式綁定加上計(jì)算屬性的數(shù)據(jù)加工鏈路這就是傳統(tǒng)方式最常見(jiàn)的開發(fā)思路。7. 常見(jiàn)問(wèn)題排查與個(gè)人經(jīng)驗(yàn)補(bǔ)充7.1 頁(yè)面顯示原始代碼Vue沒(méi)有生效剛接觸時(shí)很容易遇到的麻煩把HTML打開模板上的{{ message }}原樣出現(xiàn)在頁(yè)面上就跟普通文本一樣。排查思路按照優(yōu)先級(jí)來(lái)瀏覽器控制臺(tái)有沒(méi)有報(bào)錯(cuò)如果提示Vue is not defined基本就是腳本沒(méi)有成功加載。檢查CDN地址是否能訪問(wèn)、是否因?yàn)榫W(wǎng)絡(luò)原因被攔截。el選擇器是否對(duì)應(yīng)正確如果實(shí)例掛載的節(jié)點(diǎn)ID寫錯(cuò)了Vue找不到掛載點(diǎn)同樣不會(huì)生效。腳本引入順序是否正確Vue的JS必須在app.js之前引入。因?yàn)閍pp.js里用了new Vue()執(zhí)行的時(shí)候如果Vue變量還不存在就直接報(bào)錯(cuò)停了。很多情況下最后一個(gè)順序問(wèn)題最隱蔽。HTML的script是按順序加載的這種傳統(tǒng)的依賴關(guān)系必須靠手動(dòng)保證一定要在JS業(yè)務(wù)代碼之前引入Vue本體。7.2 數(shù)據(jù)更新了但視圖沒(méi)變這種問(wèn)題排查起來(lái)更讓人頭疼因?yàn)槟阋呀?jīng)修改了數(shù)據(jù)console里面打印也正常但界面上就是沒(méi)變化。第一步控制臺(tái)看Vue實(shí)例是否有警告信息。開發(fā)版Vue在數(shù)據(jù)異常時(shí)會(huì)給出提示比如增刪數(shù)組元素這類操作Vue 2里需要特殊寫法的。為什么因?yàn)橹疤岬降膁efineProperty機(jī)制對(duì)數(shù)組的新增索引、length變更等操作監(jiān)聽不到必須用Vue提供的方法來(lái)觸發(fā)更新比如數(shù)組.push(...)、Vue.set等。傳統(tǒng)方式下我建議data里的數(shù)組要變更時(shí)優(yōu)先用push、splice這些數(shù)組方法而不是直接用arr[i] newValue這種索引賦值。否則視圖可能不動(dòng)你還一臉懵。7.3 使用瀏覽器開發(fā)者工具輔助定位用傳統(tǒng)方式開發(fā)Vue瀏覽器插件工具會(huì)在頁(yè)面里注入一個(gè)Vue面板可以實(shí)時(shí)查看某個(gè)實(shí)例的data、computed、methods等狀態(tài)。在排查問(wèn)題時(shí)非常好用。發(fā)現(xiàn)頁(yè)面數(shù)據(jù)不對(duì)時(shí)我一般先打開這個(gè)面板看數(shù)據(jù)本身對(duì)不對(duì)判斷問(wèn)題到底出在“數(shù)據(jù)層”還是“渲染層”。如果數(shù)據(jù)是對(duì)的再看模板綁定如果數(shù)據(jù)本身就不對(duì)先修數(shù)據(jù)邏輯。這種分層排查的思路在復(fù)雜項(xiàng)目里能幫你節(jié)省一半的時(shí)間精力。7.4 老生在實(shí)踐中的幾點(diǎn)體會(huì)最后說(shuō)點(diǎn)個(gè)人經(jīng)驗(yàn)。用了快十年的Vue我很慶幸當(dāng)年是先接觸傳統(tǒng)引入方式再學(xué)的構(gòu)建工具。直接裸寫Vue讓我對(duì)組件化、響應(yīng)式、模板生命周期都有更本質(zhì)的理解而不是模板生成器的一個(gè)操作員只會(huì)復(fù)制粘貼。第一這種模式最適合練習(xí)“數(shù)據(jù)驅(qū)動(dòng)思維”。沒(méi)有額外腳手架干擾每次交互都要自己定義數(shù)據(jù)再把數(shù)據(jù)和模板綁定好。思考路徑極其清晰。第二不要以為傳統(tǒng)方式等于低效。配合閱讀官方文檔和API完全能寫出結(jié)構(gòu)優(yōu)雅、性能達(dá)標(biāo)的完整項(xiàng)目。很多老系統(tǒng)到今天還在使用類似方案維持著幾百上千個(gè)頁(yè)面。第三這系列后續(xù)我還打算講講Vue組件怎么寫、自定義指令和插槽怎么用以及如何手寫輪子實(shí)現(xiàn)一個(gè)輕量級(jí)狀態(tài)管理方案。只要你把第一篇的底子打扎實(shí)了后面就是水到渠成的事。平時(shí)我寫個(gè)人小工具或者做臨時(shí)驗(yàn)證的時(shí)候都是直接拖一個(gè)Vue CDN鏈接進(jìn)HTML連開項(xiàng)目都不會(huì)開。哪怕只是為了能快速驗(yàn)證一個(gè)想法掌握這種原汁原味的Vue開發(fā)玩法怎么算都不虧。 不用Webpack的Vue：CDN引入、模板語(yǔ)法與響應(yīng)式開發(fā)入門
提到Vue現(xiàn)在很多人第一反應(yīng)就是腳手架、Webpack/Vite那一套。但我今天想聊的是另一種打開方式——不使用Webpack的Vue傳統(tǒng)前端使用方式。也就是直接把Vue當(dāng)做一個(gè)普通的JS庫(kù)來(lái)用在HTML里用script標(biāo)簽引進(jìn)來(lái)就開干。這種玩法在如今構(gòu)建工具滿天飛的環(huán)境下聽起來(lái)確實(shí)有點(diǎn)“復(fù)古”但它真的不是過(guò)時(shí)而是很多場(chǎng)景下的最優(yōu)解。剛接觸Vue的朋友被各種工具鏈繞得頭暈眼花配置環(huán)境的時(shí)間比寫代碼還長(zhǎng)。而有經(jīng)驗(yàn)的開發(fā)者也知道不是所有項(xiàng)目都需要一套完整工程化體系。這篇我先講最基礎(chǔ)的部分怎么引入Vue、怎么創(chuàng)建一個(gè)最簡(jiǎn)單的實(shí)例、怎么寫模板語(yǔ)法、怎么處理事件和樣式。這些是整個(gè)系列的地基也是后續(xù)深入組合式API、組件化開發(fā)的前提。把基礎(chǔ)打牢你后面看任何Vue代碼都不會(huì)發(fā)怵。1. 緣起為什么還要聊一個(gè)“老掉牙”的話題1.1 現(xiàn)代構(gòu)建流程的復(fù)雜度問(wèn)題這幾年前端開發(fā)的“工程化”確實(shí)成熟了但也把不少初學(xué)者擋在了門外。記得我最早接觸Vue時(shí)按教程走第一步就是裝Node.js然后全局安裝腳手架再執(zhí)行創(chuàng)建命令。中間遇到權(quán)限問(wèn)題、網(wǎng)絡(luò)超時(shí)、版本沖突光環(huán)境就折騰了兩三天真正寫Vue代碼的時(shí)間幾乎為零。那種挫敗感很多人應(yīng)該體會(huì)過(guò)。而且構(gòu)建工具本身也在不斷演進(jìn)。今天你用Webpack配置了一大堆東西明天可能社區(qū)就推薦Vite了。但無(wú)論工具怎么變Vue的核心概念——響應(yīng)式數(shù)據(jù)、模板指令、組件這些從來(lái)沒(méi)變過(guò)。不通過(guò)構(gòu)建工具直接在瀏覽器里跑Vue恰恰能讓這些核心概念以最直白的方式呈現(xiàn)出來(lái)。說(shuō)白了工具是為解決問(wèn)題服務(wù)的而不是反過(guò)來(lái)。如果只是做一個(gè)活動(dòng)頁(yè)、一個(gè)課程表小程序、一個(gè)后臺(tái)系統(tǒng)的局部交互模塊非要上一套完整的工程化體系反而是本末倒置。1.2 傳統(tǒng)引入方式的適用場(chǎng)景那什么樣的情況適合這種傳統(tǒng)方式我盤點(diǎn)了一下大概有這么幾類公司老項(xiàng)目里要局部引入Vue做交互比如給原有的服務(wù)端模板頁(yè)面加上實(shí)時(shí)篩選、動(dòng)態(tài)表格。個(gè)人練手做小demo驗(yàn)證一個(gè)想法或者寫點(diǎn)學(xué)習(xí)筆記。后端同學(xué)一個(gè)人想搞定一個(gè)帶簡(jiǎn)單交互的內(nèi)部工具不想折騰node環(huán)境。某些部署環(huán)境限制多不能隨意跑構(gòu)建命令但可以直接放靜態(tài)文件。其實(shí)還有一個(gè)很實(shí)際的原因加載速度快。CDN上的Vue文件本身就是壓縮好的直接引入沒(méi)有任何打包和轉(zhuǎn)換過(guò)程。對(duì)于簡(jiǎn)單頁(yè)面來(lái)說(shuō)首屏性能可能比你引一堆按需加載的模塊還要好。這個(gè)系列我打算用幾篇文章把這種傳統(tǒng)Vue開發(fā)方式從入門到進(jìn)階完整過(guò)一遍。作為第一篇先把地基打好。補(bǔ)充一句本文的示例代碼都能直接在瀏覽器里跑不需要任何命令行操作。你只需要準(zhǔn)備一個(gè)文本編輯器和一個(gè)瀏覽器就夠了。2. 環(huán)境準(zhǔn)備與引入Vue2.1 CDN引入與本地文件引入之爭(zhēng)在傳統(tǒng)方式下引入Vue就兩種做法一種是直接用script標(biāo)簽引用CDN地址另一種是下載一個(gè)Vue的JS文件放到項(xiàng)目目錄里。CDN方式最簡(jiǎn)單幾行代碼搞定!-- 開發(fā)版包含完整警告和輔助調(diào)試工具適合學(xué)習(xí)階段 -- script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script注意上面是Vue 2的寫法。如果你用的是Vue 3標(biāo)簽路徑略有不同后面會(huì)專門提到。這里我為什么要提Vue 2因?yàn)橄喈?dāng)一部分傳統(tǒng)項(xiàng)目和老代碼庫(kù)用的還是Vue 2而且很多開箱即用的UI框架在Vue 2下生態(tài)最穩(wěn)定。學(xué)習(xí)傳統(tǒng)開發(fā)方式時(shí)從Vue 2入手一天就能上手后續(xù)再看Vue 3也不會(huì)覺(jué)得困難。畢竟響應(yīng)式的核心思想和模板機(jī)制是一脈相承的。本地文件方式也簡(jiǎn)單官網(wǎng)下載vue.js和vue.min.js兩個(gè)文件放到j(luò)s目錄下頁(yè)面里引用相對(duì)路徑就行script src/js/vue.min.js/script兩種方式怎么選我的建議是只要能聯(lián)網(wǎng)優(yōu)先用CDN。別問(wèn)為什么省事。但要注意如果目標(biāo)項(xiàng)目是在內(nèi)網(wǎng)運(yùn)行或者對(duì)首屏加載速度有極致要求那就下載到本地。下載到本地時(shí)記得開發(fā)時(shí)引vue.js有警告提示上線時(shí)引vue.min.js壓縮版。2.2 開發(fā)版與生產(chǎn)版的差異Vue的JS文件官方分了開發(fā)版和生產(chǎn)版。差別主要在開發(fā)版會(huì)帶上完整的警告信息、把所有的斷言和提示邏輯都保留生產(chǎn)版則把這些全部壓縮去掉體積小一大截。比如你在代碼里寫了不存在的屬性開發(fā)版會(huì)立刻在控制臺(tái)給你一條紅色的警告提示哪個(gè)組件、哪個(gè)位置出了問(wèn)題生產(chǎn)版呢悄悄忽略什么都不報(bào)。所以自己學(xué)習(xí)的時(shí)候一定用開發(fā)版。我以前見(jiàn)過(guò)一位同事上線后某個(gè)數(shù)據(jù)一直顯示不出來(lái)排查了半天才發(fā)現(xiàn)生產(chǎn)版把警告都吞了要是開發(fā)時(shí)能看到警告一分鐘就能定位問(wèn)題。具體CDN地址可以根據(jù)版本去官方文檔的安裝頁(yè)找到。記住一句話學(xué)的時(shí)候帶警告部署的時(shí)候換壓縮版這是兩條鐵律。2.3 創(chuàng)建第一個(gè)Vue實(shí)例hello world的又一個(gè)版本項(xiàng)目文件就三個(gè)一個(gè)HTML文件、一個(gè)JS文件或直接在HTML里寫、引入Vue。我習(xí)慣把Vue邏輯單獨(dú)放在一個(gè)app.js里HTML只負(fù)責(zé)結(jié)構(gòu)。先看HTML!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleVue傳統(tǒng)方式入門/title /head body div idapp p{{ message }}/p /div script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script script srcapp.js/script /body /html再看app.jsvar app new Vue({ el: #app, data: { message: 你好Vue } });打開瀏覽器頁(yè)面上就會(huì)顯示“你好Vue”。核心就三行el指定Vue實(shí)例掛載到哪個(gè)DOM節(jié)點(diǎn)data里存放響應(yīng)式數(shù)據(jù){{ message }}把數(shù)據(jù)渲染到模板里。當(dāng)你通過(guò)app.message 換個(gè)內(nèi)容修改數(shù)據(jù)時(shí)頁(yè)面會(huì)自動(dòng)刷新不需要寫任何DOM操作代碼。這就是響應(yīng)式最直觀的體現(xiàn)。3. 模板語(yǔ)法花括號(hào)、指令和它們背后的邏輯3.1 Mustache插值把數(shù)據(jù)“放”進(jìn)去上面用到的{{ message }}這種雙花括號(hào)的寫法在Vue里叫Mustache插值。它不只是放一個(gè)簡(jiǎn)單的變量里面可以寫任何合法的JavaScript表達(dá)式注意是表達(dá)式不能是語(yǔ)句。p{{ number 1 }}/p p{{ message.split().reverse().join() }}/p p{{ isOK ? 條件為真 : 條件為假 }}/p這些寫法都是允許的。但不要太離譜比如在插值里寫一長(zhǎng)串業(yè)務(wù)邏輯那就很糟糕了。模板的意義在于聲明結(jié)構(gòu)復(fù)雜的計(jì)算應(yīng)該挪到后面要講的計(jì)算屬性里去。還有一個(gè)細(xì)節(jié)插值是正確的做HTML轉(zhuǎn)義的。什么意思如果message的值是scriptalert(xss)/scriptVue在渲染時(shí)會(huì)把尖括號(hào)轉(zhuǎn)成lt;和gt;直接當(dāng)成字符串顯示出來(lái)而不會(huì)去執(zhí)行里面的腳本。這是安全底線千萬(wàn)別用不需要轉(zhuǎn)義的v-html指令去渲染用戶輸入的內(nèi)容。3.2 v-bind與v-model屬性綁定的兩種形態(tài)花括號(hào)插值只能作用于標(biāo)簽體里的文本內(nèi)容如果你想動(dòng)態(tài)綁定HTML標(biāo)簽上的屬性比如href、class、style就得用指令。指令是Vue模板里以v-開頭的那幾個(gè)特殊屬性。v-bind的作用就是動(dòng)態(tài)綁定一個(gè)屬性a v-bind:hreflinkUrl點(diǎn)擊跳轉(zhuǎn)/a這里的linkUrl是Vue實(shí)例data里的一個(gè)數(shù)據(jù)項(xiàng)。Vue會(huì)把它的值設(shè)置為href屬性的最終值。這個(gè)指令太常用了所以Vue提供了非常流行的縮寫——直接用冒號(hào)a :hreflinkUrl點(diǎn)擊跳轉(zhuǎn)/a初看可能會(huì)有點(diǎn)奇怪但習(xí)慣之后你會(huì)發(fā)現(xiàn)寫代碼效率高了不少。v-model則是專門用于表單元素的雙向綁定。所謂雙向指的不只是數(shù)據(jù)變化會(huì)更新頁(yè)面頁(yè)面上的用戶輸入也會(huì)反向同步到數(shù)據(jù)里。比如input typetext v-modelsearchText用戶在輸入框里敲的每一個(gè)字符都會(huì)實(shí)時(shí)同步到searchText這個(gè)數(shù)據(jù)上。這在以前的原生開發(fā)里要監(jiān)聽input事件再手動(dòng)賦值現(xiàn)在一行指令搞定也體現(xiàn)了Vue數(shù)據(jù)驅(qū)動(dòng)思想的意義——你只管維護(hù)數(shù)據(jù)DOM層的變化全交給框架。3.3 v-on事件綁定用戶交互的入口有了數(shù)據(jù)綁定自然就需要事件處理。v-on用來(lái)綁定DOM事件同樣有縮寫用代替button v-on:clickhandleClick點(diǎn)擊/button button clickhandleClick點(diǎn)擊縮寫寫法/buttonhandleClick是Vue實(shí)例methods里定義的方法var app new Vue({ el: #app, data: { count: 0 }, methods: { handleClick: function() { this.count 1; } } });methods里的方法在Vue實(shí)例上可以直接通過(guò)this訪問(wèn)到data里的數(shù)據(jù)。這是傳統(tǒng)方式寫交互最核心的技能之一。你可能會(huì)想為什么不直接在v-on后面寫個(gè)表達(dá)式其實(shí)也可以比如clickcount 1但復(fù)雜邏輯一定要提到methods里面去。模板里寫邏輯越少越好。4. 響應(yīng)式原理與數(shù)據(jù)驅(qū)動(dòng)頁(yè)面為什么能自己動(dòng)4.1 為什么數(shù)據(jù)改了頁(yè)面就更新Vue的響應(yīng)式機(jī)制是它最核心的競(jìng)爭(zhēng)力。在傳統(tǒng)方式下這個(gè)機(jī)制在底層是怎么實(shí)現(xiàn)的以Vue 2為例它會(huì)把data里的每個(gè)屬性都經(jīng)過(guò)Object.defineProperty處理給屬性加上getter和setter。當(dāng)屬性被讀取時(shí)比如模板渲染Vue會(huì)記錄誰(shuí)在依賴這個(gè)屬性當(dāng)屬性被修改時(shí)它就會(huì)通知所有依賴方去更新。打個(gè)比方這就好比一間教室里老師在黑板上寫了個(gè)通知“明天下午三點(diǎn)開會(huì)”。同學(xué)們模板中的各個(gè)位置看到這個(gè)通知后都會(huì)記在備忘錄里。老師后來(lái)又把通知改成“推遲到四點(diǎn)”只要改一次黑板所有記了備忘錄的同學(xué)都會(huì)按新時(shí)間去執(zhí)行不需要挨個(gè)通知。這正是Vue開發(fā)的思維模式你只需要修改數(shù)據(jù)界面上所有跟這個(gè)數(shù)據(jù)有關(guān)的部分都會(huì)自動(dòng)跟著變化。4.2 data為什么推薦用函數(shù)返回既然提到了data就不得不提一個(gè)關(guān)鍵細(xì)節(jié)。對(duì)于最簡(jiǎn)單的Vue實(shí)例data可以是一個(gè)對(duì)象data: { message: hello }但在后面會(huì)遇到的組件定義里data就必須是一個(gè)函數(shù)返回一個(gè)新對(duì)象。這么設(shè)計(jì)是為了保證每個(gè)組件實(shí)例都持有自己獨(dú)立的數(shù)據(jù)拷貝不會(huì)互相串味。這可能是很多初學(xué)者第一次寫組件死活不更新數(shù)據(jù)的根源兩個(gè)組件實(shí)例共享了同一個(gè)data對(duì)象。我建議從一開始就養(yǎng)成良好的習(xí)慣——即使是根實(shí)例也寫成函數(shù)返回的形式data: function() { return { message: hello }; }傳統(tǒng)方式的演示階段不改問(wèn)題不大但一旦過(guò)渡到組件協(xié)作這個(gè)習(xí)慣能幫你少踩很多坑。4.3 計(jì)算屬性模板里少寫邏輯的利器模板里寫復(fù)雜表達(dá)式不僅看著亂每渲染一次還會(huì)重新計(jì)算一遍浪費(fèi)性能。Vue為此提供了計(jì)算屬性computed。它看起來(lái)像是一個(gè)方法但本質(zhì)上是基于依賴緩存的屬性。var app new Vue({ el: #app, data: { firstName: 張, lastName: 三 }, computed: { fullName: function() { return this.firstName this.lastName; } } });模板里直接用{{ fullName }}把拼接邏輯放在計(jì)算屬性里清清楚楚。而且只要firstName和lastName沒(méi)有變化多次訪問(wèn)fullName返回的都是緩存值不會(huì)重復(fù)執(zhí)行函數(shù)體。理解緩存機(jī)制是區(qū)分老手和新手的標(biāo)志之一。5. 條件渲染與列表渲染讓頁(yè)面結(jié)構(gòu)和數(shù)據(jù)對(duì)齊5.1 v-if與v-show條件渲染的二選一開發(fā)過(guò)程中經(jīng)常會(huì)遇到這種需求某個(gè)區(qū)塊在特定條件下顯示否則隱藏。Vue提供兩條指令來(lái)處理v-if和v-show。兩者的區(qū)別很多網(wǎng)上的文章都講過(guò)。這里我用最real的經(jīng)驗(yàn)總結(jié)v-if是真正的條件渲染為false時(shí)DOM位置上就是空的什么都不會(huì)渲染v-show則是用CSS的display來(lái)控制顯隱元素始終存在于DOM中只是被隱藏了?；谶@個(gè)區(qū)別選擇依據(jù)就很清楚了如果這個(gè)條件在頁(yè)面生命周期內(nèi)幾乎不會(huì)變或者切換頻率極低用v-if能省下不必要的DOM渲染開銷。如果元素頻繁切換顯示狀態(tài)比如標(biāo)簽頁(yè)切換、下拉菜單展開收起用v-show避免反復(fù)創(chuàng)建和銷毀DOM的性能損耗。在實(shí)際項(xiàng)目里我一般默認(rèn)用v-show除非該元素在初始渲染時(shí)就確實(shí)不需要出現(xiàn)或者加載成本很高。這個(gè)選擇直接影響用戶體驗(yàn)。5.2 v-for列表渲染的核心套路動(dòng)態(tài)列表是每個(gè)前端項(xiàng)目里逃不掉的需求。Vue用v-for指令來(lái)實(shí)現(xiàn)?；緦懛╱l li v-foritem in items v-bind:keyitem.id{{ item.name }}/li /ul對(duì)應(yīng)的數(shù)據(jù)data: { items: [ { id: 1, name: 蘋果 }, { id: 2, name: 香蕉 }, { id: 3, name: 橘子 } ] }Vue會(huì)遍歷items數(shù)組為每個(gè)元素生成一個(gè)li。在遍歷時(shí)可以拿到兩個(gè)參數(shù)值和索引li v-for(item, index) in items{{ index }} - {{ item.name }}/li這里的索引index是從0開始的常用于顯示序號(hào)。v-for還可以用來(lái)遍歷對(duì)象但實(shí)際開發(fā)中遍歷數(shù)組占90%以上。另外注意v-for通常配合key使用這個(gè)屬性極其重要。5.3 key屬性的價(jià)值別小看它key是Vue虛擬DOM算法的錨點(diǎn)。簡(jiǎn)單說(shuō)當(dāng)數(shù)據(jù)順序或內(nèi)容變化時(shí)Vue需要知道哪些節(jié)點(diǎn)是移動(dòng)了、哪些是新增的、哪些是刪除的。如果沒(méi)有keyVue只能靠索引去匹配很容易出現(xiàn)復(fù)用錯(cuò)亂尤其當(dāng)列表包含有狀態(tài)的子組件或表單輸入時(shí)后果是數(shù)據(jù)更新了但界面顯示的是舊內(nèi)容。選擇key值時(shí)盡量用業(yè)務(wù)上唯一的ID別用數(shù)組索引。為什么因?yàn)樗饕淼氖俏恢貌皇巧矸荨１热鐒h掉列表第一項(xiàng)后面所有項(xiàng)的索引都變了Vue會(huì)以為整個(gè)列表都變了性能變差同時(shí)還會(huì)引發(fā)選中狀態(tài)錯(cuò)亂。一個(gè)經(jīng)典的坑列表里每項(xiàng)有個(gè)輸入框你刪除了中間一項(xiàng)結(jié)果輸入框里的內(nèi)容錯(cuò)位了這就是不寫key或亂寫key的典型后遺癥。6. 實(shí)操演練做一個(gè)可排序的課程篩選頁(yè)面理論講再多不如動(dòng)手做一個(gè)能跑的例子。這節(jié)我們手寫一個(gè)小頁(yè)面把前面這些知識(shí)串起來(lái)。需求很簡(jiǎn)單給一組課程數(shù)據(jù)做篩選和排序。6.1 頁(yè)面結(jié)構(gòu)與樣式還是老規(guī)矩一個(gè)HTML文件一個(gè)JS文件。先定義頁(yè)面布局div idapp h3課程列表/h3 div 搜索關(guān)鍵詞: input typetext v-modelkeyword 排序方式: select v-modelsortType option valuedefault默認(rèn)/option option valuepriceAsc價(jià)格從低到高/option option valuepriceDesc價(jià)格從高到低/option /select /div ul li v-foritem in filteredList :keyitem.id {{ item.name }} - {{ item.price }}元 /li /ul p v-iffilteredList.length 0沒(méi)有符合條件的課程/p /div這個(gè)HTML里我們用到了v-model綁定輸入框和下拉框、v-for循環(huán)渲染、:key綁定唯一ID、v-if做空狀態(tài)處理。全部是通過(guò)數(shù)據(jù)驅(qū)動(dòng)的形態(tài)完成的。6.2 數(shù)據(jù)處理邏輯JS部分直接上完整代碼var app new Vue({ el: #app, data: { keyword: , sortType: default, courses: [ { id: 1, name: JavaScript基礎(chǔ), price: 99 }, { id: 2, name: Vue實(shí)戰(zhàn)入門, price: 129 }, { id: 3, name: CSS高級(jí)技巧, price: 79 }, { id: 4, name: Node.js服務(wù)端開發(fā), price: 199 } ] }, computed: { filteredList: function() { var self this; var list self.courses.filter(function(item) { return item.name.indexOf(self.keyword) ! -1; }); if (self.sortType priceAsc) { list.sort(function(a, b) { return a.price - b.price; }); } else if (self.sortType priceDesc) { list.sort(function(a, b) { return b.price - a.price; }); } return list; } } });核心邏輯全都封裝在filteredList這個(gè)計(jì)算屬性里。先按關(guān)鍵詞過(guò)濾再按價(jià)格排序。模板里不需要寫任何復(fù)雜邏輯只需要引用filteredList即可。6.3 運(yùn)行效果與優(yōu)化點(diǎn)打開頁(yè)面你會(huì)看到四個(gè)課程。在搜索框里輸入“Vue”列表只會(huì)剩下“Vue實(shí)戰(zhàn)入門”把排序方式切換為“價(jià)格從高到低”課程順序會(huì)立刻反過(guò)來(lái)。全程沒(méi)有任何DOM操作所有改變都是數(shù)據(jù)驅(qū)動(dòng)的。為什么用computed而不是methods因?yàn)閿?shù)據(jù)不變時(shí)計(jì)算屬性有緩存搜索和排序的結(jié)果不需要重復(fù)計(jì)算。如果每次渲染都調(diào)用一個(gè)方法性能會(huì)白白浪費(fèi)在一些很簡(jiǎn)單的運(yùn)算上。這個(gè)案例還可以繼續(xù)擴(kuò)展加篩選分類、加分頁(yè)、加數(shù)量統(tǒng)計(jì)等等。但核心模式已經(jīng)展示出來(lái)了——數(shù)據(jù)和模板的聲明式綁定加上計(jì)算屬性的數(shù)據(jù)加工鏈路這就是傳統(tǒng)方式最常見(jiàn)的開發(fā)思路。7. 常見(jiàn)問(wèn)題排查與個(gè)人經(jīng)驗(yàn)補(bǔ)充7.1 頁(yè)面顯示原始代碼Vue沒(méi)有生效剛接觸時(shí)很容易遇到的麻煩把HTML打開模板上的{{ message }}原樣出現(xiàn)在頁(yè)面上就跟普通文本一樣。排查思路按照優(yōu)先級(jí)來(lái)瀏覽器控制臺(tái)有沒(méi)有報(bào)錯(cuò)如果提示Vue is not defined基本就是腳本沒(méi)有成功加載。檢查CDN地址是否能訪問(wèn)、是否因?yàn)榫W(wǎng)絡(luò)原因被攔截。el選擇器是否對(duì)應(yīng)正確如果實(shí)例掛載的節(jié)點(diǎn)ID寫錯(cuò)了Vue找不到掛載點(diǎn)同樣不會(huì)生效。腳本引入順序是否正確Vue的JS必須在app.js之前引入。因?yàn)閍pp.js里用了new Vue()執(zhí)行的時(shí)候如果Vue變量還不存在就直接報(bào)錯(cuò)停了。很多情況下最后一個(gè)順序問(wèn)題最隱蔽。HTML的script是按順序加載的這種傳統(tǒng)的依賴關(guān)系必須靠手動(dòng)保證一定要在JS業(yè)務(wù)代碼之前引入Vue本體。7.2 數(shù)據(jù)更新了但視圖沒(méi)變這種問(wèn)題排查起來(lái)更讓人頭疼因?yàn)槟阋呀?jīng)修改了數(shù)據(jù)console里面打印也正常但界面上就是沒(méi)變化。第一步控制臺(tái)看Vue實(shí)例是否有警告信息。開發(fā)版Vue在數(shù)據(jù)異常時(shí)會(huì)給出提示比如增刪數(shù)組元素這類操作Vue 2里需要特殊寫法的。為什么因?yàn)橹疤岬降膁efineProperty機(jī)制對(duì)數(shù)組的新增索引、length變更等操作監(jiān)聽不到必須用Vue提供的方法來(lái)觸發(fā)更新比如數(shù)組.push(...)、Vue.set等。傳統(tǒng)方式下我建議data里的數(shù)組要變更時(shí)優(yōu)先用push、splice這些數(shù)組方法而不是直接用arr[i] newValue這種索引賦值。否則視圖可能不動(dòng)你還一臉懵。7.3 使用瀏覽器開發(fā)者工具輔助定位用傳統(tǒng)方式開發(fā)Vue瀏覽器插件工具會(huì)在頁(yè)面里注入一個(gè)Vue面板可以實(shí)時(shí)查看某個(gè)實(shí)例的data、computed、methods等狀態(tài)。在排查問(wèn)題時(shí)非常好用。發(fā)現(xiàn)頁(yè)面數(shù)據(jù)不對(duì)時(shí)我一般先打開這個(gè)面板看數(shù)據(jù)本身對(duì)不對(duì)判斷問(wèn)題到底出在“數(shù)據(jù)層”還是“渲染層”。如果數(shù)據(jù)是對(duì)的再看模板綁定如果數(shù)據(jù)本身就不對(duì)先修數(shù)據(jù)邏輯。這種分層排查的思路在復(fù)雜項(xiàng)目里能幫你節(jié)省一半的時(shí)間精力。7.4 老生在實(shí)踐中的幾點(diǎn)體會(huì)最后說(shuō)點(diǎn)個(gè)人經(jīng)驗(yàn)。用了快十年的Vue我很慶幸當(dāng)年是先接觸傳統(tǒng)引入方式再學(xué)的構(gòu)建工具。直接裸寫Vue讓我對(duì)組件化、響應(yīng)式、模板生命周期都有更本質(zhì)的理解而不是模板生成器的一個(gè)操作員只會(huì)復(fù)制粘貼。第一這種模式最適合練習(xí)“數(shù)據(jù)驅(qū)動(dòng)思維”。沒(méi)有額外腳手架干擾每次交互都要自己定義數(shù)據(jù)再把數(shù)據(jù)和模板綁定好。思考路徑極其清晰。第二不要以為傳統(tǒng)方式等于低效。配合閱讀官方文檔和API完全能寫出結(jié)構(gòu)優(yōu)雅、性能達(dá)標(biāo)的完整項(xiàng)目。很多老系統(tǒng)到今天還在使用類似方案維持著幾百上千個(gè)頁(yè)面。第三這系列后續(xù)我還打算講講Vue組件怎么寫、自定義指令和插槽怎么用以及如何手寫輪子實(shí)現(xiàn)一個(gè)輕量級(jí)狀態(tài)管理方案。只要你把第一篇的底子打扎實(shí)了后面就是水到渠成的事。平時(shí)我寫個(gè)人小工具或者做臨時(shí)驗(yàn)證的時(shí)候都是直接拖一個(gè)Vue CDN鏈接進(jìn)HTML連開項(xiàng)目都不會(huì)開。哪怕只是為了能快速驗(yàn)證一個(gè)想法掌握這種原汁原味的Vue開發(fā)玩法怎么算都不虧。