一、對于MVVM的理解？
MVVM 是 Model-View-ViewModel 的縮寫。
Model代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。
View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來。
ViewModel 監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，連接Model和View。
在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會同步到Model中，而Model 數(shù)據(jù)的變化也會立即反應(yīng)到View 上。
ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護完全由 MVVM 來統(tǒng)一管理。
二、Vue的生命周期
beforeCreate（創(chuàng)建前） 在數(shù)據(jù)觀測和初始化事件還未開始
created（創(chuàng)建后） 完成數(shù)據(jù)觀測，屬性和方法的運算，初始化事件，$el 屬性還沒有顯示出來
beforeMount（載入前） 在掛載開始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用。實例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入后） 在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用。實例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前） 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。
updated（更新后） 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁之后調(diào)用。調(diào)用時，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因為這可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeDestroy（銷毀前） 在實例銷毀之前調(diào)用。實例仍然完全可用。
destroyed（銷毀后） 在實例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
1.什么是vue生命周期？
答： Vue 實例從創(chuàng)建到銷毀的過程，就是生命周期。從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。
2.vue生命周期的作用是什么？
答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
3.vue生命周期總共有幾個階段？
答：它可以總共分為8個階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后。
4.第一次頁面加載會觸發(fā)哪幾個鉤子？
答：會觸發(fā) 下面這幾個beforeCreate, created, beforeMount, mounted 。
5.DOM 渲染在 哪個周期中就已經(jīng)完成？
答：DOM 渲染在 mounted 中就已經(jīng)完成了。
三、 Vue實現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）
vue實現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數(shù)據(jù)雙向綁定 將MVVM作為數(shù)據(jù)綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達到數(shù)據(jù)變化 —>視圖更新；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果。
js實現(xiàn)簡單的雙向綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
四、Vue組件間的參數(shù)傳遞
1.父組件與子組件傳值
父組件傳給子組件：子組件通過props方法接受數(shù)據(jù);
子組件傳給父組件：$emit方法傳遞參數(shù)
2.非父子組件間的數(shù)據(jù)傳遞，兄弟組件傳值
eventBus，就是創(chuàng)建一個事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。（雖然也有不少人推薦直接用VUEX，具體來說看需求咯。技術(shù)只是手段，目的達到才是王道。）
五、Vue的路由實現(xiàn)：hash模式 和 history模式
hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取；
特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導(dǎo)瀏覽器動作，對服務(wù)端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號之前的內(nèi)容會被包含在請求中，如 http://www.xxx.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監(jiān)聽到狀態(tài)變更。
history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”
六 Vue與Angular以及React的區(qū)別？
（版本在不斷更新，以下的區(qū)別有可能不是很正確。我工作中只用到vue，對angular和react不怎么熟）
1.與AngularJS的區(qū)別
相同點：
都支持指令：內(nèi)置指令和自定義指令；都支持過濾器：內(nèi)置過濾器和自定義過濾器；都支持雙向數(shù)據(jù)綁定；都不支持低端瀏覽器。
不同點：
AngularJS的學(xué)習(xí)成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀；在性能上，AngularJS依賴對數(shù)據(jù)做臟檢查，所以Watcher越多越慢；Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新，所有的數(shù)據(jù)都是獨立觸發(fā)的。
2.與React的區(qū)別
相同點：
React采用特殊的JSX語法，Vue.js在組件開發(fā)中也推崇編寫.vue特殊文件格式，對文件內(nèi)容都有一些約定，兩者都需要編譯后使用；中心思想相同：一切都是組件，組件實例之間可以嵌套；都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求；都不內(nèi)置列數(shù)AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發(fā)中都支持mixins的特性。
不同點：
React采用的Virtual DOM會對渲染出來的結(jié)果做臟檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作Virtual DOM。
七、vue路由的鉤子函數(shù)
首頁可以控制導(dǎo)航跳轉(zhuǎn)，beforeEach，afterEach等，一般用于頁面title的修改。一些需要登錄才能調(diào)整頁面的重定向功能。
beforeEach主要有3個參數(shù)to，from，next：
to：route即將進入的目標(biāo)路由對象，
from：route當(dāng)前導(dǎo)航正要離開的路由
next：function一定要調(diào)用該方法resolve這個鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)。可以控制網(wǎng)頁的跳轉(zhuǎn)。
八、vuex是什么？怎么使用？哪種功能場景使用它？
只用來讀取的狀態(tài)集中放在store中； 改變狀態(tài)的方式是提交mutations，這是個同步的事物； 異步邏輯應(yīng)該封裝在action中。
在main.js引入store，注入。新建了一個目錄store，….. export 。
場景有：單頁應(yīng)用中，組件之間的狀態(tài)、音樂播放、登錄狀態(tài)、加入購物車
state
Vuex 使用單一狀態(tài)樹,即每個應(yīng)用將僅僅包含一個store 實例，但單一狀態(tài)樹和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)。
mutations
mutations定義的方法動態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)。
getters
類似vue的計算屬性，主要用來過濾一些數(shù)據(jù)。
action
actions可以理解為通過將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡單的說就是異步操作數(shù)據(jù)。view 層通過 store.dispath 來分發(fā) action。
const store = new Vuex.Store({ //store實例
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
** modules **
項目特別復(fù)雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
九、vue-cli如何新增自定義指令？
1.創(chuàng)建局部指令
var app = new Vue({
el: '#app',
data: {
},
// 創(chuàng)建指令(可以多個)
directives: {
// 指令名稱
dir1: {
inserted(el) {
// 指令中第一個參數(shù)是當(dāng)前使用指令的DOM
console.log(el);
console.log(arguments);
// 對DOM進行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})
2.全局指令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
3.指令的使用
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
1. vue中的MVVM模式
即Model-View-ViewModel。Vue是以數(shù)據(jù)為驅(qū)動的，Vue自身將DOM和數(shù)據(jù)進行綁定，一旦創(chuàng)建綁定，DOM和數(shù)據(jù)將保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化，DOM會跟著變化。ViewModel是Vue的核心，它是Vue的一個實例。Vue實例時作用域某個HTML元素上的，這個HTML元素可以是body，也可以是某個id所指代的元素。DOM Listeners和Data Bindings是實現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽頁面所有View層DOM元素的變化，當(dāng)發(fā)生變化，Model層的數(shù)據(jù)隨之變化；Data Bindings監(jiān)聽Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化，View層的DOM元素隨之變化。
2. v-show指令，v-if的區(qū)別
條件渲染指令，與v-if不同的是，無論v-show的值為true或false，元素都會存在于HTML代碼中；而只有當(dāng)v-if的值為true，元素才會存在于HTML代碼中。v-show指令只是設(shè)置了元素CSS的style值
3. 如何讓css只在當(dāng)前組件中起作用
在每一個vue組件中都可以定義各自的css，js，如果希望組件內(nèi)寫的css只對當(dāng)前組件起作用，只需要在style中寫入scoped，即：<style scoped></style>復(fù)制代碼
4. 指令keep-alive
在vue-router寫著keep-alive，keep-alive的含義：如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染。為此可以添加一個keep-alive指令
<component :is='curremtView' keep-alive></component>
5. Vuejs組件
vuejs構(gòu)建組件使用Vue.component('componentName',{
/component/
})；
// 這里注意一點，組件要先注冊再使用
Vue.component('mine',{
template:'#mineTpl',
props:['name','title','city','content']
});
var v=new Vue({
el:'#vueInstance',
data:{
name:'zhang',
title:'this is title',
city:'Beijing',
content:'these are some desc about Blog'
}
});
復(fù)制代碼
6. 路由嵌套
路由嵌套會將其他組件渲染到該組件內(nèi)，而不是進行整個頁面跳轉(zhuǎn)router-view本身就是將組件渲染到該位置，想要進行頁面跳轉(zhuǎn)，就要將頁面渲染到根組件，在起始配置路由時候?qū)懙剑簐ar App = Vue.extend({ root });
router.start(App,'#app');復(fù)制代碼這里首先將根組件注冊進來，用于將路由中配置好的各個頁面渲染出來，然后將根組件掛載到與#app匹配的元素上。
7. 指令v-el的使用
有時候我們想就像使用jquery那樣去訪問一個元素，此時就可以使用v-el指令，去給這個元素注冊一個索引，方便通過所屬實例的el.someEl。示例<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>復(fù)制代碼
8. vue.js中使用事件名
在vuejs中，我們經(jīng)常要綁定一些事件，有時候給DOM元素綁定，有時候給組件綁定。綁定事件在HTML中用v-on:click-"event",這時evet的名字不要出現(xiàn)大寫，因為在1.x中不區(qū)分大小寫，所以如果我們在HTML寫v-on:click="myEvent"而在js中寫myEvent就出錯誤，所以在vuejs的1.x綁定事件時候，要盡量避免使用大寫字母。在2.0中沒有該限制！
9. Vue.js是什么
Vue.js（是一套構(gòu)建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件10. VueJS 特性：I: MVVM模式（數(shù)據(jù)變量（model）發(fā)生改變 視圖（view）也改變， 視圖（view）改變，數(shù)據(jù)變量（model）也發(fā)生改變）使用MVVM模式有幾大好處：
- 低耦合。View可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當(dāng)View變化的時候Model可以不變，當(dāng)Model變化的時候View也可以不變。
- 可重用性。可以把一些視圖的邏輯放在ViewModel里面，讓很多View重用這段視圖邏輯。
- 獨立開發(fā)。開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)。設(shè)計人員可以專注于界面(View)的設(shè)計。
- 可測試性。可以針對ViewModel來對界面(View)進行測試II: 組件化III 指令系統(tǒng)IIII: vue2.0開始支持虛擬domvue1.0是操作的是真的dom元素而不是虛擬的虛擬dom:可以提升頁面的刷新速度虛擬DOM有利也有弊。A：大小
- 其中之一就是更多的功能意味著代碼包中更多行的代碼。幸運的是，Vue.js 2.0 依舊比 較小（當(dāng)前版本 21.4kb），并且也正在刪除很多東西。B: 內(nèi)存
-同樣，虛擬DOM需要將現(xiàn)有的DOM拷貝后保存在內(nèi)存中，這是一個在DOM更新速度和內(nèi)存使用中的權(quán)衡。C: 并不適用所有情況 -如果虛擬DOM可以一次性進行批量的修改是非常好的。但是如果是單獨的、稀少的更新呢？這樣的任何DOM更新都將會使虛擬DOM帶來無意義的預(yù)計算
11. Vue.js特點
簡潔：頁面由HTML模板+Json數(shù)據(jù)+Vue實例組成數(shù)據(jù)驅(qū)動：自動計算屬性和追蹤依賴的模板表達式組件化：用可復(fù)用、解耦的組件來構(gòu)造頁面輕量：代碼量小，不依賴其他庫快速：精確有效批量DOM更新模板友好：可通過npm，bower等多種方式安裝，很容易融入
12. Vue.js 和 AngularJS 之間的區(qū)別是什么?
下面是一些選擇 Vue 而不是 Angular 的可能原因；Vue.js 是一個更加靈活開放的解決方案。它允許你以希望的方式組織你的應(yīng)用程序，而不是任何時候都必須遵循
Angular 制定的規(guī)則。它僅僅是一個視圖層，所以你可以將它嵌入一個現(xiàn)有頁面而不一定要做成一個龐大的單頁應(yīng)用。在結(jié)合其他庫方面它給了你更大的的空間，但相應(yīng)，你也需要做更多的架構(gòu)決策。例如，Vue.js 核心默認(rèn)不包含路由和 ajax 功能，并且通常假定你在用應(yīng)用中使用了一個外部的模塊構(gòu)建系統(tǒng)。這可能是最重要的區(qū)別在 API 和內(nèi)部設(shè)計方面，Vue.js 比 Angular 簡單得多, 因此你可以快速地掌握它的全部特性并投入開發(fā)。Vue.js 擁有更好的性能，因為它不使用臟檢查。當(dāng) watcher 越來越多時, Angular 會變得越來越慢，因為作用域內(nèi)的每一次數(shù)據(jù)變更，所有的 watcher
都需要被重新求值。Vue 則根本沒有這個問題，因為它采用的是基于依賴追蹤的觀察系統(tǒng)，所以所有的數(shù)據(jù)變更觸發(fā)都是獨立的，除非它們之間有明確的依賴關(guān)系。Vue.js 中指令和組件的概念區(qū)分得更為清晰。指令只負(fù)責(zé)封裝 DOM 操作，而組件代表一個自給自足的獨立單元
—— 它擁有自己的視圖和數(shù)據(jù)邏輯。在 Angular 中它們兩者間有不少概念上的混淆。
13. Vue.js 和 React.js 有什么區(qū)別?React.js 和 Vue.js 確實有一些相似——它們都提供數(shù)據(jù)驅(qū)動、可組合搭建的視圖組件。然而，它們的內(nèi)部實現(xiàn)是完全不同的。React 是基于 Virtual DOM——一種在內(nèi)存中描述 DOM 樹狀態(tài)的數(shù)據(jù)結(jié)構(gòu)。React 中的數(shù)據(jù)通常被看作是不可變的，而 DOM 操作則是通過 Virtual DOM 的 diff 來計算的。與之相比，Vue.js 中的數(shù)據(jù)默認(rèn)是可變的，而數(shù)據(jù)的變更會直接出發(fā)對應(yīng)的 DOM 更新。相比于 Virtual DOM，Vue.js 使用實際的 DOM 作為模板，并且保持對真實節(jié)點的引用來進行數(shù)據(jù)綁定。Virtual DOM 提供了一個函數(shù)式的描述視圖的方法，這很 cool。因為它不使用數(shù)據(jù)觀察機制，每次更新都會重新渲染整個應(yīng)用，因此從定義上保證了視圖通與數(shù)據(jù)的同步。它也開辟了 JavaScript 同構(gòu)應(yīng)用的可能性。實話實說，我自己對 React 的設(shè)計理念也是十分欣賞的。但 React 有一個問題就是組件的邏輯和視圖結(jié)合得非常緊密。對于部分開發(fā)者來說，他們可能覺得這是個優(yōu)點，但對那些像我一樣兼顧設(shè)計和開發(fā)的人來說，還是更偏好模板，因為模板能讓我們更好地在視覺上思考設(shè)計和 CSS。JSX 和
JavaScript 邏輯的混合干擾了我將代碼映射到設(shè)計的思維過程。相反，Vue.js 通過在模板中加入一個輕量級的 DSL (指令系統(tǒng))，換來一個依舊直觀的模板，且能夠?qū)⑦壿嫹庋b進指令和過濾器中。
React 的另一個問題是：由于 DOM 更新完全交由
Virtual DOM 管理，當(dāng)你真的想要自己控制 DOM 是就有點棘手了（雖然理論上你可以，但這樣做時你本質(zhì)上在對抗 React 的設(shè)計思想）。對于需要復(fù)雜時間控制的動畫來說這就變成了一項很討人厭的限制。在這方面，Vue.js 允許更多的靈活性，并且有不少用 Vue.js 構(gòu)建的富交互實例14. 請詳細說下你對 Vue 生命周期的理解？總共分為 8 個階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。創(chuàng)建前/后： 在 beforeCreate 階段，vue 實例的掛載元素 el 還沒有。載入前/后：在 beforeMount 階段，vue 實例的emit方法傳遞參數(shù),觸發(fā)父組件event16. vue-router 有哪幾種導(dǎo)航鉤子?全局導(dǎo)航鉤子router.beforeEach(to, from, next),router.beforeResolve(to, from, next),router.afterEach(to, from ,next)組件內(nèi)鉤子beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave單獨路由獨享組件beforeEnter17. vue 的雙向綁定的原理是什么vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的 setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。18. vuex 的mutation和action的特性是什么？有什么區(qū)別？mutation用于修改state的數(shù)據(jù)，是同步的。action 類似于 muation, 不同在于：action 提交的是 mutation,而不是直接變更狀態(tài)action 可以包含任意異步操作19. 寫 React / Vue 項目時為什么要在組件中寫 key，其作用是什么?在開發(fā)過程中，我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 Diff 算法中 會借助元素的 Key 值來判斷該元素是新近創(chuàng)建的還是被移動而來的元素，從而減少不必要的元素重渲染。20. computed 和 watched 的區(qū)別：computed 是計算屬性，依賴其他屬性計算值，并且 computed 的值有緩存，只有當(dāng)計算值變化才會返回內(nèi)容。watch 監(jiān)聽到值的變化就會執(zhí)行回調(diào)，在回調(diào)中可以進行一些邏輯操作。所以一般來說需要依賴別的屬性來動態(tài)獲得值的時候可以使用 computed，對于監(jiān)聽到值的變化需要做一些復(fù)雜業(yè)務(wù)邏輯的情況可以使用 watch。
