vue知識點總結

2022-07-27 03:45:14 字數 4158 閱讀 5618

1、vue特點

資料雙向繫結和元件化

2、說一下vue的資料雙向繫結的原理(v-model)

v-model 是語法糖,包含兩個指令:v-bind、v-on。

用於資料雙向繫結,一般用於輸入框,他監聽著input事件,他繫結了value的屬性。

·注:具體回覆vue實現資料雙向繫結主要是:採用資料劫持結合發布者-訂閱者模式的方式,通過object.defineproperty()來劫持各個屬性的settergetter,在資料變動時發布訊息給訂閱者,觸發相應監聽**。

3、解釋單向資料流和雙向資料繫結

單向資料流:顧名思義,資料流是單向的。資料流動方向可以跟蹤。流動單一,追查問題時可以更便捷。

缺點是寫起來不太方便。要使ui發生變更就必須建立各種action來維護對應的state。

雙向資料繫結:資料之間是相通的將資料變更的操作隱藏在框架內部。優點,在表單互動較多的場景下,會簡化大量與業務五關的**。

缺點是無法追蹤區域性狀態的變化,加強出錯時debug的難度。

4、vue中如何去除url中的#

vue-router預設使用hash模式,所以在路由載入的時候,專案中的url會自帶#。如果不想使用#, 可以使用vue-router的另一種模式history

new router()
需要注意的是,當我們啟用history模式的時候,由於我們的專案是乙個單頁面應用,所以在路由跳轉的時候,就會出現訪問不到靜態資源而出現404的情況,這時候就需要服務端增加乙個覆蓋所有情況的候選資源:如果url匹配不到任何靜態資源,則應該返回同乙個index.html頁面

5、對mvc、mvvm的理解

特點:view傳送指令到controller(控制器)

controller完成業務邏輯後,要求model(模型)改變狀態

model將新的資料傳送到view,使用者得到反饋

所有通訊都是單向的。

特點:各部分之間的通訊,都是雙向的

採用雙向繫結:view的變動,自動反映在viewmodel,反之亦然

6、vue的生命週期

7、元件通訊

父傳子:將父元件的資料繫結到使用子元件的自定義標籤上,子元件在選項中新增乙個props屬性來接 受資料;

子傳父:在響應該點選事件的函式中使用$emit來觸發乙個自定義事件,並傳遞乙個引數。

8、v-if 和 v-show 區別

使用了v-if的時候,如果值為false,那麼頁面將不會有這個html標籤生成。

v-show則是不管值為true還是falsehtml元素都會存在,只是css中的display顯示或隱藏

9、$route和$router的區別

$routervuerouter例項,想要導航到不同url,則使用$router.push方法

$route為當前router跳轉物件裡面可以獲取namepathqueryparams

10、nexttick 是做什麼的

$nexttick是在下次dom更新迴圈結束之後執行延遲**,在修改資料之後使用$nexttick,則可以在**中獲取更新後的dom

11、vue 元件 data 為什麼必須是函式

因為js本身的特性帶來的,如果data是乙個物件,那麼由於物件本身屬於引用型別,當我們修改其中的乙個屬性時,會影響到所有vue例項的資料。如果將data作為乙個函式返回乙個物件,那麼每乙個例項的data屬性都是獨立的,不會相互影響了

12、計算屬性computed 和事件 methods 有什麼區別

computed: 計算屬性是基於它們的依賴進行快取的,只有在它的相關依賴發生改變時才會重新求值

method:只要發生重新渲染,method呼叫總會執行該函式

13、 對比 jquery ,vue 有什麼不同

jquery 專注檢視層,通過操作 dom 去實現頁面的一些邏輯渲染; vue 專注於資料層,通過資料的雙向繫結,最終表現在 dom 層面,減少了 dom 操作

vue 使用了元件化思想,使得專案子集職責清晰,提高了開發效率,方便重複利用,便於協同開發

14、vue 中怎麼自定義過濾器

可以用全域性方法vue.filter()註冊乙個自定義過濾器,它接收兩個引數:過濾器id和過濾器函式。過濾器函式以值為引數,返回轉換後的值

15、vue 中怎麼自定義指令

全域性註冊
// 註冊乙個全域性自定義指令 `v-focus`

vue.directive('focus',

})

區域性註冊
directives: 

}}

16、對 keep-alive 的了解keep-alivevue內建的乙個元件,可以使被包含的元件保留狀態,或避免重新渲染

17、vue 中 key 的作用

key的特殊屬性主要用在vue的虛擬dom演算法,在新舊nodes對比時辨識vnodes。如果不使用keyvue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同型別元素的演算法。使用key,它會基於key的變化重新排列元素順序,並且會移除key不存在的元素。

有相同父元素的子元素必須有獨特的key。重複的key會造成渲染錯誤

18、vue 等單頁面應用的優缺點

優點:
缺點:

Vue 知識點總結

1.mvvm?對比mvc mvvm model view viewmodel model 資料模型,可以定義資料修改和操作的業務邏輯 view ui元件,將資料元件轉換成ui展示 viewmodel 同步view和model的物件 view和model沒有直接的聯絡,通過viewmodel進行互動,...

Vue知識點總結

框架與庫的區別 jquery庫 dom操作 http請求 全家桶 如何起步 插值表示式 常用指令 全域性元件 場景 公共性功能元件,減少冗餘 全域性api vue.component 元件名 元件物件 過濾器 給資料的顯示進行操作,如反轉,改變屬性等 filter 全域性過濾器,vue.filter...

Vue知識點總結

近期幾天學習了vue,所以在這裡把零碎的知識點稍微總結一下 一.vue開發步驟 1.匯入vue.js檔案 2.編寫html 3.建立vue示例,傳入乙個json物件.二.vuejs特點 angular特點 基於mvvm,資料繫結,依賴注入 三.此json物件的屬性 el 選擇器 表示vue的控制範圍...