web面試必問的題-有解無憂

1. vue雙向資料系結原理

vue是采用資料劫持結合發布-訂閱的方式,通過object.defineProperty()來劫持各個屬性的setter,getter,在資料發生變動時發布訊息給訂閱者,觸發相應的監聽回呼來渲染視圖
第一步:
需要observer的資料物件進行遞回遍歷,包括子屬性物件的屬性,都加上setter,getter,這樣的話，給這個物件的某個值賦值,就會觸發setter,那么就能監聽到資料變化
簡單來說就是實作一個資料監聽器Observer，它能夠對資料物件的所以屬性進行監聽,如果有變動就可以拿到最新的值并通知訂閱者

第二步:
compile決議模塊指令,講模塊中的變數替換成資料,然后初始化渲染頁面視圖,并將每個指令對應的節點系結更新函式,添加監聽資料的訂閱者,一旦資料有變動,收到通知,更新視圖
簡單來說就是實作一個指令決議器Compile，對每個元素節點的指令進行掃描和決議,替換資料,系結更新函式
第三步:
Watcher訂閱者時Observer和Compile之間的通訊橋梁,主要做的事情是:
1.在自身實體化時往屬性訂閱器(dep)里面添加自己
2.自身必須有一個update()方法
3.待屬性變動dep.notice()通知時,能呼叫自身的update()方法,并觸發Compile中的系結回呼
簡單來說就是實作一個Watcher,作為Observer和Compile的橋梁,能夠收到每個屬性變動的通知,系結相應的回呼函式,從而更新視圖
第四步:
MVVM作為資料系結的入口,整合Observer,Compile和Watcher三者，通過Observer來監聽自己的model資料變化,通過Compile來決議編譯模板指令,最終利用Watcher搭建起Observer和Compile之間的通信橋梁,達到資料變化->視圖更新; 視圖互動變化->資料model變更的雙向系結效果

MVVM就是實作Vue雙向資料系結的根本，MVVM本質上是MVC的改進版,即模型-視圖-視圖模型,【模型】指的是后端傳遞的資料，【視圖】指的是所看到的頁面，【視圖模型】MVVM的核心,他是連接view和model的橋梁，它有兩個方向: 一個是將【模型】轉換成【視圖】，即后端傳遞的資料轉換成所看到的頁面：實作方式是:資料系結，第二個是【視圖】轉化成【模型】，即將所看到的頁面轉換成后端的資料：實作方式是:DOM事件監聽，這兩個方向都實作的話,我們稱之為資料的雙向系結

2.vue虛擬dom,diff演算法

虛擬DOM就是為了解決游覽器性能問題而被設計出來的，

就是用物件來模擬dom元素和嵌套關系,指的就是用js物件的形式,來模擬頁面上的DOM嵌套關系

目的:實作頁面元素的高效更新,避免大量無謂的計算(若一次操作中有10次更新DOM的動作,虛擬DOM不會立即去操作DOM，而是將10次更新的diff內容保存到本地一個JS物件中,最終將這個JS物件一個姓attch到DOM樹上,再進行后續操作)

作用：用來比較兩次DOM結構

web界面由DOM樹(樹的意思就是資料結構)來搭建，當其中一部分發生變化時,其實就時對應某個DOM節點發生了變化

diff演算法是作為DOM的加速器,改進優化了頁面渲染的基礎和性能保障

用js物件表示dom樹結構,用這個樹建立一個真正的dom樹,插入到檔案中,狀態更新,重新構造一棵新樹,兩樹比較差異,把差異應用到真的dom樹上,更新視圖

3. 組件通訊

1.父傳子
父組件是通過props屬性給子組件通信的
父組件代碼：

<template>
	<div>
		<h2>{{msg}}</h2>
		<Son :faMsg="msg"></Son>
	</div>
</template>
	
 <script>
	import Son from "./Son";
	export default {
		name:"HelloWorld",
		data(){
			return{
				msg:"父組件"
			}
		},
		components:{Son}
	}
 </script>

子組件代碼:

<template>
	<div>
		<h2>{{sonMsg}}</h2>
		<p>子組件接收到的內容是:{{faMsg}}</p>
	</div>
</template>
	
 <script>
	export default {
		name:"Son",
		data(){
			return{
				sonMsg:"子組件"
			}
		},
		props:['faMsg'], //接收faMsg值
		//還可以這樣,上面的不是很嚴謹
		props:{
			faMsg:{
				type:String,
				default:"123"
			}
		}
	}
 </script>

