前端面試——Vue

時間 2019-11-06

標籤前端面試 vue 欄目快樂工作简体版

原文原文鏈接

MVVM與MVC的不一樣

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行爲抽象化，讓咱們將視圖 UI 和業務邏輯分開。
javascript

MVVM（Model-View-ViewModel）框架的由來即是MVP（Model-View-Presenter）模式與WPF結合的應用方式時發展演變過來的一種新型架構框架。它立足於原有MVP框架而且把WPF的新特性糅合進去，以應對客戶日益複雜的需求變化。
css

MVP 裏的M 其實和MVC裏的M是一個，都是封裝了核心數據、邏輯和功能的計算關係的模型，而V是視圖（窗體），P就是封裝了窗體中的全部操做、響應用戶的輸入輸出、事件等，與MVC裏的C差很少，區別是MVC是系統級架構的，而MVP是用在某個特定頁面上的，也就是說MVP的靈活性要遠遠大於MVC，實現起來也極爲簡單。
html

MVC 一般的處理時序以下：前端

View 接受用戶的交互請求；
View 將請求轉交給 Controller；
Controller 操做 Model 進行數據更新；
數據更新以後，Model 通知 View 數據變化；
View 顯示更新以後的數據。

MVP 一般的調用時序以下：vue

View 接受用戶的交互請求；
View 將請求轉交給 Presenter；
Presenter 操做 Model 進行業務處理；
Model 通知 Presenter 數據發生變化；
Presenter 更新 View 的數據。

和 MVC 不一樣的是，Presenter 會副作用於 View，不像 Controller 只能被動的接受 View 的指揮。java

在MVP模式中，爲了讓UI層可以從邏輯層上分離下來，設計師們在UI層與邏輯層之間加了一層interface。不管是UI開發人員仍是數據開發人員，都要尊重這個契約、按照它進行設計和開發。這樣，理想狀態下不管是Web UI仍是Window UI就均可以使用同一套數據邏輯了。借鑑MVP的IView層，養成習慣。View Model聽起來比Presenter要貼切得多；會把一些跟事件、命令相關的東西放在MVC的'C',或者是MVVM的'Vm'。
node

MVVM 表明的是 Model-View-ViewModel。MVVM 模式將 Presenter 更名爲 ViewModel，基本上與 MVP 模式徹底一致，惟一區別在於 ViewModel 將密切關聯的 Model 和 View 的邏輯單獨提取出來，用數據綁定將他們關聯到一塊兒。
react

MVVM模式和MVC模式同樣，主要目的是分離視圖（View）和模型（Model），有幾大優勢

1. 低耦合。視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

2. 可重用性。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。

3. 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xaml代碼。

4. 可測試。界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。

Vue的生命週期

new Vue() > 初始化事件和生命週期 > beforeCreate > 數據綁定 > created > 若是有el屬性，則編譯模板 > beforeMount > 添加$el屬性，並替換掉掛載的DOM元素 > mounted > 數據更新 > beforeUpdate > 從新編譯模板並渲染DOM > updated > 調用$destoryed > beforeDestory > 銷燬vue實例 > destroyed
webpack

vue 在 v-for 時給每項元素綁定事件須要用事件代理嗎？爲何？

通常給 v-for 綁定事件時，都會讓節點指向同一個事件處理程序，必定程度上比每生成一個節點都綁定一個不一樣的事件處理程序性能好，可是監聽器的數量仍不會變，因此使用事件代理會更好一點。ios

Redux 和 Vuex 的設計思想

共同點

首先二者都是處理全局狀態的工具庫，大體實現思想都是：全局state保存狀態---->dispatch(action)------>reducer(vuex裏的mutation)----> 生成newState; 整個狀態爲同步操做；

區別

最大的區別在於處理異步的不一樣，vuex裏面多了一步commit操做，在action以後commit(mutation)以前處理異步，而redux裏面則是經過中間件處理

Redux流程

一、用戶經過 View 發出 Action：store.dispatch(action);

二、而後 Store 自動調用 Reducer，而且傳入兩個參數：當前 State 和收到的 Action。 Reducer 會返回新的 State 。

let nextState = xxxReducer(previousState, action);

三、State 一旦有變化，Store 就會調用監聽函數。

