vue知識點整理


1、vue的生命周期

  初始化:

  beforeCreate:一般沒啥用,數據沒掛載,DOM 沒有渲染出來

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

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

  mounted:數據已經掛載,真實 DOM 也已經渲染出來了。

  運行中:

  beforeUpdate:當數據改變的時候才會執行這個函數,在這個函數里面拿到的是改變之前的數據,千萬不能在這個里面更改數據,否則會造成死循環

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

  銷毀時:

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

  destroyed:數據的雙向綁定,監聽都刪除了,但是真實的 DOM 還是存在的

2、什么是 MVVM?與 MVM 的區別。

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

  View是視圖層,也是用戶交互層,主要是由 html 和 css 構建

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

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

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

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

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

  created:數據可以獲取,並且在鈎子函數中更改數據不會調用鈎子函數的執行

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

  mounted:初始化階段最后一個鈎子函數,可以操作真實 DOM 了

數據更新的時候,先調用 beforeUpdate,然后數據更新引發視圖渲染完成之后,才會執行 updated

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

  為什么要封裝組件?

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

  什么是組件?

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

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

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

  組件中的 data 為什么是一個函數

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

  (延申)

  什么是模塊?

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

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

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

5、axios 是什么?

  axios 主要是用來向后台發送請求。支持promise

  axios 支持並發請求,可以同時請求多個接口

  axios 提供了攔截器。

  axios 可以防止 跨站請求偽造。也就是釣魚網站

  axios 攔截器:

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

  request 請求攔截:發送請求前統一處理。例如:設置請求頭 headers

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

axios/fetch 是基於 promise。后者主要利用 callback 的形式
fetch 脫離了 xhr,是新的語法,默認不傳 cookie。另外也監聽不到請求進度

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

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

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

  state 發布一條新的數據,在 getters 里面根據狀態派發新的狀態,actions 發送異步請求獲取數據,然后在 mutations 里面同步的更改數據

  應用場合:購物車的數據共享、登入注冊

7、vue 的指令用法

  v-if  條件渲染指令

  v-bind  綁定屬性指令

  v-on  監聽事件指令

  v-for  循環渲染指令

  v-text  渲染文本

8、導航鈎子?

  vur-router

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

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

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

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

  history   hash

  聲明式導航:router-link

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

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

  一級路由、二級路由? children

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

  路由守衛 攔截器

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

    request 請求攔截:發送請求前同一處理,
    例如:設置請求頭 headers、應用的版本號、終端類型等     response 響應式攔截:有時候我們要根據響應式的狀態來進行下一步操作,
    例如:由於當前的 token 過期,接口返回 401 未授權,我們就需要進行重新登錄的操作。

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

分類:
    beforeEach    在路由切換開始的時候調用
    afterEach    在路由切換離開的時候調用
局部到單個路由
    beforeRouteEnter
組件的鈎子函數
    beforeRouterEnter
    beforeRouterUpdata
    beforeRouteLeave

三個屬性:
    to 即將進入的目標對象
    from 導航要離開的導航對象
    next 是一個函數,調用 resolve 執行下一步

$router:是路由操作對象,只寫對象
$route:路由信息對象,只讀對象

 9、v-model 是什么?

  用於表單的數據雙向綁定的指令

  有兩個操作:

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

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

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

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

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

11、keep-alive

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

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

  路由懶加載:

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

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

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

12、單頁應用

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

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

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

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

13、什么是vue-loader?

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

  為什么要轉譯此模塊?

    可以動態的渲染一些數據,對三個標簽做了優化

    template  寫虛擬 DOM

    script  寫 es6 語法

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

    並且開發階段提供了熱加載器

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

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

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

15、什么是虛擬 DOM ?與 key 值得關系?

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

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

  虛擬 dom 的缺點:

  1、代碼更多,體積更大

  2、內存占用增大

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

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

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

  view 層是視圖層,使用戶交互層,主要是 HTML 和 CSS 來構建

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

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

  數據雙向綁定:

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

  vue 的數據雙向綁定:

    vue 采用數據劫持&訂閱者發布模式的方法:vue 在創建 vm 的時候,會將數配置在實例中,然后會使用 object.defineproperty 對這些數據進行處理,並且會將數據進行處理,並且會為這些數據添加 getter 與 setter 方法,當數據改變之后,就會觸發數據的 setter 方法,從而觸發 vm 的 watcher 方法,然后數據改變了, 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 是用來發送請求的。get 和 post 兩種

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

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

21、promise 的了解

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

22、自定義指令的方法:

  vue.directive

  鈎子:bind、inserted、update、unbind

  參數:el、binding、vnode

23、vue 之間的通信

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

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

  兄弟之間傳值:

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

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

24、異步函數

  async  await

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

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

25、VUE 路由之間的傳值

  使用$router.push 拼接參數傳參

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

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

26、模塊化開發

  一個模塊就是實現特定功能的文件

  好處:

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

    2、提高代碼復用率

    3、提高維護性

    4、依賴關系的管理

27、vue 的計算屬性

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

  好處

    1、是數據處理結構清晰

    2、依賴於數據,數據更新,處理結果自動更新,

    3、計算屬性內部 this 指向vm實例

    4、在 template 調用時,直接寫計算屬性姓名即可

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

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM