VUE知識點小記

1、vue的生命周期

  初始化:

  beforeCreate:一般沒啥用,數(shù)據(jù)沒掛載,DOM 沒有渲染出來

  created:數(shù)據(jù)已經(jīng)掛載,但是 DOM 沒有渲染出來,這個鉤子函數(shù)里面可以做一些異步的操作,并且在這個鉤子函數(shù)里面更改數(shù)據(jù)不會影響到運行時鉤子函數(shù)。

  beforeMounte:這個函數(shù)代表著 DOM 快要被渲染出來了,但是還沒有被渲染出來,跟 created 一樣,做一些異步的操作

  mounted:數(shù)據(jù)已經(jīng)掛載,真實 DOM 也已經(jīng)渲染出來了。

  運行中:

  beforeUpdate:當數(shù)據(jù)改變的時候才會執(zhí)行這個函數(shù),在這個函數(shù)里面拿到的是改變之前的數(shù)據(jù),千萬不能在這個里面更改數(shù)據(jù),否則會造成死循環(huán)

  updated:拿到的是更新之后的數(shù)據(jù),在這函數(shù)里面,生成新的 DOM ,跟上一次的虛擬 DOM 做對比,比較出差異之后,然后再渲染真實的 DOM ,當數(shù)據(jù)引發(fā) DOM 重新渲染的時候,在這個鉤子函數(shù)里面就可以獲取到真實的 DOM。

  銷毀時:

  beforeDestroy:銷毀前,做一些善后的操作

  destroyed:數(shù)據(jù)的雙向綁定,監(jiān)聽都刪除了,但是真實的 DOM 還是存在的

2、什么是 MVVM?與 MVM 的區(qū)別。

  mvvm 是一種簡化用戶界面的事件驅(qū)動編程方式

  View是視圖層,也是用戶交互層,主要是由 html 和 css 構(gòu)建

  Model是視圖層,泛指后端進行的各種邏輯處理和數(shù)據(jù)操控

  ViewModel是指視圖數(shù)據(jù)層,在這一層,前端開發(fā)者對從后端獲取到的 Model 數(shù)據(jù)進行轉(zhuǎn)換處理,做二次封裝,以生成符合 View 層使用預期的視圖數(shù)據(jù)模型。

  MVVM 主要是解決 MVM 的反饋不即使的問題。

3、完整的生命周期函數(shù)到底是什么?

  beforeCreate:基本什么都干不了,data 沒有注入到 vue 里面,獲取不到 data 信息,做一些預處理功能,

  created:數(shù)據(jù)可以獲取,并且在鉤子函數(shù)中更改數(shù)據(jù)不會調(diào)用鉤子函數(shù)的執(zhí)行

  beforeMount:此時還沒有生成 html 到頁面中。

  mounted:初始化階段最后一個鉤子函數(shù),可以操作真實 DOM 了

數(shù)據(jù)更新的時候,先調(diào)用 beforeUpdate,然后數(shù)據(jù)更新引發(fā)視圖渲染完成之后,才會執(zhí)行 updated

4、VUE 中如何封裝組件?什么組件,為什么要封裝組件?組件中 data 為什么是一個函數(shù)?

  為什么要封裝組件?

  主要就是為了解耦,提高代碼復用率。

  什么是組件?

  頁面上可以復用的都稱之為組件

  它是 HTML、CSS、JS 的聚合體。

  組件就相當于庫,把一些能在項目里或者不同項目里可以復用的代碼進行需求性的封裝。

  組件中的 data 為什么是一個函數(shù)

  讓每個返回的實例都可以維護一份被返回對象的獨立的拷貝。

 ?。ㄑ由辏?/p>

  什么是模塊?

  相當于業(yè)務邏輯塊,把同一類的項目里的功能邏輯進行需求性的封裝。

  模塊化開發(fā):就是將 js 文件按照功能分離,根據(jù)需求引入不同的文件,源于服務端

  組件化開發(fā):具備單個可移植性,即“隨用隨加載”,不需要為其準備復雜的基礎(chǔ)條件,組件是聲明式,非命令式

5、axios 是什么?

  axios 主要是用來向后臺發(fā)送請求。支持promise

  axios 支持并發(fā)請求,可以同時請求多個接口

  axios 提供了攔截器。

  axios 可以防止 跨站請求偽造。也就是釣魚網(wǎng)站

  axios 攔截器:

  分為 request 請求攔截和 response 響應攔截

  request 請求攔截:發(fā)送請求前統(tǒng)一處理。例如:設置請求頭 headers

  response 相應攔截:是根據(jù)響應的代碼來進行下一步的操作。例如:由于當前的 token 過期,接口返回 401 未授權(quán)。那么我們就要跳轉(zhuǎn)到登陸界面