store.subscribe(listener); 四、listener能夠經過 store.getState() 獲得當前狀態。若是使用的是 React，這時能夠觸發從新渲染 View。

VUEX

一、在vue組件裏面，經過dispatch來觸發actions提交修改數據的操做。

二、而後再經過actions的commit來觸發mutations來修改數據。

三、mutations接收到commit的請求，就會自動經過Mutate來修改state（數據中內心面的數據狀態）裏面的數據。

四、最後由store觸發每個調用它的組件的更新

對比Redux

Redux： view——>actions——>reducer——>state變化——>view變化（同步異步同樣）

Vuex： view——>commit——>mutations——>state變化——>view變化（同步操做）

view——>dispatch——>actions——>mutations——>state變化——>view變化（異步操做）

vue雙向數據綁定

<input id="input" type="text" />

<div id="text"></div>

let input = document.getElementById("input");
let text = document.getElementById("text");
let data = { value: "" };
Object.defineProperty(data, "value", {
  set: function(val) {
    text.innerHTML = val;
    input.value = val;
  },
  get: function() {
    return input.value;
  }
});
input.onkeyup = function(e) {
  data.value = e.target.value;
};複製代碼

Virtual DOM 真的比操做原生 DOM 快嗎？

這是一個性能 vs. 可維護性的取捨。框架的意義在於爲你掩蓋底層的 DOM 操做，讓你用更聲明式的方式來描述你的目的，從而讓你的代碼更容易維護。沒有任何框架能夠比純手動的優化 DOM 操做更快，由於框架的 DOM 操做層須要應對任何上層 API 可能產生的操做，它的實現必須是普適的。

爲何 Vuex 的 mutation 和 Redux 的 reducer 中不能作異步操做？

Mutation 必須是同步函數一條重要的原則就是要記住 mutation 必須是同步函數。爲何？請參考下面的例子：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}複製代碼

如今想象，咱們正在 debug 一個 app 而且觀察 devtool 中的 mutation 日誌。每一條 mutation 被記錄，devtools 都須要捕捉到前一狀態和後一狀態的快照。然而，在上面的例子中 mutation 中的異步函數中的回調讓這不可能完成：由於當 mutation 觸發的時候，回調函數尚未被調用，devtools 不知道何時回調函數實際上被調用——實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。

在組件中提交 Mutation 你能夠在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 映射爲 `this.$store.commit('increment')`


  // `mapMutations` 也支持載荷：
  'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
  add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
})


  }
}


複製代碼

爲何Redux的reducer裏不能有異步操做。

先從Redux的設計層面來解釋爲何Reducer必須是純函數若是你常常用React+Redux開發，那麼就應該瞭解Redux的設計初衷。Redux的設計參考了Flux的模式，做者但願以此來實現時間旅行，保存應用的歷史狀態，實現應用狀態的可預測。因此整個Redux都是函數式編程的範式，要求reducer是純函數也是天然而然的事情，使用純函數才能保證相同的輸入獲得相同的輸入，保證狀態的可預測。

Vue 的響應式原理中 Object.defineProperty 有什麼缺陷？爲何在 Vue3.0 採用了 Proxy，拋棄了 Object.defineProperty？

Object.defineProperty沒法監控到數組下標的變化，致使經過數組下標添加元素，不能實時響應；
Object.defineProperty只能劫持對象的屬性，從而須要對每一個對象，每一個屬性進行遍歷，若是，屬性值是對象，還須要深度遍歷。Proxy能夠劫持整個對象，並返回一個新的對象。
Proxy不只能夠代理對象，還能夠代理數組。還能夠代理動態增長的屬性。

//defineProperty實現

var data = { name: 'yck' }
observe(data)
let name = data.name // -> get value
data.name = 'yyy' // -> change value

function observe(obj) {
  // 判斷類型
  if (!obj || typeof obj !== 'object') {
    return
  }
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key])
  })
}

function defineReactive(obj, key, val) {
  // 遞歸子屬性
  observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      console.log('get value')
      return val
    },
    set: function reactiveSetter(newVal) {
      console.log('change value')
      val = newVal
    }
  })
}