在父組件中給子組件標簽上系結一個屬性，屬性上掛載需要傳遞的值
在子組件通過props:[“自定義屬性名”]來接收資料

子傳父:
(1) 在父組件中給子組件標簽系結一個自定義事件，給這個事件掛載需要呼叫的方法
(2) 在子組件的方法通過this.$emit(‘自定義事件名’)來呼叫這個方法

父組件代碼:

<template>
   <div>
     <h2>{{ msg }}</h2>
     <p>父組件接手到的內容：{{ username }}</p>
     <son psMsg="我是你爸爸" @transfer="getUser"></son> 
      <!-- 監聽子組件觸發的transfer事件,然后呼叫getUser方法 -->
   </div>
 </template>
 <script>
 import son from './Son'
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父組件',
       username:'',
     }
   },
   components:{son},
   methods:{
     getUser(msg){
       this.username= msg
     }
   }
 }
 </script>

子組件代碼:

	 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>子組件接收到內容：{{ psMsg }}</p>
     <!--<input type="text" v-model="user" @change="setUser">-->
     <button @click="setUser">傳值</button>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'子組件',
       user:'子傳父的內容'
     }
   },
   props:['psMsg'],
   methods:{
     setUser:function(){
       this.$emit('transfer',this.user)//觸發transfer方法，this.user 為向父組件傳遞的資料
     }
   }
 }
 </script>

兄弟通信: 比如說vuex 就可以說是一個兄弟通信

4. vuex

首先我們要知道Vuex是一個專為vue.js應用程式開發的狀態管理模式，它由五部分組成:
分別是:state,actions，mutations，getters，modules
在這里插入圖片描述
vuex的五部分分別是:

state:存盤狀態
actions:可以包含異步操作
getters:類似vue組件中的計算屬性,會對state資料進行計算(會被快取)
mutations:唯一可以對state資料修改的場所
modules:模塊化管理倉庫,每個模塊都擁有自己的 state,actions,mutations,getters,modules

Vuex一般用來存盤在vue.js中大量出現的資料,比如說token,我們就可以把token存放在Vuex中，當然購物車也是要用到Vuex的.

資料持久化
問題:存盤在vuex中的狀態,重繪頁面會丟失，
為了解決重繪頁面資料丟失,才有了資料持久化，
最簡單的做法就是利用插件 vuex-persistedState
1.安裝
cnpm i vuex-persistedState -S
備注:
-S 是 --save的簡寫,意思是:把插件安裝到dependencies（生成環境依賴）中
-D 是 --save-dev的簡寫,意思是:把插件安裝到devDependencies（開發環境依賴）中
2.使用

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
    storage: sessionStorage,
    key: "token"
  })]//會自動保存創建的狀態，重繪還在
})

引數:
storage:存盤方式，(sessionStorage,localStarage) key:定義本地存盤中的key

模塊化管理資料(modules)
1.什么時候需要用到模塊管理vuex資料

專案龐大,資料資訊量特別大的時候,我們可以考慮分模塊形式管理資料,比如user模塊管理用戶資訊資料,cart模塊管理購物車資料,shop模塊管理商品資訊資料

5. vue-router(路由原理,路由守衛，路由傳參)

路由實作原理:

