2020前端知識點彙總(五)-vue

1、vue的元件通信？

• 父傳子用props
• 父用子用ref
• 子調父用$emit
• 無關系用Bus

2、vuex？

• 元件通信庫，可以避免子元件無法改變props的弊端等 mutations 同步操作， 用于改變狀态 官方不推薦異步 action
• 執行多個mutaions，官方推薦異步操作 mapState、mapGetters、mapActions使用示例

3、vue的雙向綁定？

• 原理：利用了 Object.defineProperty()這個方法重新定義了對象擷取屬性值(get)和設定屬性值(set)的操作來實作的。
• 缺點：雙向資料流是自動管理狀态的,但是在實際應用中會有很多不得不手動處理狀态變化的邏輯, 使得程式複雜度上升, 難以調試。

4、解釋computed watch methods？

• 前兩者自動追蹤資料，執行相關函數，最後一個手動調用；
• computed是計算屬性，用法與data一緻
• watch像事件監聽，對象發生變化時，執行相關操作
• methods與js中執行方法類似
• computed通常隻有get屬性
• 資料變化的同時進行異步操作或者是比較大的開銷，那麼watch為最佳選擇
• watch的對象必須事先聲明

5、v-show和v-if指令的共同點和不同點？

• v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隐藏
• v-if指令是直接銷毀和重建DOM達到讓元素顯示和隐藏的效果

6、嵌套路由怎麼定義？

• 嵌套路由是幻燈片的元件，router/index.js，我們把my，加了children，定義很多個子路由，子路由還可以繼續嵌套路由。

• 定義方法：

  細節，children，path不用斜杠，通路to：/my/login

  7、 vue-router有哪幾種導航鈎子

• 全局的鈎子函數:定義在全局路由對象中
• 某個路由獨享的鈎子,可以在路由配置上直接定義beforeEnter鈎子函數
• 元件内的鈎子函數: 定義在元件的route選項中

8、vuex是什麼？怎麼使用？哪種功能場景使用它？

• vue架構中狀态管理。
• 在main.js引入store，注入。建立一個目錄store，…… export 。
• 場景有：單頁應用中，元件之間的狀态。音樂播放、登入狀态、加入購物車

9、axios是什麼？怎麼使用？描述使用它實作登入功能的流程？

• 請求背景資源的子產品。
• npm install axios -S裝好，然後發送的是跨域，需在配置檔案中config/index.js進行設定。
• 背景如果是Tp5則定義一個資源路由。js中使用import進來，然後.get或.post。傳回在.then函數中如果成功，失敗則是在.catch函數中

10、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鈎子函數？還有哪些鈎子函數參數？

• 全局定義指令：在vue對象的directive方法裡面有兩個參數，一個是指令名稱，另外一個是函數。
• 元件内定義指令：directives
• 鈎子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（元件内相關更新）
• 鈎子函數參數：el、binding

11、vue的雙向綁定是通過什麼來劫持各個屬性的？

• vue是通過Object.defineProperty()來實作資料劫持的。
• Object.defineProperty( )它可以來控制一個對象屬性的一些特有操作，比如讀寫權、是否可以枚舉

12、vue-loader是什麼？使用它的用途有哪些？

• 解析.vue檔案的一個加載器。
• 用途：js可以寫es6、style樣式可以scss或less、template可以加jade等

13、為什麼vue避免v-if和v-for用在一起?

• 一般我們在兩種常見的情況下會傾向于這樣做：
• 為了過濾一個清單中的項目 (比如 v-for=“user in users” v-if=“user.isActive”)。在這種情形下，請将 users 替換為一個計算屬性 (比如activeUsers)，讓其傳回過濾後的清單。
• 為了避免渲染本應該被隐藏的清單 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。這種情形下，請将 v-if 移動至容器元素上 (比如 ul, ol)。

14、vue的虛拟dom？

• 虛拟的DOM的核心思想是：對複雜的文檔DOM結構，提供一種友善的工具，進行最小化地DOM操作。

15、vue生命周期總共有幾個階段？

• beforeCreate（建立前）,
• created（建立後）,
• beforeMount(載入前),
• mounted（載入後）,
• beforeUpdate（更新前）,
• updated（更新後）,
• beforeDestroy（銷毀前）,
• destroyed（ 銷毀後）

16、vue slot是做什麼的？

• 是對元件的擴充，通過slot插槽向元件内部指定位置傳遞内容，通過slot可以父子傳參

17、說出至少4種vue當中的指令和它的作用？

• v-if 判斷是否隐藏
• v-show 控制的隐藏出現，隻是将css屬性設為了display：none 或block;
• v-if 當值為 true時，顯示div ，當值為false時，改元素消失，代碼也會消失，相當于将代碼删除了
• v-for 進行清單和表格的渲染
• v-bind 綁定屬性，使用：替代 有三個修飾符：sync，once，camel将綁定的特性的名稱轉化為駝峰法則命名
• v-model 雙向資料綁定
• v-html 擷取html标簽 v-text不解釋标簽，v-html解釋标簽

19、vue路由鈎子函數用過沒？

• to: (Route路由對象) 即将要進入的目标 路由對象
• from: (Route路由對象) 目前導航正要離開的路由
• next: (Function函數) 一定要調用該方法來 resolve 這個鈎子。調用方法：next(參數或者空) ***必須調用

20、你常用的vue周邊全家桶？

• vue-router路由
• vuex狀态管理
• vue-resource / vue-axios請求資料
• vue-cli腳手架工具，用配置好的模闆迅速搭建起一個項目工程

21、router.addRoutes用過嗎？

• router.addroutes可以實作動态路由

22、nextTick使用場景？

• 需求：使用vue對ztree的封裝，由于ztree是需要确定DOM節點id和資料之後，執行初始化方法完成ztree的樹形展示，為了讓vue引入的元件樹彼此不受影響（是互相獨立的對象），是以ztreeid是利用時間戳+随機數生成的。
• 問題：由于是變量，發現發送ajax請求資料回來之後還dom樹還沒有渲染完成（沒有動态生成的ID）,導緻樹沒有生成。
• 解決辦法：修改treeId的值，使用$nextTick函數，確定dom樹變化之後再發送ajax請求，這樣就不會出現執行初始化方法的時候有資料沒有對應的ID節點的尴尬現象。

23、Vue架構中，導航鈎子有哪些？他們有哪些參數？

• 有兩種鈎子，前置守衛，後置鈎子
• 參數：
  • to: Route，代表要進入的目标，它是一個路由對象
  • from: Route，代表目前正要離開的路由，同樣也是一個路由對象
  • next: Function，這是一個必須需要調用的方法，而具體的執行效果則依賴 next 方法調用的參數
  • next()：進入管道中的下一個鈎子，如果全部的鈎子執行完了，則導航的狀态就是 confirmed（确認的）
  • next(false)：這代表中斷掉目前的導航，即 to 代表的路由對象不會進入，被中斷，此時該表 URL 位址會被重置到 from路由對應

24、vue中 key 值的作用？

• 使用key來給每個節點做一個唯一辨別key的作用主要是為了高效的更新虛拟DOM。另外vue中在使用相同标簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue隻會替換其内部屬性而不會觸發過渡效果。

25、vue 的雙向綁定的原理是什麼？

• vue.js 是采用資料劫持結合釋出者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的 setter，getter，在資料變動時釋出消息給訂閱者，觸發相應的監聽回調。