//代理

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value)
      return Reflect.set(target, property, value)
    }
  }
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let value
let p = onWatch(
  obj,
  v => {
    value = v
  },
  (target, property) => {
    console.log(`Get '${property}' = ${target[property]}`)
  }
)
p.a = 2 // bind `value` to `2`
p.a // -> Get 'a' = 2



//代理

<body>
  hello,world
  <input type="text" id="model">

  <p id="word"></p>

</body>

<script>
  const model = document.getElementById("model")
  const word = document.getElementById("word")
  var obj= {};

  const newObj = new Proxy(obj, {
      get: function(target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
      },
      set: function(target, key, value, receiver) {
        console.log('setting',target, key, value, receiver);
        if (key === "text") {
          model.value = value;
          word.innerHTML = value;
        }
        return Reflect.set(target, key, value, receiver);
      }
    });

  model.addEventListener("keyup",function(e){
    newObj.text = e.target.value
  })
</script>複製代碼

Vue 組件中data爲何返回的是個函數呢？

由於組件是用來複用的，且在JS中的對象之間是引用關係，那若是組件中的data是一個對象，那麼這樣做用域沒有隔離，子組件中的data屬性值會相互影響，相反若是組件中的data是個函數，那麼每一個實例能夠維護一份被返回對象的獨立的拷貝，那麼這樣組件實例之間的data屬性值就不會互相影響了。

v-model 的使用？

原生input其實只是一個語法糖（事件的語法糖），:bind="value"與@change="value = $event.target.value"的結合。

自定義組件的時候的v-model默認監聽change事件和綁定value 的prop。

虛擬DOM

虛擬 dom 是相對於瀏覽器所渲染出來的真實 dom 的，在react，vue等技術出現以前，咱們要改變頁面展現的內容只能經過遍歷查詢 dom 樹的方式找到須要修改的 dom 而後修改樣式行爲或者結構，來達到更新 ui 的目的。

這種方式至關消耗計算資源，由於每次查詢 dom 幾乎都須要遍歷整顆 dom 樹，若是創建一個與 dom 樹對應的虛擬 dom 對象（ js 對象），以對象嵌套的方式來表示 dom 樹，那麼每次 dom 的更改就變成了 js 對象的屬性的更改，這樣一來就能查找 js 對象的屬性變化要比查詢 dom 樹的性能開銷小。

$nextTick 的使用？

當數據更新了，在dom中渲染後，自動執行該函數

nextTick 可讓咱們在下次 DOM 更新循環結束以後執行延遲迴調，用於得到更新後的 DOM。

在 Vue 2.4 以前都是使用的 microtasks，可是 microtasks 的優先級太高，在某些狀況下可能會出現比事件冒泡更快的狀況，但若是都使用 macrotasks 又可能會出現渲染的性能問題。因此在新版本中，會默認使用 microtasks，但在特殊狀況下會使用 macrotasks，好比 v-on。

對於實現 macrotasks ，會先判斷是否能使用 setImmediate ，不能的話降級爲 MessageChannel ，以上都不行的話就使用 setTimeout

if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else if (
  typeof MessageChannel !== 'undefined' &&
  (isNative(MessageChannel) ||
    // PhantomJS
    MessageChannel.toString() === '[object MessageChannelConstructor]')
) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}
nextTick 同時也支持 Promise 的使用，會判斷是否實現了 Promise

export function nextTick(cb?: Function, ctx?: Object) {
  let _resolve
  // 將回調函數整合進一個數組中
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // 判斷是否可使用 Promise
  // 能夠的話給 _resolve 賦值
  // 這樣回調函數就能以 promise 的方式調用
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}複製代碼

Vue與React的區別

區別

監聽數據變化的實現原理不一樣

Vue 經過 getter/setter 以及一些函數的劫持，能精確知道數據變化，不須要特別的優化就能達到很好的性能
React 默認是經過比較引用的方式進行的，若是不優化（PureComponent/shouldComponentUpdate）可能致使大量沒必要要的VDOM的從新渲染

爲何 React 不精確監聽數據變化呢？這是由於 Vue 和 React 設計理念上的區別，Vue 使用的是可變數據，而React更強調數據的不可變。因此應該說沒有好壞之分，Vue更加簡單，而React構建大型應用的時候更加棒。

數據流的不一樣 Vue中默認是支持雙向綁定的。在Vue1.0中咱們能夠實現兩種雙向綁定：

