VUE的雙向綁定原理

image.png

原理：在創(chuàng)建Vue實例時坯汤，Vue會遍歷data選項的屬性缩麸，利用Object.defineProperty()為屬性添加getter和setter對數(shù)據(jù)的讀取進行劫持（getter用來依賴手機布疙，setter用來派發(fā)更新）豺瘤，并且在內(nèi)部追蹤依賴姆钉，在屬性被訪問和修改時通知變化说订。每個組件實例會有相應(yīng)的watcher實例抄瓦，會在組件渲染過程中記錄依賴的所有數(shù)據(jù)屬性潮瓶，之后依賴項被改動時，setter方法會通知依賴與此data的watcher實例重新計算（派發(fā)更新）钙姊，從而使它關(guān)聯(lián)的組件重新渲染毯辅。

一句話總結(jié)：vue.js采用數(shù)據(jù)劫持結(jié)合發(fā)布-訂閱模式，通過Object.defineProperty()來劫持各個屬性的setter煞额、getter思恐，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)響應(yīng)的監(jiān)聽回調(diào)膊毁。

我的理解：在new Vue的時候胀莹，在Observer中通過Object.defineProperty()達到數(shù)據(jù)劫持，代理所有數(shù)據(jù)的getter和setter屬性婚温，在每次觸發(fā)setter的時候描焰，都會通過Dep來通知Watcher，Watcher作為Observer數(shù)據(jù)監(jiān)聽器與Compile模板解析器之間的橋梁栅螟，當Observer監(jiān)聽到數(shù)據(jù)發(fā)生改變的時候荆秦，通過Updater來通知Compile更新視圖。而Compile通過Watcher訂閱對應(yīng)數(shù)據(jù)力图，綁定更新函數(shù)步绸，通過Dep來添加訂閱者，達到雙向綁定吃媒。

什么是Vue的生命周期瓤介？

Vue實例從創(chuàng)建到銷毀的全過程，就是生命周期赘那。也就是從開始創(chuàng)建惑朦、初始化數(shù)據(jù)、編譯模板漓概、掛載DOM->渲染漾月、更新->渲染、卸載等一系列過程胃珍。

Vue生命周期的作用是什么梁肿？

它的生命周期中有多個事件鉤子蜓陌，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

Vue生命周期共有幾個階段吩蔑？

它可以分為8個階段：創(chuàng)建前/后钮热、載入前/后、更新前/后烛芬、銷毀前/后隧期。

• beforeCreate：在實例初始化之后，el和data并未初始化（這個時候赘娄，this變量還不能使用仆潮，在data下的數(shù)據(jù)，和methods下的方法遣臼，watcher中的事件都不能獲取到）性置。
• created：完成了data數(shù)據(jù)的初始化，el沒有（這個時候揍堰，可以操作Vue實例中的數(shù)據(jù)和各種方法了鹏浅，但是還不能對dom節(jié)點進行操作）。
• beforeMount：完成了el和data初始化（這里的el是虛擬的dom）屏歹。
• mounted：完成掛載隐砸，在這發(fā)起后端請求，拿回數(shù)據(jù)蝙眶，配合理由鉤子做一些事情（掛載完畢季希，這時dom節(jié)點被渲染到文檔中，一些需要dom的操作在此時才能正常進行）械馆。
• beforeUpdate：是指view層數(shù)據(jù)變化前胖眷，不是data中的數(shù)據(jù)改變前觸發(fā)。
• update：是指view層數(shù)據(jù)變化之后霹崎。
• beforeDestroy：你確認刪除XX嗎珊搀？
• destroyed：當前組件已被刪除，清空相關(guān)內(nèi)容尾菇。

第一次頁面加載會觸發(fā)哪幾個鉤子境析？

第一次頁面加載時會觸發(fā)beforeCreate、created派诬、beforeMounted劳淆、mounted

DOM渲染在哪個周期中就已經(jīng)完成？

DOM渲染在mounted中就已經(jīng)完成默赂。

簡單描述每個周期具體適合哪些場景沛鸵？

