詳細總結流行前端框架Vue重難點概念

• 1 什么是Vue?
• 2 Vue基本屬性
• 3 Vue基本指令
• 4 組件化
• • 4.1 創建組件
  • • 4.1.1 注冊全局組件
    • 4.1.2 注冊局部組件
  • 4.2 組件通信
• 5 Vue底層原理
• • 5.1 虛擬DOM
  • 5.2 Vue運行流程
  • 5.3 生命周期鉤子
• 6 Vue-cli腳手架
• • 6.1 Webpack工具
  • • 6.1.1 基本配置
    • 6.1.2 轉換器Loader
    • 6.1.3 插件Plugin
    • 6.1.4 搭建本地服務器
  • 6.2 vue-cli
  • 6.3 Vue-router
  • 6.4 Vuex

1 什么是Vue?

Vue是一套用于構建用戶界面的漸進式框架，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

2 Vue基本屬性

基本屬性含義解釋

el	DOM元素	該屬性決定了該Vue實例被掛載到哪個DOM元素上，今后該DOM元素由此Vue實例直接管理
data	數據	該屬性用于存儲數據，既可以由開發者直接定義，也可以從網絡或服務器動態加載
methods	方法	該屬性用于在Vue對象中定義方法
computed	計算屬性	計算屬性是封裝了復雜邏輯函數的屬性，用于簡化屬性使用，增強可讀性和可維護性
components	局部組件	該屬性用于聲明該Vue實例可以使用的局部組件
template	HTML模板	該屬性決定該實例渲染的HTML結構，模板將會替換掛載的元素，掛載元素的內容都將被忽略，除非模板內容有分發插槽
props	配置	該屬性用于接收來自父組件的數據

表2.1

注：
計算屬性與方法的區別：前者基于緩存的。只在相關響應式發生改變時計算屬性才會重新求值，即只要響應式不變，多次訪問計算屬性會立即返回之前緩存的計算結果，而不必再次執行函數；而每次訪問方法都會重新執行函數，從效率來看，計算屬性優于方法。

3 Vue基本指令

基本指令含義舉例

v-once	聲明元素僅渲染一次，而不隨著數據動態加載	<h2 v-once> {{cnt}}</h2>
v-html	聲明以html格式解析渲染字符串	<h3 v-html=“url”></h3>
v-text	聲明以純文本形式解析字符串，該指令與mustache語法{{}}作用相似，但后者內部可書寫簡單JS表達式，應用更靈活	<h3 v-text=“url”></h3>
v-pre	跳過該元素及其子元素的Vue編譯過程，跳過大量無指令節點會加快編譯	<!-- 仍顯示{{url}} --><h3 v-pre>{{url}}</h3>
v-bind ：	聲明標簽中某些屬性動態綁定到Vue實例的屬性、對象	<a :href=“url”>百度</a><a v-bind:href=“url”>百度</a>
v-on @	綁定事件監聽器	<button @click=“add”>+</button>
v-if v-else-if v-else	條件渲染(不符合條件的元素及其子代脫離當前HTML文檔不渲染)	<p v-if=“mark>=90”>優</p><p v-else-if=“mark>=80”>良</p><p v-else>合格</p>
v-show	切換元素CSS樣式的display屬性
v-for	遍歷數組或對象	<li v-for=“(index，key,value) in obj”>{{index}}.{{key}}:{{value}}</li>
v-model	在表單控件(value屬性)或組件上創建雙向綁定	<input type=“text” v-model=“msg”>
v-slot #	設置作用域插槽或具名插槽	<template #btn><span>左span</span></template>

表3.1

注：
1、黃色標記的是對應指令的語法糖

2、使用v-on指令時，若監聽器無參數時可省略()；若監聽器有參數但省略()則默認第一個形參為事件對象；若監聽器有多個參數且包含事件對象，需要用$修飾符，例如：

<button @click="test(123,$event)">測試</button> test(num,e){console.log(num,e); }

v-on指令主要修飾符如表3.2所示，示例代碼：

<button @click.stop.once="test(123,$event)">測試</button> <button @keypress.enter="test">測試</button> 序號修飾符含義

1	stop	停止冒泡
2	prevent	阻止默認行為
3	once	只觸發一次
4	keycode || keyAlias	鍵值或鍵別名，聲明該事件僅由特定鍵觸發

表3.2

