MVVM

Model-View-ViewModel.
Model是數(shù)據(jù), View是頁面, ViewModel: 是視圖模型, 這是數(shù)據(jù)驅(qū)動的核心.
當(dāng)Model發(fā)生改變, 通知ViewModel, 對視圖模型進(jìn)行更新. 進(jìn)一步修改View頁面.
當(dāng)用戶操作View, 導(dǎo)致ViewModel發(fā)生改變, 也能即時通知Model更改數(shù)據(jù).

雙向數(shù)據(jù)綁定

數(shù)據(jù)劫持
observer
watcher
發(fā)布訂閱模式

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

v-if判斷后面的條件值真假切換的時候, 控制元素在DOM樹中的存在與否. 如果初始值為假, 不編譯, 不渲染.
v-show控制元素的display屬性, 為顯示或者隱藏.
如果頻繁的切換顯示隱藏, 使用v-show. 條件渲染使用v-if.

css 只在當(dāng)前組件之內(nèi)生效

<style scoped lang="sass">
  *{margin: 0}
</style>

vue 組件的生命周期

四個階段:
創(chuàng)建前后: beforeCreate / created

• beforeCreate之前, 初始化數(shù)據(jù), 事件, 聲明周期函數(shù)
• beforeCreate之后, created之前, data, methods都已經(jīng)創(chuàng)建好, 可以讀取. 實(shí)現(xiàn)數(shù)據(jù)劫持, 添加事件發(fā)射, 事件監(jiān)聽.
  初始化工作完成.

掛載前后: beforeMount / mounted

• beforeMount, 檢查el:'#app'和template. 將template 放進(jìn) render 函數(shù)中進(jìn)行編譯.虛擬DOM已經(jīng)創(chuàng)建
• mouned, 將Vue實(shí)例掛載到 #app 元素上

更新前后: beforeUpdate / updated

• beforeUpdate, 即將完成更新操作, 在這里比對數(shù)據(jù)是否發(fā)生改變, 此生命周期鉤子默認(rèn)返回true. 如果返回false, 將不會觸發(fā)更新.
• updated, 得到beforeUpdate的肯定回復(fù), 完成了更新操作

銷毀前后: beforeDestroy / destoryed

• beforeDestroy, 組件將要銷毀, 解綁事件, 定時器, 清除依賴, 子組件
• destroyed, 組件完成銷毀

如果考慮 keep-alive, 將會存在組件的激活和失活, 必須將組件放在keep-alive標(biāo)簽中, 不會渲染成html標(biāo)簽

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

在組件的生命周期鉤子中, 可以新增一個activated和deactivated.
分別在組件激活和失活的時候觸發(fā).

父子組件傳值

父傳子: 在子組件的標(biāo)簽上綁定

<div class="father">
  <child :value="100"></child>
</div>

子組件通過 props 獲取

子傳父:
觸發(fā)父組件綁定在自己身上的事件, 將需要傳遞的值作為參數(shù)傳遞給這個事件處理函數(shù)

methods, computed, watch

methods: 只要某個函數(shù)依賴的值發(fā)生改變, 里面所有的方法都會執(zhí)行一次. 事件處理函數(shù)一般寫在這里
computed: 基于methods的性能, 所以如果某個值是計算出來的, 那將這個值放在這里再適合不過了.
watch:

watch: {
  key(new, old){
    // code
  }
}

如果 key 這個值發(fā)生了改變, 會立即出發(fā)這個函數(shù), 執(zhí)行里面的代碼

循環(huán)中, key 的作用?

便于diff算法比對, 根據(jù)key的值, 能更精確的計算出那些東西是真正需要更新的, 能省去大部分不必要的DOM更新操作.

異步更新隊(duì)列

Vue的數(shù)據(jù)更新是異步的, 當(dāng)偵聽器發(fā)現(xiàn)某個屬性發(fā)生改變, Vue就會開啟一個隊(duì)列, 在一個事件循環(huán)中, 所有的屬性如果被改變, 都會被push進(jìn)這個隊(duì)列, 在事件循環(huán)結(jié)束的時候, 執(zhí)行更新任務(wù)并清空隊(duì)列. 如果一個watcher 被觸發(fā)多次, 只有最新的一次會被放進(jìn)事件隊(duì)列.

vue 對比 react

相同之處:

1. 都使用 Virtual DOM
2. 提供響應(yīng)式和組件化
3. 專注于核心, 將路由, 狀態(tài)管理都交給其他的庫

react 當(dāng)某個組件的內(nèi)容有更新, 將會以這個組件為根, 渲染這個組件之下的所有子組件, 如果希望避免不必要的更新, 那么需要手動實(shí)現(xiàn)shouldComponentUpdate方法
vue中, 組件的依賴是在渲染過程中自動追蹤的，所以系統(tǒng)能精確知曉哪個組件確實(shí)需要被重渲染.

react中,jsx就是一切, html, css 都希望納入到 javascript 中進(jìn)行處理. 甚至一堆HTML標(biāo)簽組成的dom元素可以是一個變量, 可以隨意使用.
vue則是更貼近傳統(tǒng)的web開發(fā), 從組件的模板就可以看出, 依舊是 html, css, js三板斧

<template>
  <div id="main">
  </div>
</template>
<script>
  export default {
  
  }
</script>
<style>
  *{}
</style>

vue提供了render函數(shù), 甚至也支持jsx語法, 但是推薦還是使用 vue模板畢竟更快, 更契合vue

react的路由react-router, 狀態(tài)管理redux, 都是由其社區(qū)維護(hù)的, react的社區(qū)比vue更加繁榮
vue的vue-router, vuex都是由官方提供的. 社區(qū)方面相對來說沒有 react 繁榮

react在原生方面 react-native 更加強(qiáng)大和成熟
vue 的 weex 也正在逐步發(fā)展, 而且也是有世界上最大的電商服務(wù)需求在驅(qū)動, 同樣也在蓬勃發(fā)展.

hash 模式和 history 模式的區(qū)別？

hash 模式依賴 window.onhashchange 事件, 每次觸發(fā)此事件, 都將被瀏覽器記錄, 于是前進(jìn)后退就可以使用history.go(), history.back(), history.forward(), 當(dāng)hash值發(fā)生改變, 不會觸發(fā)網(wǎng)絡(luò)請求, 刷新頁面. 注意, hash的底層是用history實(shí)現(xiàn)的.

history 利用了HTML5 History Interface中新增的 pushState() 和 replaceState()方法。（需要特定瀏覽器支持）
這兩個方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時，雖然改變了當(dāng)前的 URL，但瀏覽器不會立即向后端發(fā)送請求。