一、vue的雙向綁定原理(vue的原理、簡單說一下雙向數(shù)據(jù)綁定)

vue是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過object.defineProperty()來劫持各個屬性的setter和getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)響應(yīng)的監(jiān)聽回調(diào)

具體步驟：

第一步：需要observe的數(shù)據(jù)對象進行遞歸遍歷，給各個屬性加上setter和getter，從而監(jiān)聽數(shù)據(jù)的變化

第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，一旦數(shù)據(jù)變動，就更新視圖

第三步：watcher訂閱者是observe和complie之間通信的橋梁

第四步：MVVM作為數(shù)據(jù)綁定的入口，整合observe、compile和watcher三者，通過observe來監(jiān)聽自己的model數(shù)據(jù)變化，通過compile來解析編譯模板指令，最終利用watcher搭起observe和compile之間的橋梁，達到數(shù)據(jù)變化，視圖更新

二、MVVM的理解

MVVM 由 Model、View、ViewModel 三部分構(gòu)成，Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表UI 組件，它負責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來，ViewModel 是一個同步View 和 Model的對象。

在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會同步到Model中，而Model 數(shù)據(jù)的變化也會立即反應(yīng)到View 上。

ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM， 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護完全由 MVVM 來統(tǒng)一管理。

三、詳細說一下你對vue生命周期的理解

vue生命周期指的是vue實例從創(chuàng)建到銷毀的過程。包括8個階段，創(chuàng)建前/后、渲染前/后、更新前/后、銷毀前/后。beforeCreate(創(chuàng)建前)：vue實例的掛載元素$el和數(shù)據(jù)對象data都為undefined，還未初始化。

created(創(chuàng)建后)：vue實例的數(shù)據(jù)對象data有了，但是$el還沒有。

beforeMounte(渲染前)：vue實例的$el和data都初始化了，但是掛載之前還是虛擬的dom，data.message還未替換

mounted(渲染后)：vue實例掛載完成，data.message成功渲染。

beforeUpdate(更新前)：數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前?？梢栽谠撱^子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。

updated(更新后)：在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁之后調(diào)用。調(diào)用時，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因為這可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy(銷毀前)：在實例銷毀之前調(diào)用。實例仍然完全可用。

destroyed(銷毀后)： 在實例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

1、第一次加載時會觸發(fā)那些生命周期

答：會觸發(fā)：beforeCreate(創(chuàng)建前)、created(創(chuàng)建后)、beforeMounte(渲染前)、mounted(渲染后)

2、、生命周期的作用

答：控制整個vue實例的過程時會形成更好的邏輯

3、vue頁面請求時一般放在那個生命周期里

答：一般放在created或者mounted里面，看實際的需求，區(qū)別是created 頁面還沒渲染如果要操作dom節(jié)點的話沒法找到dom，在mounted里面請求，dom渲染完畢, 你再去請求數(shù)據(jù)就會有空殼dom的情況, 影響布局。

四、怎么定義vuve-router的動態(tài)路由？怎么獲取傳過來的動態(tài)參數(shù)？ 在router目錄下的index.js文件下，對path屬性加上/：id。使用router對象的params.id

五、vue傳參

1、直接調(diào)用$router.push()進行傳參

直接調(diào)用$router.push 實現(xiàn)攜帶參數(shù)的跳轉(zhuǎn) this.$router.push({ path: `/describe/${id}`, })

在子組件中可以使用來獲取傳遞的參數(shù)值

this.$route.params.id

2、router-link進行傳參

父組件中：使用標(biāo)簽進行導(dǎo)航

子組件中：使用this.$route.params.id來接收路由參數(shù)

this.$route.params.id

3、通過路由屬性中的name屬性來確定匹配路由，通過params來傳遞參數(shù)

this.$router.push({ name: '/describe', params: { id: id } })

對應(yīng)路由配置

{ path: '/describe', name: 'Describe', component: Describe }

子組件接收參數(shù)

this.$route.params.id

4、通過路由屬性中的path屬性來確定匹配路由，通過query來傳遞參數(shù)

this.$router.push({ path: '/describe', query: { id: id } })

對應(yīng)路由配置

{ path: '/describe', name: 'Describe', component: Describe }

子組件接收參數(shù)

this.$route.query.id

注意：

接收參數(shù)時，是this.$route，不是this.$router

六、query和params的區(qū)別

1、query要用path來引入，params要用name來引入，

2、接收參數(shù)時，分別是this.$route.query.name和this.$route.params.name(注意：是$route而不是$router)。

3、query更加類似于我們ajax中g(shù)et傳參，params則類似于post，前者在瀏覽器的地址欄中顯示，params不顯示

4、params傳值一刷新就沒了，query傳值刷新還存在

七、vue-router有哪幾種導(dǎo)航鉤子

1、全局導(dǎo)航鉤子：

前置鉤子：router.beforeEach(to，from，next)作用：跳轉(zhuǎn)前進行判斷攔截

直接調(diào)用$router.push 實現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)

this.$router.push({

path: `/describe/${id}`,

})

注意：next 方法必須要調(diào)用，否則鉤子函數(shù)無法 resolved

這三個參數(shù) to 、from 、next 分別的作用：

1、to: Route，代表要進入的目標(biāo)，它是一個路由對象

2、from: Route，代表當(dāng)前正要離開的路由，同樣也是一個路由對象

3、next: Function，這是一個必須需要調(diào)用的方法，而具體的執(zhí)行效果則依賴 next 方法調(diào)用的參數(shù)

a、 next()：進入管道中的下一個鉤子，如果全部的鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed(確認的)

b、next(false)：這代表中斷掉當(dāng)前的導(dǎo)航，即 to 代表的路由對象不會進入，被中斷，此時該表 URL 地址會被重置到 from 路由對應(yīng)的地址

c、next(‘/’) 和 next({path: ‘/’})：在中斷掉當(dāng)前導(dǎo)航的同時，跳轉(zhuǎn)到一個不同的地址

d、next(error)：如果傳入?yún)?shù)是一個 Error 實例，那么導(dǎo)航被終止的同時會將錯誤傳遞給 router.onError() 注冊過的回調(diào)

后置鉤子：router.afterEach(to、from)

router.afterEach((to,from) => {

if(to.meta && to.meta.title){

document.title = to.meta.title }else{

document.title = "666" } })

2、路由獨享的鉤子：beforeEnter

3、組件內(nèi)的導(dǎo)航鉤子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

八、路由的跳轉(zhuǎn)

1、this.$router.push()

2、router-link

九、SPA單頁面，有什么優(yōu)缺點？

SPA( single-page application )僅在 Web 頁面初始化時加載相應(yīng)的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉(zhuǎn)；取而代之的是利用路由機制實現(xiàn) HTML 內(nèi)容的變換，UI 與用戶的交互，避免頁面的重新加載。

優(yōu)點：

1.良好的交互體驗

2.良好的前后端工作分離模式

3.減輕服務(wù)器壓力

缺點：

1.首屏加載慢

解決方案：Vue-router懶加載、使用CDN加速、異步加載組件、服務(wù)端渲染

2.不利于SEO

解決方案：服務(wù)端渲染、頁面預(yù)渲染、路由采用h5 history模式

3.不適合開發(fā)大型項目

十、封裝vue組件的過程

總結(jié)

以上是生活随笔為你收集整理的vue引入id3_vue常见知识点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。