1、beforeCreate：可以在這加個loading事件，在加載實例時觸發(fā)曲掰；
2疾捍、created：初始化完成時的事件寫在這里，如在這結(jié)束loading事件栏妖，異步請求也適宜在這里調(diào)用乱豆；
3、mounted：掛載元素吊趾，獲取DOM節(jié)點宛裕；
4、updated：如果對數(shù)據(jù)統(tǒng)一處理论泛，在這里寫上相應(yīng)函數(shù)揩尸；
5、beforeDestroy：可以放一個確認停止事件的確認框孵奶；
6疲酌、nextTick：更新數(shù)據(jù)后立即操作DOM蜡峰。

v-show和v-if的區(qū)別

• v-show是CSS切換了袁，v-if是完整的銷毀和重新創(chuàng)建（使用頻繁切換時使用v-show，運行時較少改變使用v-if）
• v-if 是條件渲染湿颅，當v-if=false時不會渲染载绿，也就是頁面不會有這個HTML標簽生成
• v-show則是不管是true還是false，HTML元素都會存在油航，只是css中的display顯示或隱藏
• v-show僅僅控制元素的顯示方式崭庸，將display屬性在block和none中來回切換；而v-if會控制這個DOM節(jié)點的存在與否谊囚。當我們需要經(jīng)常切換某個元素的顯示/隱藏時怕享，使用v-show更能節(jié)省性能上的開銷；當只需要一次顯示/隱藏時镰踏，使用v-if更合理函筋。

開發(fā)中常用的指令有哪些？

• v-model：一般用于表達輸入（輸入框）奠伪，很輕松的實現(xiàn)表單控件和數(shù)據(jù)的雙向綁定
• v-html：更新元素的innerHTML
• v-show和v-if：條件渲染
• v-on:click：可以簡寫為@click跌帐，@綁定一個事件，如果事件觸發(fā)了绊率，就可以指定事件的處理函數(shù)
• v-bind：當表達式的值改變時谨敛，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM語法
• v-bind:title='msg'簡寫：title='msg'

綁定class的數(shù)組用法

1滤否、對象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
2脸狸、數(shù)組方法v-bind:class="[class1, class2]"
3、行內(nèi)v-bind:style="{color: color, fontSize: fontSize+'px'}"

路由跳轉(zhuǎn)方式

1藐俺、router-link標簽會渲染為標簽炊甲，咋填template中的跳轉(zhuǎn)都是這種盯仪；
2、另一種是編輯式導航蜜葱，也就是通過js跳轉(zhuǎn)比如router.push('/home')

MVVM

M- model 全景，model 表示數(shù)據(jù)模型，也可以在model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯
V- view牵囤，view表示視圖爸黄，它負責將數(shù)據(jù)模型轉(zhuǎn)換為視圖展示出來
VM- viewmodel，viewmodel是一個同步view和model的對象揭鳞，連接view和model炕贵，用于監(jiān)聽數(shù)據(jù)模型的改變和控制視圖行為

computed和watch的區(qū)別？

computed：computed是計算屬性野崇，也就是計算值称开，更多用于計算值的場景。它具有緩存性乓梨，computed的值在getter執(zhí)行后是會緩存的鳖轰，只有在它依賴的屬性值改變之后，下一次獲取computed的值時重新調(diào)用對應(yīng)的getter來計算扶镀。

watch：watch更多的是觀察作用蕴侣，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào)，用于觀察props臭觉、$emit或者本組件的值昆雀，當數(shù)據(jù)變化時用來執(zhí)行回調(diào)進行后續(xù)操作。它不具有緩存性蝠筑，頁面重新渲染時值不會變化也不會執(zhí)行狞膘。

Vue組件的scoped屬性的作用

在style標簽上添加scoped屬性，以表示它的樣式作用于當下的模塊什乙，很好的實現(xiàn)了樣式私有化的目的挽封，但是也得慎用，樣式不易改變稳强。
解決方法：
① 使用混合型的css樣式场仲，混合使用全局樣式和私有樣式。
② 深度作用選擇器：如果你希望scoped樣式中的一個選擇器能夠作用的更深退疫，可以使用>>>操作符渠缕。如：<style scoped>.a>>>.b{/.../}</style>