概念:
通過改變URL，在不重新請求頁面的情況下,更新頁面視圖，
實作方式:
vue-router通過hash與History interface兩種方式實作前端路由，更新視圖但不重新請求頁面”是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實作主要有兩種方式:
1.hash ---- 利用URL中的hash(’#’);
2.利用History interface在HTML5中的新增方法

6. vue生命周期

簡單粗暴:
答：總共分為8個階段，創建前/后，掛載前/后，更新前/后，銷毀前/后，
創建前/后： beforeCreated創建前,vue實體的掛載元素$el和資料物件data都是undefined,還未初始化，在created階段/創建后,vue實體的資料物件data有了,$el還沒有，
掛載前/后： beforeMount掛載前,vue實體的el和data都初始化了,但是還沒有掛載html 到頁面上，在Mounted階段/掛載后,模板中的 HTML 渲染到 HTML 頁面中，此時一般可以做一些 ajax 操作，mounted 只會執行一次，
更新前/后： 當data變化時,會觸發beforeUpdate和updated方法
銷毀前/后： 在destroy階段/銷毀前,對data的改變不會再觸發周期函式,說明此時vue實列已經解除了事件監聽和dom系結,但是dom結構依然存在，destroyed階段,組件銷毀
在這里插入圖片描述

7. 自定義指令,自定義過濾器

8. 自定義組件

9. 常用的指令,修飾符

10. vue2.0和vue3.0的區別

11. keep-alive

概念：
是Vue的內置組件,當它包裹動態組件時,會快取不活動的組件實體,而不是銷毀它們，
keep-alive是一個抽象組件:它自身不會渲染一個DOM元素,也不會出現的父組件鏈中，
作用：
在組件切換的程序中,把切換出去的組件保留在記憶體中,防止重復渲染DOM,減少加載事件以及性能消耗,提高用戶體驗性
原理：
在 created鉤子函式呼叫時將需要快取的 VNode 節點保存在 this.cache 中／在 render（頁面渲染）時，如果VNode的 name 符合快取條件（可以用 include 以及 exclude 控制），則會從 this.cache 中取出之前快取的 VNode實體進行渲染
VNode： 虛擬DOM,其實就是一個JS物件
引數：

include - 字串或者正則運算式，只有匹配的組件會被快取，
exclude - 字串或正則運算式，然后匹配的組件都不會快取，
max - 數字，最多可以快取多少組件實體

對生命周期函式變化：
被包含在keep-alive中的組件,會多出來兩個生命周期的鉤子函式，activated 和 deactiveated
1.activated
在keep-alive組件激活時呼叫
2.deactivated
在keep-alive組件離開時呼叫

//正常的生命周期:beforeRouterEnter --> created -->mounted --> updated --> destroyed


//使用keepAlive后生命周期:
//首次進入快取頁面 :beforeRouterEnter --> created -->mounted --> updated --> destroyed
//再次進入快取頁面 :beforeRouteEnter --> activated --> deactivated
//注：
//1、這里的activated非常有用，因為頁面被快取時，created,mounted等生命周期均失效，你若想進行一些操作，那么可以在activated內完成(下面會舉個栗子：串列頁回到上次瀏覽位置)
//2、activated   keep-alive組件激活時呼叫，該鉤子在服務器端渲染期間不被呼叫， 
//3、deactivated   keep-alive組件停用時呼叫，該鉤子在服務端渲染期間不被呼叫

可以結合Router中的meta,來快取部分頁面

12. 多環境變數

13. 對axios封裝,（url統一管理,axios請求攔截,回應攔截，函式封裝）

14. element-ui，vant-ui 按需引入

15. sass配置

16. rem ， vw/vh 適配

rem適配：
使用vant里面的游覽器適配,
Vant 中的樣式默認使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：

postcss-pxtorem 是一款 postcss 插件，用于將單位轉化為 rem
lib-flexible用于設定 rem 基準值
安裝 lib-flexible 和 postcss-plugin-px2rem
cnpm i lib-flexible postcss-plugin-px2rem --save-dev
配置rem: mian.js 匯入

import 'lib-flexible/flexible'; //rem 就可以生效了

配置px–> rem:創建vue.config.js

//可以在此配置的基礎上根據專案需求進行修改，
module.exports = {
   
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue:75, //換算基數， 默認100  ，這樣的話把根標簽的字體規定為1rem為50px,這樣就可以從設計稿上量出多少個px直接在代碼中寫多上px了，
                        // unitPrecision: 5, //允許REM單位增長到的十進制數字，
                        //propWhiteList: [],  //默認值是一個空陣列，這意味著禁用白名單并啟用所有屬性，
                        // propBlackList: [], //黑名單
                        // exclude: /(page_pc)/i,  //默認false，可以（reg）利用正則運算式排除某些檔案夾的方法，例如/(node_module)/ ，如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值
                        exclude: /node_modules/i,
                        // selectorBlackList: ['van-'], //要忽略并保留為px的選擇器,我們一般不轉換vantui中的大小
                        // ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啟用ignoreidentifier后，replace將自動設定為true，
                        // replace: true, // （布林值）替換包含REM的規則，而不是添加回退，
                        mediaQuery: false,  //（布林值）允許在媒體查詢中轉換px，
                        minPixelValue: 3 //設定要替換的最小像素值(3px會被轉rem)， 默認 0
                    }),
                ]
            }
        }
    },
}

17. webpack配置（配置跨域,路徑別名,打包分析,cdn引入,去掉console.log,單獨打包第三方模塊,ie兼容,eslint規范,圖片壓縮）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245684.html

標籤：其他

上一篇：如何使用Axcure的元件？

下一篇：網頁設計期末復習選擇+簡答+大題

web面試必問的題