axios/fetch 是基于 promise。后者主要利用 callback 的形式

fetch 脫離了 xhr,是新的語法,默認不傳 cookie。另外也監(jiān)聽不到請求進度

?6、VUEX 是什么?怎么使用?那種場合能用?

  vuex 是一個專門為 vue 構(gòu)建的狀態(tài)管理工具,主要是為了解決 多組間之間狀態(tài)共享問題。強調(diào)的是集中式管理,(組件與組件之間的關(guān)系變成了組件與倉庫之間的關(guān)系)

  vuex 的核心包括:state(存放狀態(tài))、mutations(同步的更改狀態(tài))、actions(發(fā)送異步請求,拿到數(shù)據(jù))、getters(根據(jù)之前的狀態(tài)派發(fā)新的狀態(tài))、modules(模塊劃分)

  state 發(fā)布一條新的數(shù)據(jù),在 getters 里面根據(jù)狀態(tài)派發(fā)新的狀態(tài),actions 發(fā)送異步請求獲取數(shù)據(jù),然后在 mutations 里面同步的更改數(shù)據(jù)

  應用場合:購物車的數(shù)據(jù)共享、登入注冊

7、vue 的指令用法

  v-if  條件渲染指令

  v-bind  綁定屬性指令

  v-on  監(jiān)聽事件指令

  v-for  循環(huán)渲染指令

  v-text  渲染文本

8、導航鉤子?

  vur-router

  spa 單頁面應用:指的是根據(jù)檢測地址欄的變化將對應的路由組建進行切換

  也就是說,一個項目里面只有一個完整的 HTML 頁面。其余的都是 HTML 組件,頁面之間跳轉(zhuǎn)刷新,都是組件之間切換,減少了 http 請求的發(fā)送,提高了用戶體驗,

  原理就是 js 感知到 url 的變化,通過這一點,可以用 js 動態(tài)的將當前頁面內(nèi)容清除,然后將下一個頁面的內(nèi)容掛載到當前頁面上,這個時候路由不是后端做,而是前端完成,判斷到底是顯示哪個頁面,清除不需要的,顯示需要的,這個過程就是單頁面應用。

  好處就是:良好的交互體驗,良好的前后端分離模式,減輕了服務器的壓力,公用一套代碼。

  history? ?hash

  聲明式導航:router-link

  history:這個模式會直接改變 url 地址,需要后端給我們配置。

  hash:這個模式檢測到 url 地址欄 # 后面的路徑標識符的更改,從而觸發(fā)瀏覽器的 hashchange 事件,然后通過 location.hash 得到當前的路徑標識符,在進行路由跳轉(zhuǎn)操作。

  一級路由、二級路由? children

  路由跳轉(zhuǎn)、兩種方式:router-link to? ? ? ? ?this.$router.push()

  路由守衛(wèi) 攔截器

? ??????????攔截器:request請求攔截器和response響應攔截器

    request 請求攔截:發(fā)送請求前同一處理,

    例如:設置請求頭 headers、應用的版本號、終端類型等

    response 響應式攔截:有時候我們要根據(jù)響應式的狀態(tài)來進行下一步操作,

    例如:由于當前的 token 過期,接口返回 401 未授權(quán),我們就需要進行重新登錄的操作。

  導航鉤子就是 vue 中路由 vue-router

? ??????分類:

????????? ? beforeEach? ? 在路由切換開始的時候調(diào)用

????????? ? afterEach? ? 在路由切換離開的時候調(diào)用

????????局部到單個路由

????????? ? beforeEnter

????????組件的鉤子函數(shù)

????????? ? beforeRouterEnter

????????? ? beforeRouterUpdata

????????? ? beforeRouteLeave

????????三個參數(shù):

????????? ? to 即將進入的目標對象

????????? ? from 導航要離開的導航對象

????????? ? next 是一個函數(shù),調(diào)用 resolve 執(zhí)行下一步

????????$router:是路由操作對象,只寫對象

????????$route:路由信息對象,只讀對象

?9、v-model 是什么?

  用于表單的數(shù)據(jù)雙向綁定的指令

  有兩個操作:

    1、v-bind 綁定了一個 value 的屬性

    2、v-on 把當前元素綁定到一個事件上

10、swiper 插件從后臺獲取數(shù)據(jù)沒有問題,css 代碼啥的也沒有問題,但是圖片沒動,怎么解決。

  主要是因為 swiper 提前初始化了 ,但是數(shù)據(jù)還沒有完全出來。

  this.$nextTick()? ?主要作用就是等數(shù)據(jù)改變引發(fā) DOM 重新渲染完成之后才會執(zhí)行。