vue.js的兩個核心是什么？

• 數(shù)據(jù)驅(qū)動：Object.defineProperty和存儲器屬性：getter和setter(只兼容IE9及以上版本)褒繁∫嗔郏可稱為基于依賴收集的觀測機制，核心是VM，即viewmodel燕差，保證數(shù)據(jù)和視圖的一致性遭笋。
• 組件系統(tǒng)：能夠把頁面抽象成多個相對獨立的模塊，實現(xiàn)代碼重用徒探，提高開發(fā)效率和代碼質(zhì)量瓦呼，使代碼易于維護。

v-on可以監(jiān)聽多個方法嗎测暗？（可以的）

一個元素綁定多個事件的寫法有兩種：
1央串、修飾符的使用

<a style="cursor:default" v-on='{click:DoSomething, mouseleave: MouseLeave}'>doSomething</a>

2、在method方法里分別寫兩個事件

<button @click="a(), b()">點我ab<button>

vue事件中如何使用event對象

<button @click="Event($event)">事件對象</button>

vue中data為什么必須是函數(shù)碗啄？

data () {
  return {}
}

Vue組件中的data值不能為對象质和，因為對象是引用類型，組件可能會被多個實例同時引用稚字，如果data值為對象饲宿，將導致多個實例共享一個對象，其中一個組件改變data屬性值胆描，其它實例也會受到影響瘫想。

Vue中的nextTick是什么作用？

原理：JS執(zhí)行是單線程的袄友，它是基于事件循環(huán)的殿托。所有同步任務(wù)都在主線程上執(zhí)行霹菊，形成一個執(zhí)行棧剧蚣。主線程之外，還存在一個任務(wù)隊列旋廷，只要異步任務(wù)有了運行結(jié)果鸠按，就在任務(wù)隊列中放置一個事件。一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢饶碘，系統(tǒng)就會讀取任務(wù)隊列目尖，看看那些對應(yīng)的異步任務(wù)，等結(jié)束等待狀態(tài)扎运，進入執(zhí)行棧瑟曲，開始執(zhí)行。主線程不斷重復上面的步驟豪治。主執(zhí)行的執(zhí)行過程就是tick洞拨，所有的異步結(jié)果都是通過任務(wù)隊列來調(diào)度的。任務(wù)分為兩大類：宏任務(wù)和微任務(wù)负拟，宏任務(wù)包括：setTimeOut等烦衣，微任務(wù)包括promise.then。

Vue用異步隊列的方式來控制DOM更新和nextTick回調(diào)先后執(zhí)行。在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)花吟，nextTick主要使用了宏任務(wù)和微任務(wù)秸歧，nextTick把要執(zhí)行的任務(wù)推入一個隊列中，在下一個tick同步執(zhí)行隊列的所有任務(wù)衅澈，它是異步任務(wù)中的微任務(wù)键菱。如果我們在更新了一個響應(yīng)式數(shù)據(jù)后，需要同步拿到這個渲染后的DOM結(jié)果今布，就使用nextTick方法纱耻，異步拿這個結(jié)果。
使用方式：
① this.nextTick.then(cb); 異步

組件中如何傳遞數(shù)據(jù)险耀？

props: {
  message: String // 定義傳值的類型
}

父組件調(diào)用子組件的方法
父組件：this.$refs.yeluosen.childMethod()
子組件向父組件傳值并調(diào)用方法：$emit
組件之間：bus==$emit+$on

Vue中子組件調(diào)用父組件的方法

1弄喘、第一種方法是直接在子組件中通過this.emit向父組件觸發(fā)一個事件蘑志，父組件監(jiān)聽這個事件就行了。
3贬派、第三種都可以實現(xiàn)子組件調(diào)用父組件的方法急但。

<template>
  <div>
    <button @click="childMethod()">點擊</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod () {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  }
</script>

vue中keep-alive組件的作用

keep-alive是Vue內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)搞乏，或避免重新渲染波桩。

