撩課-Web大前端每天5道面試題-Day22

1.mvvm和mvc區別？它和其它框架（jquery）的區別是什麼？哪些場景適合？

mvc和mvvm其實區別並不大。

都是一種設計思想。

主要就是mvc中Controller演變成mvvm中的viewModel。

mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，

載入速度變慢，影響用戶體驗。

區別：

vue數據驅動，
通過數據來顯示視圖層而不是節點操作。

場景：
數據操作比較多的場景，更加便捷

2.vue的優點是什麼？

低耦合。

視圖（View）可以獨立於Model變化和修改，
一個ViewModel可以綁定到不同的"View"上，
當View變化的時候Model可以不變，
當Model變化的時候View也可以不變。
可重用性。

你可以把一些視圖邏輯放在一個ViewModel裡面，
讓很多view重用這段視圖邏輯。
獨立開發。
開發人員可以專註於業務邏輯和數據的開發（ViewModel），
設計人員可以專註於頁面設計。
可測試。

界面素來是比較難於測試的，
而現在測試可以針對ViewModel來寫。

3.vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？

第一步：
在components目錄新建你的組件文件（indexPage.vue），
script一定要export default {}

第二步：
在需要用的頁面（組件）中導入：
import indexPage from '@/components/indexPage.vue'

第三步：
註入到vue的子組件的components屬性上面,components:{indexPage}

第四步：
在template視圖view中使用，
例如有indexPage命名，
使用的時候則index-page

4.請列舉出3個Vue中常用的生命周期鉤子函數?

created: 

實例已經創建完成之後調用,
在這一步,實例已經完成數據觀測, 
屬性和方法的運算, watch/event事件回調. 
然而, 掛載階段還沒有開始, 
$el屬性目前還不可見

mounted: 

el被新創建的 vm.$el 替換，
並掛載到實例上去之後調用該鉤子。
如果 root 實例掛載了一個文檔內元素，
當 mounted 被調用時 vm.$el 也在文檔內。
activated: keep-alive組件激活時調用

5.vue如何自定義一個過濾器？

html代碼：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

JS代碼：

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定義過濾器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

過濾器接收表達式的值 (msg) 作為第一個參數。
capitalize 過濾器將會收到 msg的值作為第一個參數。