11、keep-alive

  當在這些組件之間切換的時候,想保持這么組建的狀態(tài),以避免反復渲染導致的性能問題

  原理:在 created 的時候,將需要緩存的虛擬 DOM 節(jié)點放到 cache 中,在 reader 的時候根據(jù) name 再進行取出。

  路由懶加載:

    就是當你需要的時候才會加載,按需加載。

    單頁面應用的問題就是所有的頁面都需要引入一個 js 文件,wepback 打包的時候生成一個 js ,這個 js 會再所有組件切換的時候調(diào)用

    單頁引入了所有的一個 js ,日志也會引入所有的一個 js ,這樣首頁加載速度變慢。解決方法就是路由懶加載。

12、單頁應用

  原理就是通過檢測地址欄的變化將對應路由組件進行組件之間的切換。

  一個項目只有一個完整的 html 頁面,其他部分都是 html 組件組成,頁面的跳轉(zhuǎn)只是局部的刷新,不會重新加載全部的資源,組件之間的之間的切換快,比較容易實現(xiàn)轉(zhuǎn)場動畫。頁面每次跳轉(zhuǎn)時候,并不需要做 html 文件請求,這樣就節(jié)約了很多 http 發(fā)送請求,我們的切換頁面的時候,速度會很快。

  優(yōu)點:良好的交互體驗、良好的前后端工作分離模式、減輕服務器的壓力、公用一套后端程序代碼

  缺點:SEO 難度較大、頁面上不能進行前進后退管理、初次加載耗時多。

13、什么是vue-loader?

  vue-loder 就是一個加載器,把 vue 組件轉(zhuǎn)換成 js 模式。

  為什么要轉(zhuǎn)譯此模塊?

    可以動態(tài)的渲染一些數(shù)據(jù),對三個標簽做了優(yōu)化

    template? 寫虛擬 DOM

    script? 寫 es6 語法

    style? 默認可以用 scss 語法,提供了作用域

    并且開發(fā)階段提供了熱加載器

14、slot 是什么?如何使用?

  插槽:具名插槽、匿名插槽、作用域插槽

  在引用子組件開始標簽和結(jié)束標簽之間,插入一個任意一個元素,用 slot 標簽包裹一下,在父組件調(diào)用子組件的時候,這個插槽就會插入到子組件對應的具名插槽的位置。slot 有一個 name 屬性,加 name 屬性就是具名插槽,不加就是匿名插槽。

15、什么是虛擬 DOM ?與 key 值得關(guān)系?

  DOM 是用 js 對象記錄一個 dom 節(jié)點得副本,當 dom 發(fā)生更改的時候,先用虛擬 dom 進行 diff 算法,算出最小差異,然后再修改真實 dom。

  當用傳統(tǒng)得方式操作 DOM 得時候,瀏覽器會從構(gòu)建 DOM 樹開始從頭到尾執(zhí)行一邊流程,效率很低,而虛擬 DOM 是用 javascrit 對象表示的,而操作 javascriot 是很簡便高效的。虛擬 dom 和真實的 dom 有一層映射關(guān)系,很多需要操作 dom 的地方都會去操作虛擬 dom ,最后一次更新 dom,因而可以提高性能。

  虛擬 dom 的缺點:

  1、代碼更多,體積更大

  2、內(nèi)存占用增大

  3、小量的單一的 DOM 修改使用 虛擬 DOM 成本反而更高,不如直接修改真實 dom 快

16、如何理解 vue 的 mvvm 框架?

  是一種簡化用戶界面的事件驅(qū)動編程方程式。

  view 層是視圖層,使用戶交互層,主要是 HTML 和 CSS 來構(gòu)建

  moedl 層數(shù)據(jù)模型層,泛指后端進行的各種邏輯處理和數(shù)據(jù)操控

  viewmodel 層是指視圖數(shù)據(jù)層。在這一層,前端開發(fā)者對從后端獲取的 model 數(shù)據(jù)進行轉(zhuǎn)換處理,做二次封裝,以生成符合 view 層使用預期的視圖數(shù)據(jù)模型。

  數(shù)據(jù)雙向綁定:

?    當視圖改變更新模型層,當模型層改變更新視圖

  vue 的數(shù)據(jù)雙向綁定:

    vue 采用數(shù)據(jù)劫持&訂閱者發(fā)布模式的方法:vue 在創(chuàng)建 vm 的時候,會將數(shù)配置在實例中,然后會使用 object.defineproperty 對這些數(shù)據(jù)進行處理,并且會將數(shù)據(jù)進行處理,并且會為這些數(shù)據(jù)添加 getter 與 setter 方法,當數(shù)據(jù)改變之后,就會觸發(fā)數(shù)據(jù)的 setter 方法,從而觸發(fā) vm 的 watcher 方法,然后數(shù)據(jù)改變了, vm 進一步渲染 view 視圖。