<keep-alive>
  <component>
    <!-- 該組件將被緩存！ -->
  </component>
</keep-alive>

如果只想 router-view 里面某個組件被緩存
export default [{
  {
    path: '/',
    name: 'home',
    component: Home,
    meat: {
      keepAlive: true // 需要被緩存
    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false, // 不需要被緩存
    }
  }
}]
<keep-alive>
  <route-view v-if="$route.meta.keepAlive">
    <!-- 這里是會被緩存的視圖組件请敦，比如Home镐躲！ -->
  </route-view>
</keep-alive>

<route-view v-if="!$route.meta.keepAlive">
  <!-- 這里是不會被緩存的視圖組件，比如Edit侍筛！ -->
</route-view>

vue-router實現(xiàn)路由懶加載（動態(tài)加載路由）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(router)

export default new Router ({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: resolve => require(['@/components/Login'], resolve)
    },
    {
      path: '/',
      name: 'Home',
      component: resolve => require(['@/components/Home'], resolve),
      children: [{
        path: '/',
        name: 'Skill',
        component: resolve => require(['@/components/Skill'], resolve)
      }, {
        path: '/Skill',
        name: 'Skill',
        component: resolve => require(['@/components/Skill'], resolve)
      }]
    }
  ]
})

完整的vue-router導航解析流程

1. 導航被觸發(fā)萤皂；
2. 在失活的組件里調(diào)用beforeRouteLeave守衛(wèi)；
3. 調(diào)用全局beforeEach守衛(wèi)匣椰；
4. 在復用組件里調(diào)用beforeRouteUpdate守衛(wèi)裆熙；
5. 調(diào)用路由配置里的beforeEnter守衛(wèi)；
6. 解析異步路由組件禽笑；
7. 在被激活的組件里調(diào)用beforeRouteEnter守衛(wèi)毕贼；
8. 調(diào)用全局beforeResolve守衛(wèi)靴迫；
9. 導航被確認梅割；
10. 調(diào)用全局的afterEach鉤子姊氓；
11. DOM更新；
12. 用創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)邀杏。

vue-router如何響應(yīng)路由參數(shù)的變化贫奠？

原來的組件實例會被復用唬血。這也意味著組件的生命周期鉤子不會再被調(diào)用，你可以簡單的監(jiān)控watch $route對象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化作出響應(yīng)
    }
  }
}

vue-route的幾種實例方法以及參數(shù)傳遞

• name傳遞
• to來傳遞
• 采用URL傳遞

is的用法（用于動態(tài)組件且基于DOM內(nèi)模板的限制來工作）

is用來動態(tài)切換組件唤崭，DOM模板解析

<table><tr is="my-row"></tr></table>

vue-router的導航鉤子拷恨，主要作用是攔截導航，讓它完成跳轉(zhuǎn)或取消谢肾。

全局的：前置守衛(wèi)腕侄、后置鉤子（beforeEach、afterEach）beforeResolve
單個路由獨享的：beforeEnter
組件級的：beforeRouteEnter（不能獲取組件實例this）芦疏、beforeRouteUpdate冕杠、beforeRouteLeave
這是因為在執(zhí)行路有鉤子函數(shù)beforeRouteEnter的時候，組件還沒有被創(chuàng)建出來酸茴，先執(zhí)行beforeRouteEnter分预，再執(zhí)行周期鉤子函數(shù)beforeCreate，可以通過next獲取組件的實例對象薪捍，如：next((vm) => {})笼痹，參數(shù)vm就是組件的實例化對象。

Vue單頁面應(yīng)用及其優(yōu)缺點

缺點：

• 不支持低版本的瀏覽器酪穿，最低支持到IE9凳干。
• 不利于SEO的優(yōu)化（如果要支持SEO，建議通過服務(wù)端來進行渲染組件）被济。
• 第一次加載首頁耗時相對長一些救赐。
• 不可以使用瀏覽器的導航按鈕需要自行實現(xiàn)前進、后退只磷。

優(yōu)點：