父子組件之間，props 能夠雙向綁定
組件與DOM之間能夠經過 v-model 雙向綁定

在 Vue2.x 中去掉了第一種，也就是父子組件之間不能雙向綁定了（可是提供了一個語法糖自動幫你經過事件的方式修改），而且 Vue2.x 已經不鼓勵組件對本身的 props 進行任何修改了。因此如今咱們只有組件 <–> DOM 之間的雙向綁定這一種。

然而 React 從誕生之初就不支持雙向綁定，React一直提倡的是單向數據流，他稱之爲 onChange/setState()模式。

不過因爲咱們通常都會用 Vuex 以及 Redux 等單向數據流的狀態管理框架，所以不少時候咱們感覺不到這一點的區別了。

HoC (高階組件) 和 mixins

在 Vue 中咱們組合不一樣功能的方式是經過 mixin，而在React中咱們經過 HoC (高階組件）。

React 最先也是使用 mixins 的，不事後來他們以爲這種方式對組件侵入太強會致使不少問題，就棄用了 mixinx 轉而使用 HoC，關於mixin究竟哪裏很差，能夠參考React官方的這篇文章 Mixins Considered Harmful

而 Vue 一直是使用 mixin 來實現的。

爲何 Vue 不採用 HoC 的方式來實現呢？

高階組件本質就是高階函數，React 的組件是一個純粹的函數，因此高階函數對React來講很是簡單。

可是Vue就不行了，Vue中組件是一個被包裝的函數，並不簡單的就是咱們定義組件的時候傳入的對象或者函數。好比咱們定義的模板怎麼被編譯的？好比聲明的props怎麼接收到的？這些都是vue建立組件實例的時候隱式乾的事。因爲vue默默幫咱們作了這麼多事，因此咱們本身若是直接把組件的聲明包裝一下，返回一個高階組件，那麼這個被包裝的組件就沒法正常工做了。

組件通訊的區別 其實這部分兩個比較類似。

在Vue 中有三種方式能夠實現組件通訊：

父組件經過 props 向子組件傳遞數據或者回調，雖然能夠傳遞迴調，可是咱們通常只傳數據，而經過事件的機制來處理子組件向父組件的通訊
子組件經過事件向父組件發送消息
經過 V2.2.0 中新增的 provide/inject 來實現父組件向子組件注入數據，能夠跨越多個層級。

另外有一些好比訪問 parent/parent/

p ar en**t

/children等比較dirty的方式這裏就不講了。

在 React 中，也有對應的三種方式：

父組件經過 props 能夠向子組件傳遞數據或者回調
能夠經過 context 進行跨層級的通訊，這其實和 provide/inject 起到的做用差很少。

能夠看到，React 自己並不支持自定義事件，Vue中子組件向父組件傳遞消息有兩種方式：事件和回調函數，並且Vue更傾向於使用事件。可是在 React 中咱們都是使用回調函數的，這多是他們兩者最大的區別。

模板渲染方式的不一樣

在表層上，模板的語法不一樣

React 是經過JSX渲染模板
而Vue是經過一種拓展的HTML語法進行渲染

但其實這只是表面現象，畢竟React並沒必要須依賴JSX。在深層上，模板的原理不一樣，這纔是他們的本質區別：

React是在組件JS代碼中，經過原生JS實現模板中的常見語法，好比插值，條件，循環等，都是經過JS語法實現的
Vue是在和組件JS代碼分離的單獨的模板中，經過指令來實現的，好比條件語句就須要 v-if 來實現

對這一點，我我的比較喜歡React的作法，由於他更加純粹更加原生，而Vue的作法顯得有些獨特，會把HTML弄得很亂。舉個例子，說明React的好處：

react中render函數是支持閉包特性的，因此咱們import的組件在render中能夠直接調用。可是在Vue中，因爲模板中使用的數據都必須掛在 this 上進行一次中轉，因此咱們import 一個組件完了以後，還須要在 components 中再聲明下，這樣顯然是很奇怪但又不得不這樣的作法。

Vuex 和 Redux 的區別

從表面上來講，store 注入和使用方式有一些區別。

在 Vuex 中，$store 被直接注入到了組件實例中，所以能夠比較靈活的使用：

使用 dispatch 和 commit 提交更新
經過 mapState 或者直接經過 this.$store 來讀取數據

在 Redux 中，咱們每個組件都須要顯示的用 connect 把須要的 props 和 dispatch 鏈接起來。

另外 Vuex 更加靈活一些，組件中既能夠 dispatch action 也能夠 commit updates，而 Redux 中只能進行 dispatch，並不能直接調用 reducer 進行修改。

從實現原理上來講，最大的區別是兩點：

Redux 使用的是不可變數據，而Vuex的數據是可變的。Redux每次都是用新的state替換舊的state，而Vuex是直接修改
Redux 在檢測數據變化的時候，是經過 diff 的方式比較差別的，而Vuex其實和Vue的原理同樣，是經過 getter/setter來比較的（若是看Vuex源碼會知道，其實他內部直接建立一個Vue實例用來跟蹤數據變化）

而這兩點的區別，其實也是由於 React 和 Vue的設計理念上的區別。React更偏向於構建穩定大型的應用，很是的科班化。相比之下，Vue更偏向於簡單迅速的解決問題，更靈活，不那麼嚴格遵循條條框框。所以也會給人一種大型項目用React，小型項目用 Vue 的感受。

各自優勢

React

React速度很快：它並不直接對DOM進行操做，引入了一個叫作虛擬DOM的概念，安插在javascript邏輯和實際的DOM之間，性能好。最大限度減小DOM交互。
跨瀏覽器兼容：虛擬DOM幫助咱們解決了跨瀏覽器問題，它爲咱們提供了標準化的API，甚至在IE8中都是沒問題的。
一切都是component：代碼更加模塊化，重用代碼更容易，可維護性高。這樣當某個或某些組件出現問題是，能夠方便地進行隔離。每一個組件均可以進行獨立的開發和測試，而且它們能夠引入其它組件。這等同於提升了代碼的可維護性。
單向數據流：Flux是一個用於在JavaScript應用中建立單向數據層的架構，它隨着React視圖庫的開發而被Facebook概念化。減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。
同構、純粹的javascript：由於搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。
兼容性好：好比使用RequireJS來加載和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務再也不讓人望而生畏。

vue

性能高效
雙向數據綁定
學習難度低，上手簡單。

React 的缺陷

React 只是一個視圖庫，而不是一個完整的框架。
對於 Web 開發初學者來講，有一個學習曲線。
將 React 集成到傳統的 MVC 框架中須要一些額外的配置。
代碼複雜性隨着內聯模板和 JSX 的增長而增長。
若是有太多的小組件可能增長項目的龐大和複雜。

v-if和v-show的區別

相同點：v-if與v-show均可以動態控制dom元素顯示隱藏

不一樣點：v-if顯示隱藏是將dom元素整個添加或刪除，而v-show隱藏則是爲該元素添加css--display:none，dom元素還在。

vue自定義指令

Vue.direcctive(‘focus’,{
		inserted:function(el){
			el.focus()
		}
})
new Vue({
		el:"app"
})

指令定義函數提供了幾個鉤子函數（可選）：

bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做。
inserted: 被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於 document 中）。
update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新（詳細的鉤子函數參數見下）。
componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。
unbind: 只調用一次， 指令與元素解綁時調用。

接下來咱們來看一下鉤子函數的參數 (包括 el，binding，vnode，oldVnode) 。複製代碼

跟keep-alive有關的生命週期是哪些？描述下這些生命週期

activated和deactivated

keep-alive的生命週期 1.activated：頁面第一次進入的時候，鉤子觸發的順序是created->mounted->activated 2.deactivated: 頁面退出的時候會觸發deactivated，當再次前進或者後退的時候只觸發activated

vue使用v-for遍歷對象時，是按什麼順序遍歷的？如何保證順序？

在遍歷對象時，會按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下都一致。

prop驗證的type類型有哪幾種？

Number, String, Boolean, Array, Function, Object

說說你對單向數據流和雙向數據流的理解

單向數據流：全部狀態的改變可記錄、可跟蹤，源頭易追溯；全部數據只有一份，組件數據只有惟一的入口和出口，使得程序更直觀更容易理解，有利於應用的可維護性；一旦數據變化，就去更新頁面(data-頁面)，可是沒有(頁面-data)；若是用戶在頁面上作了變更，那麼就手動收集起來(雙向是自動)，合併到原有的數據中。雙向數據流：不管數據改變，或是用戶操做，都能帶來互相的變更，自動更新。

vue在created和mounted這兩個生命週期中請求數據有什麼區別呢？

created階段的ajax請求與mounted請求的區別：前者頁面視圖未出現，若是請求信息過多，頁面會長時間處於白屏狀態
在created的時候，視圖中的html並無渲染出來，因此此時若是直接去操做html的dom節點，必定找不到相關的元素，而在mounted中，因爲此時html已經渲染出來了，因此能夠直接操做dom節點，（此時document.getelementById 便可生效了）。

computed和watch的區別

computed特性

1.是計算值 2.應用：就是簡化tempalte裏面{{}}計算和處理props或$emit的傳值 3.具備緩存性，頁面從新渲染值不變化,計算屬性會當即返回以前的計算結果，而沒必要再次執行函數

watch特性

1.是觀察的動做 2.應用：監聽props，$emit或本組件的值執行異步操做 3.無緩存性，頁面從新渲染時值不變化也會執行

hash /a#/b； history /a/b。vue如何檢測前端路由變化（vue中方法）

watch: {
$route(to, from){
console.log(to, from)
}
}複製代碼

vuex action和mutation的區別

action：簡單來講就是異步操做數據

mutation：把處理數據邏輯方法所有放在mutation裏面使數據和視圖分離（vuex中store數據改變惟一的方法就是mutation）

vue-for中key的做用

key的做用主要是爲了高效的更新虛擬DOM。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是爲了讓vue能夠區分它們，不然vue只會替換其內部屬性而不會觸發過渡效果。

首屏加載優化

在使用ui庫時,儘可能使用按需加載方式.
異步加載,官方文檔很詳盡,改造起來也不難,能夠試試
合理規劃三方庫的引用.這個聽起來有點龜毛,'收益'可能也不是很高,不過是個調整方向
善用webpack-bundle-analyzer優化項目依賴
服務端開啓 gzip壓縮

axios的理解

1. Axios是什麼

Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。(一看是基於promise是否是就對它的API有了大概的瞭解？哈哈哈)

2. Axios的特色

從瀏覽器中建立 XMLHttpRequests
從 node.js 建立 http 請求
支持 Promise API
攔截請求和響應（就是有interceptor）
轉換請求數據和響應數據
取消請求
自動轉換 JSON 數據
客戶端支持防護 XSRF

Mvvm定義

MVVM是Model-View-ViewModel的簡寫。

即模型-視圖-視圖模型。

【模型】指的是後端傳遞的數據。【視圖】指的是所看到的頁面。【視圖模型】mvvm模式的核心，它是鏈接view和model的橋樑。它有兩個方向：一是將【模型】轉化成【視圖】，即將後端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成後端的數據。實現的方式是：DOM 事件監聽。這兩個方向都實現的，咱們稱之爲數據的雙向綁定。

爲何要使用vue？

（1）只專一與視圖層的輕量級的框架

（2）數據的雙向綁定優勢是減小了dom操做

（3）組件化和響應式設計

（4）實現數據與結構的分離高效輕便易於瀏覽器的加載速度

寫 React / Vue 項目時爲何要在列表組件中寫 key，其做用是什麼？

"原地複用"不產生反作用的狀況下，不用key效率最快

「原地複用」產生反作用，須要用key，且用key經過map查找比遍歷查找效率更快

用key的主要做用是不產生反作用，跟不用key去比效率就沒意義了，不是一個層面上的事，效率較快是和遍歷查找相比而言

在 Vue 中，子組件爲什麼不能夠修改父組件傳遞的 Prop，若是修改了，Vue 是如何監控到屬性的修改並給出警告的。

子組件爲什麼不能夠修改父組件傳遞的 Prop
單向數據流，易於監測數據的流動，出現了錯誤能夠更加迅速的定位到錯誤發生的位置。
若是修改了，Vue 是如何監控到屬性的修改並給出警告的。

Vue 的父組件和子組件生命週期鉤子執行順序是什麼

加載渲染過程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子組件更新過程
父beforeUpdate->子beforeUpdate->子updated->父updated
父組件更新過程
父beforeUpdate->父updated
銷燬過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。