17、active-class 是哪個組件的屬性。

?  vue-router 模塊提供的 router-link 組件的屬性

  在 vue-router 中要使用 active-class 有兩種方式

    1、直接在路由 js 文件中配置 linkActiveClass

    2、在 router-link 中寫入 active-class

18、scss 是什么?

  scss 是一種預編譯器。

19、vue 的第三方插件:

  miui-ui? ?element-ui? ? vuex

20、axios 是什么?

  axios 是用來發(fā)送請求的。get 和 post 兩種

  get:通過定義一個 get 函數(shù),他有兩個參數(shù),第一個參數(shù)就表示我們請求的 url 地址,第二個參數(shù)就是我們要攜帶的請求參數(shù),get 函數(shù)返回的是一個 promise 對象,當axios 請求成功的時候服務器返回給我們的是 reslove 返回值,請求錯誤的時候返回給我們的是 reject 錯誤值,最后通過 export 拋出 get 函數(shù)

  post:方法基本與 get 方法一致,但是需要設置請求頭。

21、promise 的了解

  promise 是異步函數(shù)的解決方案,從語法上講 promise 是一個對象,從他可以獲取異步操作的消息, promise 有三個狀態(tài),pending 等待狀態(tài)、fulfilled 成功狀態(tài)、rejected 失敗狀態(tài),狀態(tài)一旦更改,就不會在變,創(chuàng)造出 promise 實例后,他會立刻執(zhí)行,promise 有兩個API 方法:resolve 和 reject,resolve 代表的是回調(diào)成功后的函數(shù),reject 代表的是失敗后返回的結(jié)果,原型上有兩個放法:.then 和 .catch 方法,例如請求接口 .then 拿到的是數(shù)據(jù),通過 .catch 捕獲錯誤異常

22、自定義指令的方法:

  vue.directive

  鉤子:bind、inserted、update、unbind

  參數(shù):el、binding、vnode

23、vue 之間的通信

  父子:子組件用 props,接受父組件傳遞過來的值

  子父:父組件生命一條數(shù)據(jù),再寫一個改變自身的方法,傳遞給子組件,然后把子組件添加到點擊事件上

  兄弟之間傳值:

    ref 鏈:父組件要給子組件傳值,在子組件上定義一個 ref 屬性,這樣通過父組件的 $refs 屬性就可以獲取子組件的值了,也可以進行父子,兄弟之間的傳值

    even.bus 事件總線:簡單的場景下,使用一個 空的 VUE 實例作為事件總線,可以實現(xiàn)兄弟之間的通信。

24、異步函數(shù)

  async  await

  async 函數(shù)的返回值是一個 Promise 對象。當這個 async 函數(shù)返回一個值時,Promise的 resolve 方法會負責傳遞這個值(相當于Promise.resolve(value));當 async 函數(shù)拋出異常時,Promise 的 reject 方法也會傳遞這個異常值(相當于Promise.reject(value))。

  async?函數(shù)中可能會有?await?表達式,await 表達式會暫停當前?async function?的執(zhí)行,等待 Promise 處理完成。若 Promise 正常處理(fulfilled),其處理結(jié)果作為 await 表達式的值,繼續(xù)執(zhí)行?async function

25、VUE 路由之間的傳值

  使用$router.push 拼接參數(shù)傳參

  使用name來確定匹配的路由,通過params來傳遞參數(shù)

  使用path來匹配路由,然后通過query來傳遞參數(shù)

26、模塊化開發(fā)

  一個模塊就是實現(xiàn)特定功能的文件

好處:

    1、避免了變量污染,命名沖突

    2、提高代碼復用率

    3、提高維護性

    4、依賴關(guān)系的管理

27、vue 的計算屬性

  在模板中放入太多的邏輯會讓模板過重且難以維護,在需要對數(shù)據(jù)進行復雜處理,且可能多次使用的情況下,盡量采用計算屬性的方法

好處

    1、是數(shù)據(jù)處理結(jié)構(gòu)清晰

    2、依賴于數(shù)據(jù),數(shù)據(jù)更新,處理結(jié)果自動更新,

    3、計算屬性內(nèi)部 this 指向vm實例

    4、在 template 調(diào)用時,直接寫計算屬性姓名即可

    5、常用的是 getter 方法,獲取數(shù)據(jù),也可以使用 set方法改變數(shù)據(jù),

    6、相較于methods,不管依賴的數(shù)據(jù)變不變,methods都會重新計算,但是依賴數(shù)據(jù)不變的時候conputed從緩存中獲取,不會重新計算,

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容