• 無刷新體驗经磅，提升了用戶體驗。
• 前端開發(fā)不再以頁面為單位喳瓣，更多地采用組件化的思想馋贤，代碼結(jié)構(gòu)和組織方法更加規(guī)范化，便于修改和調(diào)整畏陕。
• API共享，同一套后端程序代碼不用修改就可以用于Web頁面仿滔、手機惠毁、平板等多種客戶端。
• 用戶體驗好崎页、快鞠绰，內(nèi)容的改變不需要重新加載整個頁面。

什么是Vue的計算屬性computed飒焦？

計算屬性是需要復雜的邏輯蜈膨，可以用方法method代替屿笼。

computed: {
  totalPrice () {
    return (this.good.price * this.good.count)*this.discount+this.deliver;
  }
}

vue-cli提供的幾種腳手架模板

vue-cli提供的腳手架模板有browserify和webpack。

vuex是什么翁巍？怎么使用驴一？那種功能場景使用它？

① 是什么灶壶？
Vue框架中的狀態(tài)管理肝断，分別是State、Getter驰凛、Mutation胸懈、Action、Module恰响。
② 怎么使用趣钱？
新建一個目錄store。
③ 功能場景胚宦？
單頁應(yīng)用中羔挡，組件之間的狀態(tài)。音樂播放间唉、登錄狀態(tài)绞灼、加入購物車等。
④ vuex的狀態(tài)：
a. State特性：vuex就是一個倉庫呈野，倉庫里面放了很多對象低矮，其中state就是數(shù)據(jù)源存放地，對應(yīng)于一般Vue對象里面的data被冒。state里面存放的數(shù)據(jù)是響應(yīng)式的军掂，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變昨悼，依賴這個數(shù)據(jù)的組件也會發(fā)生更新蝗锥。它通過mapState把全局的state和getters映射到當前組件的computed計算屬性中。
b. Getter特性：getters可以對State進行計算操作率触，它就是store的計算屬性终议。雖然在組件內(nèi)可以做計算屬性，但是getters可以在多組件之間復用葱蝗。如果一個狀態(tài)只在一個組件內(nèi)使用穴张，可以不用getters。
c. Mutation特性：改變store中state狀態(tài)的唯一方法就是提交mutation两曼，每個mutation都有一個字符串類型的事件類型和一個回調(diào)函數(shù)皂甘，我們需要改變state的值就要在回調(diào)函數(shù)中改變。我們要執(zhí)行這個回調(diào)函數(shù)悼凑，那我們需要執(zhí)行一個相應(yīng)的調(diào)用方法：store.commit偿枕。
d. Action特性：類似于mutation璧瞬，不同點在于：Action提交的是mutation，而不是直接變更狀態(tài)渐夸。Action可以包含任意異步操作嗤锉，Action函數(shù)接受一個與store實例具有相同方法和屬性的context對象，因此你可以調(diào)用context.commit提交一個mutation捺萌〉刀或者通過context.state和context.getters來獲取state和getters。Action通過store.dispatch方法觸發(fā)：store.dispatch('increment')桃纯。
e. Module特性：Module其實只是解決了當state中很復雜臃腫的時候酷誓，module可以將store分解為模塊，每個模塊中擁有自己的state态坦、mutation盐数、action和getter。

vue中如何編寫可復用的組件伞梯？

① 創(chuàng)建組件頁面eg Toast.vue
② 用Vue.extend() 擴展一個組件構(gòu)造器玫氢，再通過實例化組件構(gòu)造器，就可以創(chuàng)造出可復用的組件谜诫。
③ 將toast組件掛載到新創(chuàng)建的div上漾峡；
④ 將toast組件的dom添加到body里；
⑤ 修改優(yōu)化達到動態(tài)控制頁面顯示文字跟顯示時間喻旷；

import Vue from 'vue'; 
import Toast from '@/components/Toast';     //引入組件
let ToastConstructor  = Vue.extend(Toast) // 返回一個“擴展實例構(gòu)造器”
 