3、使用v-for指令遍歷數組時，數組的部分方法可以觸發響應式渲染，例如push()、pop()、shift()、unshift()、splice()、sort()、reverse()

4、v-model指令主要修飾符如表3.3所示。

序號修飾符含義

1	lazy	v-model默認在每次input事件觸發后同步輸入框的值與數據。該修飾符修改觸發事件為change
2	number	將輸入轉換為數值類型
3	trim	過濾輸入字符串的首末空白字符

表3.3

4 組件化

Vue組件化提供了一種抽象，可以開發出一個個獨立可復用的組件來構造復雜的整體應用，這個角度下，任何應用都會被抽象成一棵組件樹。組件分為全局組件——可以在所有Vue實例下使用；局部組件——僅在聲明局部組件的Vue實例下使用。一個組件可以理解為一個Vue實例，享有Vue實例的所有屬性。

圖4.1

4.1 創建組件

4.1.1 注冊全局組件

Vue.component('m_cpn',{template: '#cpn',data(){return {title: '我是標題',text: '我是內容'}} });

4.1.2 注冊局部組件

components:{m_cpn: {template: '#cpn',data(){return {title: '我是標題',text: '我是內容'}}} }

注冊組件時即將組件名(上面示例中為m_cpn)與HTML模板(上面示例中為cpn)綁定。必須指出，若在組件內部注冊局部組件，則此局部組件為該組件的子組件。組件必須掛載在某個Vue實例下，否則無法生效。

4.2 組件通信

組件對象自身的固有數據存儲在data屬性中，與Vue對象不同在于，組件的data屬性必須是函數，且該函數返回一個存儲數據的對象，以使每個組件使用獨立的內存空間，防止組件間數據的相互影響與耦合。

圖4.2

(1) 父組件傳遞數據給子組件——props屬性

props屬性通常是一個對象，內部包含數據對象，數據對象則支持一系列屬性：① type：接收數據類型驗證。可以指定type為JS內置類型，如String、Number等，也可為自定義數據結構；② default：未接收傳參時的默認數據。當type為Array或Object類型時，default必須為函數；③ required：為true時強制從父組件接收參數，否則報錯。

父組件還可以通過兩個屬性訪問子組件的數據：① $children：返回所有子組件對象組成的數組，但實際應用中子組件下標值不恒定，故一般不使用該屬性；② $refs：通過$ref.x返回ref屬性為x的子組件對象。

(2) 子組件傳遞數據給父組件——自定義事件

① 子組件中自定義事件，并在需要的時候將數據嵌入該事件發射到父組件

this.$emit('add-info',this.mBooks[index],index);

其中add-info即為子組件的自定義事件，后續參數為綁定事件的各個數據。

② 使用子組件的v-on指令，綁定自定義事件到父組件接收函數

<m_cpn :m-books="books" :m-msg="msg" @add-info="addClick"></m_cpn>

其中addClick即為父組件接收函數，缺省()時按順序傳入add-info發射的數據，接收函數內部訪問子組件數據時，亦要求按發射順序接收。類似地，子組件可通過$parent屬性訪問父組件，但會增強代際耦合，不建議使用。

5 Vue底層原理

5.1 虛擬DOM

如圖5.1所示，瀏覽器渲染引擎工作流程大致分以下步驟：

(1) 使用HTML分析器分析HTML元素，構建DOM樹；
(2) 使用CSS分析器分析CSS文件和元素行內樣式，生成頁面的樣式表；
(3) 將DOM樹和頁面樣式表關聯起來，構建渲染樹(Render樹)。由于每個DOM節點都有attach方法——接受樣式信息，返回渲染對象，因此該過程又稱為Attachment；
(4) 瀏覽器根據Render樹布局，為Render樹上每個節點確定在顯示屏上的精確坐標；
(5) 調用每個DOM節點的Paint方法，繪制頁面。

圖5.1 瀏覽器渲染引擎渲染流程

用原生JS或JQ操作DOM時，瀏覽器會從構建DOM樹開始從頭到尾執行一遍渲染流程，因此操作DOM的代價仍舊是昂貴的，頻繁操作還是會出現頁面卡頓，影響用戶體驗。虛擬DOM是渲染真實DOM之前，在內存中的JS對象，其設計是為了改善瀏覽器性能，因為操作JS對象比DOM節點速度快，這樣可以避免無謂的重復渲染，而只將最終效果反映到網頁。在網頁數據更新時會先對虛擬DOM進行打補丁(patch)和重渲染，再一次性渲染到真實DOM。

