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

vue是采用數據劫持結合發布者-訂閱者模式的方式，通過object.defineProperty()來劫持各個屬性的setter和getter，在數據變動時發布消息給訂閱者，觸發響應的監聽回調

具體步驟：

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

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

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

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

二、MVVM的理解

MVVM 由 Model、View、ViewModel 三部分構成，Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯；View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象。

在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。

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

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

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

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

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

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

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

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

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

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

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

答：會觸發：beforeCreate(創建前)、created(創建后)、beforeMounte(渲染前)、mounted(渲染后)

2、、生命周期的作用

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

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

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

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

五、vue傳參

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

直接調用$router.push 實現攜帶參數的跳轉 this.$router.push({ path: `/describe/${id}`, })

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

this.$route.params.id

2、router-link進行傳參

父組件中：使用標簽進行導航

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

this.$route.params.id

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

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

對應路由配置

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

子組件接收參數

this.$route.params.id

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

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

對應路由配置

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

子組件接收參數

this.$route.query.id

注意：

接收參數時，是this.$route，不是this.$router

六、query和params的區別

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

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

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

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

七、vue-router有哪幾種導航鉤子

1、全局導航鉤子：

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

直接調用$router.push 實現攜帶參數的跳轉

this.$router.push({

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

})

注意：next 方法必須要調用，否則鉤子函數無法 resolved

這三個參數 to 、from 、next 分別的作用：

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

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

3、next: Function，這是一個必須需要調用的方法，而具體的執行效果則依賴 next 方法調用的參數

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

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

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

d、next(error)：如果傳入參數是一個 Error 實例，那么導航被終止的同時會將錯誤傳遞給 router.onError() 注冊過的回調

后置鉤子：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、組件內的導航鉤子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

八、路由的跳轉

1、this.$router.push()

2、router-link

九、SPA單頁面，有什么優缺點？

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

優點：

1.良好的交互體驗

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

3.減輕服務器壓力

缺點：

1.首屏加載慢

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

2.不利于SEO

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

3.不適合開發大型項目

十、封裝vue組件的過程

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。