Vue相關問題總結

1:vue組件需要注意的事項?

組件參數的data值必須是函數,同時這個函數要求返回一個對象

作用:使用函數會形成一個閉包,這樣保證每個組件都是一個獨立的作用域,不會相互影響。

返回對象:data裏面本身就是存放數據的,不管是普通的賦值,對象,數組,怎麼存數據?不就是利用鍵值對。

所以要求返回一個對象

2:Vue中的 key 有什麼作用?

要使用key來給每個節點做一個唯一標識,Diff算法就可以正確的識別此節點,找到正確的位置區插入新的節點

key的作用主要是爲了高效的更新虛擬DOM。

3:computed,watch,methods,之間的區別?

watch和computed都是以Vue的依賴追蹤機制爲基礎的,依賴的數據,發生變化,會自動執行

computed: 計算屬性是基於他們的響應式依賴進行緩存的,依賴數據不變的時候computed從緩存中獲取,不會重新計算。

methods:方法是手動調用纔會執行,不管依賴的數據變不變,methods都會重新計算

在computed和watch方面,一個是計算,一個是觀察,在語義上是有區別的。

計算是通過變量計算來得出數據。而觀察是觀察一個特定的值,根據被觀察者的變動進行相應的變化

4:$nextTick方法的作用:
當頁面上的元素被重新渲染以後,纔會指定回調函數中的代碼

5:組件之間傳值

  • 父組件向子組件傳值
    父組件發送發送的形式是以屬性綁定的形式,綁定到子組件身上
    子組件用props接收
  • 子組件向父組件傳值
    子組件用$emit()觸發事件
    $emit()的第一個參數爲自定義事件名稱,第二個參數爲需要傳遞的數據
    父組件用v-on監聽子組件的數據
  • 兄弟之間傳值
    兄弟組件之間傳值,需要藉助事件中心,通過事件中心傳遞數據
    1. 提供一個事件中心: var zx = new Vue()
    2. 傳遞數據方: 通過一個事件觸發$emit(方法名,傳遞的數據)
    3. 接收數據方:通過mounted(){}鉤子函數,觸發zx.$on()方法名
    4. 銷燬事件: 通過zx.$off()方法銷燬,銷燬之後無法傳遞數據

6:vue路由鉤子函數
路由鉤子函數的作用:可以控制導航跳轉,有beforeEach,afterEach等。需要登錄才能調整頁面的重定向功能。
beforeEach主要有3個參數to,from,next:

to:route即將進入的目標路由對象,

from:route當前導航正要離開的路由

next:function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉。
7:keep-alive
keep-alive是 Vue 內置的一個組件,可以使被包含的組件保留狀態,或避免重新渲染
8: vue生命週期
vue實例從創建到銷燬的這個過程叫vue的生命週期
在生命週期裏面有很多鉤子函數,讓我們在控制整個vue實例的時候,形成更好的邏輯,有四個狀態,八個階段。beforeCreate,created,beforeMount,Mounted,beforeUpdate,update,bbeforeDestory,destory
頁面第一次加載的時候,,會執行beforeCreate,created,beforeMount,Mounted
常用的 created : 在這個階段初始化數據,在項目中請求數據的時候,一般在這個鉤子函數內觸發
mounted:模板中的html已經渲染到頁面,此時可以操作dom
9:vue-router
vue用來寫SPA(單頁面應用),SPA的核心之一就是跟新視圖,而不請求頁面。vue-router實現前端單頁面路由的時候,提供了兩個方式 history和hash
hash模式: 在url中,#之後包括#的字符串都叫hash,而且hash是不包含在http請求中的,所以對後端來說,即使沒有做到路由的完全覆蓋,也不會返回404
history模式:採用的是h5的新特性,前端的url和後端的url必須完全一致,一旦不一致就會出現404,所以要在服務端增加一個可以覆蓋全局的資源,如果url匹配不到任資源,應該返回一個index.html頁面
10: $ route 和$ router
$route:是路由信息對象 path,params,hash,query
$router:是路由的實例對象 包含路由的跳轉方法,鉤子函數
引申: params和query的區別
+. params
路由跳轉的方法有哪些 push .go
路由的鉤子函數有哪些 beforeEach((to,form,next()=>))
路由守衛:只有在進入入login這個路由,或者(當前的token值是有效的)才能 next(放行),否則路由跳轉到登錄頁面
11: MVC 和MVVM
12雙向數據綁定
剛開始就是通過v-model用的很舒服,後來開始結合MVVM這個整體的思想研究,雙向綁定的原理。採用了數據劫持結合發佈者訂閱模式,通過Object.defineProperty來劫持各個屬性的getter和setter(這裏有一個不好的地方,要在其上定義屬性的對象。要定義或者修改對象的屬性(必須遍歷每個屬性),將要被定義或者被修改的屬性的描述),數據發生變化的變動發送消息給訂閱者,觸發響應的監聽回調

遞歸+遍歷

target: 被代理對象。
handler: 是一個對象,聲明瞭代理target的一些操作。
obj: 是被代理完成之後返回的對象。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章