(a) 插入節點

(b) 遍歷插入

(c) 鏈表式插入 圖5.2 DOM Diff算法示例

網頁的變化本質上是DOM節點的變化，因此虛擬DOM的核心之一在于新舊DOM樹的比較，稱為DOM Diff算法。DOM Diff算法只對DOM樹的變化部分進行渲染，而對其余部分不作改動，避免遍歷，從而大大提高渲染效率。如圖5.2所示，DOM Diff只需變化新插入的節點，這意味著虛擬DOM樹并非數組類型的順序數據結構，而是鏈表型的無序數據結構，因此要高效應用虛擬DOM，需要為DOM節點指定key屬性。

5.2 Vue運行流程

圖5.3 Vue運行流程

可以看出在Vue架構中，最終渲染都由渲染函數完成。運行Vue框架有兩種模式：
(1) runtime-only：不包含模板編譯階段；
(2) runtime-compiler：包含模板編譯階段。

// runtime-only new Vue({el: '#app',render: h => h(App) })// runtime-compiler new Vue({el: '#app',components: { App },template: '<App/>' })

runtime-only運行時不包含模板編譯階段，所有模板<template></template>只能在.Vue文件中借助Vue插件vue-template-compiler完成開發時編譯，在項目打包時模板只已render函數形式存在于工程中，運行時不會二次編譯，因此runtime-only運行更快、項目更輕，但該模式下<template></template>不能存在于非.Vue文件中，否則無法渲染。

runtime-compiler函數不限制模板存在的文件形式，但模板僅在運行時編譯，性能低于runtime-only模式。

5.3 生命周期鉤子

Vue中生命周期指一個Vue實例從創建到銷毀的全部過程，如圖5.4所示。在Vue實例的生命周期中有很多特殊的時間節點，且往往需要在這些時間節點執行一定的邏輯。封裝了這些邏輯的函數稱為鉤子函數。鉤子函數不同于回調函數，前者在事件發生的第一時間激活，后者在事件發生后激活。

常見的生命周期鉤子函數如表5.1所示。

圖5.4 序號生命周期鉤子含義

1	beforeCreate()	實例初始化之后，數據觀測和事件配置之前調用，此時組件的options還未初始化
2	created()	實例初始化且完成options配置后，掛載開始前調用，$el屬性還未初始化
3	beforeMount()	掛載階段開始后，渲染網頁前調用，實例已完成模板編譯，生成虛擬DOM樹(此時$el為VDOM屬性)
4	mounted()	實例掛載完成，渲染到網頁后調用
5	beforeUpdate()	數據更新前調用，由于VDOM還未打補丁，此時進一步更改狀態不會觸發重渲染
6	updated()	數據更新后使用
7	beforeDestroy()	實例銷毀前調用，此時仍可訪問實例及其子代的各屬性
8	destroyed()	實例銷毀后調用
9	activated()	被keep-alive緩存的組件激活時調用
10	deactivated()	被keep-alive緩存的組件停用時調用

表5.1

6 Vue-cli腳手架

6.1 Webpack工具

6.1.1 基本配置

在大型前端工程中，模塊化有助于降低代碼耦合性，防止功能沖突。前端模塊化的方案有AMD、CMD、CommonJS、ES6等，其中除ES6外的模塊化開發方案都需要特定的運行環境。webpack是一個基于Node.js的現代JS應用的靜態模塊打包工具，統一了各模塊化方案，并且可以自動處理模塊間的相互依賴。

對于新工程，webpack打包的流程如下：

npm init // 安裝本地webpack包(@指定版本)npm install webpack@3.5 --save-dev// 安裝全局webpack包 // npm install webpack -g npm install

為便于不同項目的管理，通常在每個工程下安裝局部webpack包，防止版本沖突。但終端執行webpack卻會使用全局webpack包，因此要在產生的package.json中配置webpack啟動項：

"scripts": {"build": "webpack --config ./build/prod.config.js","dev": "webpack-dev-server --config ./build/dev.config.js --open "},

此時運行npm run build即可進行生產模式下項目的打包。

6.1.2 轉換器Loader

原生webpack只能處理JS文件及其依賴，但前端開發中還有CSS、Vue文件等，此時需要webpack轉化器loader對其他格式的文件進行擴展，大部分文件的轉化器可在webpack官網查詢。以安裝CSS、Vue擴展轉換器為例：