let myToast = (text,duration)=>{
    let toastDom = new ToastConstructor({
        el:document.createElement('div')    //將toast組件掛載到新創(chuàng)建的div上
    })
    document.body.appendChild( toastDom.$el )   //把toast組件的dom添加到body里
    
    toastDom.text = text;
    toastDom.duration = duration;
 
    // 在指定 duration 之后讓 toast消失
    setTimeout(()=>{
        toastDom.isShow = false;  
    }, toastDom.duration);
}
export default myToast;

Vue常用修飾符

修飾符分為：一般修飾符生逸、事件修飾符、按鍵且预、系統(tǒng)
① 一般修飾符：

• .lazy：v-model在每次input事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步槽袄，你可以添加lazy修飾符，從而轉(zhuǎn)變?yōu)槭褂胏hange事件進行同步锋谐。
• .number
• .trim：如果要自動過濾用戶輸入的首尾空白字符

<input v-model.lazy="msg" type="number">
<input v-model.trim='trim'>

② 事件修飾符

<a v-on:click.stop="doThis"></a><!-- 阻止單擊事件繼續(xù)傳播 -->

<form v-on:submit.prevent="onSubmit"></form> <!-- 提交事件不再重載頁面 -->

<a v-on:click.stop.prevent="doThat"></a> <!-- 修飾符可以串聯(lián) -->

<form v-on:submit.prevent></form>   <!-- 只有修飾符 -->

<div v-on:click.capture="doThis">...</div>   <!-- 添加事件監(jiān)聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發(fā)的事件先在此處處理遍尺，然后才交由內(nèi)部元素進行處理 -->

<div v-on:click.self="doThat">...</div>  <!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->

<a v-on:click.once="doThis"></a> <!-- 點擊事件將只會觸發(fā)一次 -->

③ 按鍵修飾符

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

<input v-on:keyup.enter="submit"> 或者 <input @keyup.enter="submit">

④ 系統(tǒng)修飾符（可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標或鍵盤事件的監(jiān)聽器。）

.ctrl
.alt
.shift
.meta

<input @keyup.alt.67="clear"> 或者 
<div @click.ctrl="doSomething">Do something</div><!-- Ctrl + Click -->

對VUE是漸進式框架的理解

Vue的核心的功能涮拗，是一個視圖模板引擎乾戏，但這不是說Vue就不能成為一個框架。在聲明式渲染（視圖模板引擎）的基礎(chǔ)上多搀，我們可以通過添加組件系統(tǒng)歧蕉、客戶端路由、大規(guī)模狀態(tài)管理來構(gòu)建一個完整的框架康铭。更重要的是，這些功能相互獨立赌髓，你可以在核心功能的基礎(chǔ)上任意選用其他的部件从藤，不一定要全部整合在一起催跪。可以看到夷野，所說的“漸進式”懊蒸，其實就是Vue的使用方式，同時也體現(xiàn)了Vue的設(shè)計的理念
在我看來悯搔，漸進式代表的含義是：主張最少骑丸。視圖模板引擎每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求妒貌，這些要求就是主張通危，主張有強有弱，它的強勢程度會影響在業(yè)務(wù)開發(fā)中的使用方式灌曙。
比如說菊碟，Angular，它兩個版本都是強主張的在刺，如果你用它逆害，必須接受以下東西：
必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免）所以Angular是帶有比較強的排它性的蚣驼，如果你的應(yīng)用不是從頭開始魄幕，而是要不斷考慮是否跟其他東西集成，這些主張會帶來一些困擾颖杏。
Vue可能有些方面是不如React纯陨，不如Angular，但它是漸進的输玷，沒有強主張队丝，你可以在原有大系統(tǒng)的上面，把一兩個組件改用它實現(xiàn)欲鹏，當jQuery用机久；也可以整個用它全家桶開發(fā)，當Angular用赔嚎；還可以用它的視圖膘盖，搭配你自己設(shè)計的整個下層用。也可以函數(shù)式尤误，都可以侠畔，它只是個輕量視圖而已，只做了自己該做的事损晤，沒有做不該做的事软棺，僅此而已。
漸進式的含義尤勋，我的理解是：主張最少喘落，沒有多做職責之外的事茵宪。