v-bind和v-model的區別 1.v-bind用來綁定數據和屬性以及表達式，縮寫為'：' 2.v-model使用在表單中，實現雙向數據綁定的，在表單元素外使用不起作用 v-bind和v-model的區別 什麼是 mvvm？ MVVM 是 Model-View-ViewModel 的縮寫。mvv ...
v-bind和v-model的區別
1.v-bind用來綁定數據和屬性以及表達式，縮寫為'：' 2.v-model使用在表單中，實現雙向數據綁定的，在表單元素外使用不起作用什麼是 mvvm？
MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。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 來統一管理。mvvm 和 mvc 區別？
mvc 和 mvvm 其實區別並不大。都是一種設計思想。主要就是 mvc 中 Controller 演變成 mvvm 中的 viewModel。mvvm 主要解決了 mvc 中大量的 DOM 操作使頁面渲染性能降低，載入速度變慢，影響用戶體驗。和當 Model 頻繁發生變化，開發者需要主動更新到 View 。vue 的優點是什麼？
低耦合。視圖（View）可以獨立於 Model 變化和修改，一個 ViewModel 可以綁定到不同的"View"上，當 View 變化的時候 Model 可以不變，當 Model 變化的時候 View 也可以不變。可重用性。你可以把一些視圖邏輯放在一個 ViewModel 裡面，讓很多 view 重用這段視圖邏輯。
獨立開發。開發人員可以專註於業務邏輯和數據的開發（ViewModel），設計人員可以專註於頁面設計，使用 Expression Blend 可以很容易設計界面並生成 xml 代碼。
可測試。界面素來是比較難於測試的，而現在測試可以針對 ViewModel 來寫。
請詳細說下你對 vue 生命周期的理解？
答：總共分為 8 個階段創建前/後，載入前/後，更新前/後，銷毀前/後。 創建前/後： 在 beforeCreate 階段，vue 實例的掛載元素 el 還沒有。載入前/後：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。
更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。
銷毀前/後：在執行 destroy 方法後，對 data 的改變不會再觸發周期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，但是 dom 結構依然存在
組件之間的傳值？
父組件與子組件傳值//父組件通過標簽上面定義傳值
<template>
<Main :obj="data"></Main>
</template>
<script>
//引入子組件
import Main form "./main" exprot default{
name:"parent",
data(){
return {
data:"我要向子組件傳遞數據"
}
},
//初始化組件
components:{
Main
}
}
</script>
//子組件通過props方法接受數據
<template>
<div>{{data}}</div>
</template>
<script>
exprot default{
name:"son",
//接受父組件傳值
props:["data"]
}
</script>
子組件向父組件傳遞數據
//子組件通過$emit方法傳遞參數
<template>
<div v-on:click="events"></div>
</template>
<script>
//引入子組件
import Main form "./main" exprot default{
methods:{
events:function(){ }
}
}
</script>
// <template>
<div>{{data}}</div>
</template>
<script>
exprot default{
name:"son",
//接受父組件傳值
props:["data"]
}
</script>
active-class 是哪個組件的屬性？
vue-router 模塊的 router-link 組件。嵌套路由怎麼定義？
在實際項目中我們會碰到多層嵌套的組件組合而成，但是我們如何實現嵌套路由呢？因此我們需要在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。 index.html，只有一個路由出口 <div id="app"><!-- router-view 路由出口, 路由匹配到的組件將渲染在這裡 -->
<router-view></router-view>
</div>
main.js，路由的重定向，就會在頁面一載入的時候，就會將 home 組件顯示出來，因為重定向指向了 home 組件，redirect 的指向與 path 的必須一致。children 裡面是子路由，當然子路由裡面還可以繼續嵌套子路由。 import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //引入兩個組件 import home from "./home.vue"
import game from "./game.vue"
//定義路由
const routes = [
{ path: "/", redirect: "/home" },//重定向,指向了home組件
{
path: "/home", component: home,
children: [
{ path: "/home/game", component: game }
]
}
]
//創建路由實例
const router = new VueRouter({routes}) new Vue({
el: '#app',
data: {
},
methods: {
},
router
})
home.vue，點擊顯示就會將子路由顯示在出來，子路由的出口必須在父路由裡面，否則子路由無法顯示。
路由之間跳轉？
聲明式（標簽跳轉） <router-link :to="index">編程式（ js 跳轉） router.push('index')
懶載入（按需載入路由）（常考）
webpack 中提供了 require.ensure()來實現按需載入。以前引入路由是通過 import 這樣的方式引入，改為 const 定義的方式進行引入。 不進行頁面按需載入引入方式：
import home from '../../common/home.vue'
進行頁面按需載入的引入方式：
const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
vuex 是什麼？怎麼使用？哪種功能場景使用它？
vue 框架中狀態管理。在 main.js 引入 store，註入。新建了一個目錄 store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車 // 新建 store.jsimport vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
//...code
}) //main.js
import store from './store'
...
vue-router 有哪幾種導航鉤子?
三種 全局導航鉤子router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
組件內鉤子
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
單獨路由獨享組件
beforeEnter
自定義指令(v-check, v-focus) 的方法有哪些? 它有哪些鉤子函數? 還有哪些鉤子函數參數
全局定義指令：在 vue 對象的 directive 方法裡面有兩個參數, 一個是指令名稱, 另一個是函數。組件內定義指令：directives
鉤子函數: bind(綁定事件出發)、inserted(節點插入時候觸發)、update(組件內相關更新)
鉤子函數參數： el、binding
說出至少 4 種 vue 當中的指令和它的用法
v-if(判斷是否隱藏)、v-for(把數據遍歷出來)、v-bind(綁定屬性)、v-model(實現雙向綁定)vue 的雙向綁定的原理是什麼(常考)
vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的 setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。 具體步驟： 第一步：需要 observe 的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter 這樣的話，給這個對象的某個值賦值，就會觸發 setter，那麼就能監聽到了數據變化 第二步：compile 解析模板指令，將模板中的變數替換成數據，然後初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖 第三步：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁，主要做的事情是: 在自身實例化時往屬性訂閱器(dep)裡面添加自己自身必須有一個 update()方法
待屬性變動 dep.notice()通知時，能調用自身的 update() 方法，並觸發 Compile 中綁定的回調，則功成身退。
第四步：MVVM 作為數據綁定的入口，整合 Observer、Compile 和 Watcher 三者，通過 Observer 來監聽自己的 model 數據變化，通過 Compile 來解析編譯模板指令，最終利用 Watcher 搭起 Observer 和 Compile 之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據 model 變更的雙向綁定效果。
vuex 相關
vuex 有哪幾種屬性
有 5 種，分別是 state、getter、mutation、action、modulevuex 的 store 特性是什麼
vuex 就是一個倉庫，倉庫里放了很多對象。其中 state 就是數據源存放地，對應於一般 vue 對象裡面的 datastate 裡面存放的數據是響應式的，vue 組件從 store 讀取數據，若是 store 中的數據發生改變，依賴這相數據的組件也會發生更新
它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性
vuex 的 getter 特性是什麼
getter 可以對 state 進行計算操作，它就是 store 的計算屬性雖然在組件內也可以做計算屬性，但是 getters 可以在多給件之間復用
如果一個狀態只在一個組件內使用，是可以不用 getters
vuex 的 mutation 特性是什麼
action 類似於 muation, 不同在於：action 提交的是 mutation,而不是直接變更狀態action 可以包含任意非同步操作
vue 中 ajax 請求代碼應該寫在組件的 methods 中還是 vuex 的 action 中
如果請求來的數據不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入 vuex 的 state 里 如果被其他地方復用，請將請求放入 action 里，方便復用，並包裝成 promise 返回
不用 vuex 會帶來什麼問題
可維護性會下降，你要修改數據，你得維護 3 個地方可讀性下降，因為一個組件里的數據，你根本就看不出來是從哪裡來的
增加耦合，大量的上傳派發，會讓耦合性大大的增加，本來 Vue 用 Component 就是為了減少耦合，現在這麼用，和組件化的初衷相背