// 安裝CSS loader cnpm install style-loader --save-dev cnpm install css-loader --save-dev // 安裝Vue(運行時依賴,不加-dev) cnpm install vue@2.6.14 –save // 安裝Vue loader cnpm install vue-loader vue-template-compiler --save-dev

在配置文件.config.js中作如下配置：

module: {rules: [{test: /\.css$/, // 使能CSS打包// 使用多個loader時，從右向左讀// css-loader: 加載CSS文件// style-loader: 將樣式加載到DOMuse: ['style-loader', 'css-loader' ]},{test: /\.vue$/, // 使能vue打包use: ['vue-loader']}]}, resolve: {alias: {// 引入vue'vue$': 'vue/dist/vue.esm.js'}}

6.1.3 插件Plugin

webpack插件是對webpack現有功能的各種擴展，使webpack使用更方便，常用插件如表6.1所示。

名稱功能

HtmlWebpackPlugin	自動生成項目html文件(可指定生成模板)，并將打包的js文件以<script>標簽形式插入到該html文件的<body>中
UglyfyJsPlugin	壓縮打包后的js文件，減小項目體積，通常用于生產模式

表6.1 webpack常用插件

下面給出配置擴展插件的實例。

安裝插件：

cnpm install html-webpack-plugin --save-dev cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const webpack = require('webpack'); const uglifyJsWebpack = require('uglifyjs-webpack-plugin');module.exports = {...plugins:[// vue-loader15以上的版本需要此插件解析.vue文件new VueLoaderPlugin(),// 版權聲明new webpack.BannerPlugin('@Copyright Winter 2018 - 2021'),// 打包html到發布文件夾distnew HtmlWebpackPlugin({template: 'index.html' // html模板})],// 壓縮JS代碼optimization: {minimizer: [new uglifyJsWebpack()],} }

6.1.4 搭建本地服務器

安裝：

cnpm install webpack-dev-server --save-dev

配置.config.js：

// 服務器配置 devServer: {// 指定提供本地服務的文件夾static: {directory: path.join(__dirname, '../dist'),},// 實時監聽compress: true,// 指定服務器端口port: 8080 }

6.2 vue-cli

在大型項目開發時，需要使用Vue-CLI輔助完成代碼目錄結構、項目結構的部署、熱加載、單元測試、插件與與依賴安裝等配置。

在Vue-CLI中通過以下指令初始化項目：

// Vue-CLI 2.x vue init webpack project-name // Vue-CLI >= 3.0 vue create project-name

以Vue-CLI 4.5為例介紹主要代碼結構，如表6.2所示。

序號文件含義

1	dist	最終打包發布的生產版本應用
2	node_modules	npm加載的項目所需要的各種依賴模塊
3	public	靜態資源目錄，如圖片字體等(Vue-CLI 2.x中為static)
4	src	開發源目錄
5	assets	放置一些圖片，如logo等
6	components	組件文件
7	router	路由配置
8	App.vue	項目入口組件，構建了與其他組件的關聯關系
9	main.js	項目入口文件，配置依賴
10	.browserslistrc	瀏覽器適配性配置
11	.gitignore	Git提交項目的忽略文件
12	babel.config.js	檢測ES6語法，并轉化為ES5以提高瀏覽器兼容性
13	package-lock.json	項目依賴的實際版本信息
14	package.json	項目依賴的版本要求信息

表6.2

6.3 Vue-router

實現前端路由主要分為以下步驟：

(1) 路由管理器index.js中配置路由映射表

const routes = [{path: '/',redirect: '/home', // 重定向},{path: '/home',name: 'Home',component: Home,children: [{path: 'news',component: () => import('../views/HomeNews') // 路由懶加載},{path: 'message',component: () => import('../views/HomeMessage')}] },{path: '/user/:id',name: 'User',component: () => import('../views/User.vue')} ]

注意：

① 采用組件化開發，一條前端路由對應渲染一個組件(可嵌套其他組件)。
② 打包構建Web應用時，JS包通常體積較大，影響頁面加載。因此Vue提供了一種路由懶加載機制——將不同路由對應的組件分為不同代碼塊，當路由被訪問時才對該組件進行渲染和加載。通過箭頭函數導入的組件屬于懶加載模式。

(2) 路由器實例化并傳入路由表

const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes })export default router

(3) 將路由器掛載到根實例

createApp(App).use(router).mount('#app')

注意：

將路由器掛載到Web應用后會產生全局路由器實例router和局部路由實例route，通過this.$router和this.$route的語法訪問。

全局路由器對象常用的屬性和方法如表6.3所示，局部路由對象常用的屬性和方法如表6.4所示。

屬性/方法含義

push()	URL跳轉(向瀏覽器history對象入棧記錄)
go()	以當前路由為基準，在history棧中前進或后退若干路由
replace()	URL替換(不向瀏覽器history對象入棧記錄)
routes	全局路由映射表
currentRoute	當前激活的路由

表6.3 屬性/方法含義

path	當前路由的絕對路徑
params	當前路由中動態片段和全匹配片段的鍵值對
query	當前路由中查詢參數的鍵值對

表6.4

(4) 路由渲染

<router-link to="/home" replace>Home</router-link> <router-link to="/about" replace>About</router-link> <!-- 動態路由 --> <router-link :to="{path:'/user/'+ userId}" replace>User</router-link>

注意：
<router-link>默認會被渲染成<a>標簽；<router-view>可視為組件占位符，根據當前路由在該位置動態渲染出不同的組件，而保持其他內容不變。

6.4 Vuex

Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它采用集中式存儲管理應用所有組件的狀態，并以一定的規則保證狀態以一種可預測的方式發生變化，提高可維護性。Vuex適用于存儲多個組件共享、依賴的狀態，或多個組件的行為都會變更的狀態，此時全局管理可以避免繁瑣的組件通信。

圖6.4 核心概念解釋

state	單一狀態樹，用于存儲全局狀態。可通過this.$store.state訪問。可通過Vue.set(obj, key, val)與Vue.delete(obj, key)來響應式地添加或刪除state中的屬性
mutations	用于定義對狀態改變的同步操作行為，便于Vuex跟蹤狀態變化。通過this.$store.commit()來修改狀態
actions	用于定義對狀態改變的異步操作行為，便于Vuex跟蹤狀態變化。注意actions事件內部通過context.commit()修改狀態，外部通過this.$store.dispatch()來觸發異步行為
modules	用于將復雜應用的大量狀態模塊化管理，每個模塊擁有自己的state、mutations等屬性。通過this.$store.state.module訪問模塊module中的屬性

注意：

(1) 一般采用對象風格向Vuex進行提交狀態改變，mutations中定義的方法可使用載荷payload來獲取提交時額外傳入的參數，例如：

// mutation-types.js export const INCREMENT = "increment"// index.js // 導入事件常量 import {INCREMENT} from './mutation-types' // Vuex配置 state: {count: 1 }, mutations: {[INCREMENT](state, payload) {state.count = payload.amount;} }, // 提交狀態變化 this.$store.commit({type: INCREMENT,amount: 10 })

推薦使用事件常量替代mutations事件類型，這樣可以使linter之類的工具發揮作用，同時把這些常量放在單獨的文件中便于維護整個應用包含的mutations事件。

(2) actions使用實例

actions: {[INFOUPDATE](context, payload) {return new Promise((resolve, reject) => {setTimeout(() => {context.commit({type: INCREMENT,amount: payload.num});resolve('完成了');}, 1000)})} }, // 建議使用Promise對異步操作的結果進行處理 this.$store.dispatch({type: INFOUPDATE,num: 10 }).then(res => {console.log(res) })

(3) modules使用實例

const moduleA = {state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... } }const moduleB = {state: () => ({ ... }),mutations: { ... },actions: { ... } }const store = createStore({modules: {a: moduleA,b: moduleB} })this.$store.state.a // -> moduleA 的狀態 this.$store.state.b // -> moduleB 的狀態

(4) Vuex代碼結構

└── store├── index.js # 導出store的文件├── actions.js # 根級別的 action ├── mutations.js # 根級別的 mutation ├── mutation-types.js # mutations事件常量 ├── action-types.js # actions事件常量└── modules # 模塊├── cart.js # 購物車模塊└── products.js # 產品模塊

---

🔥 更多精彩專欄：

• 《ROS從入門到精通》
• 《機器人原理與技術》
• 《機器學習強基計劃》
• 《計算機視覺教程》
• …

👇源碼獲取 · 技術交流 · 抱團學習 · 咨詢分享 請聯系👇

總結

以上是生活随笔為你收集整理的详细总结流行前端框架Vue重难点概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。