eslint中expected "indent", got "eos" 在寫stylus時(shí)碰到這種問題签舞，肯定是由于編輯器使用了不一樣的縮進(jìn)方式岛都，需要進(jìn)行設(shè)置即可淑履。因?yàn)樗谀愕木庉嬈髦锌赡苁菍?duì)齊了的稳摄，但是實(shí)際并沒有。 stylus mixin只可以為樣式提供函數(shù)的功能

雖然可以設(shè)置vue中的樣式為scoped模式但是在組件和公用組件中不要起相同的樣式名以免污染

vue生命周期

1.beforeCreate（初始化之后）
2.created（創(chuàng)建完成）
3.beforeMount（掛載之前）
4.mounted（被創(chuàng)建）
5.beforeUpdate（數(shù)據(jù)更新時(shí)調(diào)用措伐，發(fā)生在虛擬 DOM 打補(bǔ)丁之前）
6.updated（虛擬 DOM 重新渲染和打補(bǔ)丁后調(diào)用）
7.activated（keep-alive 組件激活時(shí)調(diào)用）
8.deactivated（keep-alive 組件停用時(shí)調(diào)用）
9.beforeDestory（銷毀前）
10.destoryed（銷毀后）
11.errorCaptured（當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用）  

雙向綁定

自定義組件雙向綁定

  // 發(fā)送input事件
  this.$emit('input',this.val);

當(dāng)某個(gè)響應(yīng)式數(shù)據(jù)發(fā)生變化的時(shí)候特纤，它的setter函數(shù)會(huì)通知閉包中的Dep军俊，Dep則會(huì)調(diào)用它管理的所有Watch對(duì)象侥加。觸發(fā)Watch對(duì)象的update實(shí)現(xiàn)。

update () {
    /* istanbul ignore else */
    if (this.lazy) {
        this.dirty = true
    } else if (this.sync) {
        /*同步則執(zhí)行run直接渲染視圖*/
        this.run()
    } else {
        /*異步推送到觀察者隊(duì)列中粪躬，下一個(gè)tick時(shí)調(diào)用担败。*/
        queueWatcher(this)
    }
}

我們發(fā)現(xiàn)Vue.js默認(rèn)是使用異步執(zhí)行DOM更新昔穴。 當(dāng)異步執(zhí)行update的時(shí)候，會(huì)調(diào)用queueWatcher函數(shù)提前。

/*將一個(gè)觀察者對(duì)象push進(jìn)觀察者隊(duì)列吗货，在隊(duì)列中已經(jīng)存在相同的id則該觀察者對(duì)象將被跳過，除非它是在隊(duì)列被刷新時(shí)推送*/
export function queueWatcher (watcher: Watcher) {
  /*獲取watcher的id*/
  const id = watcher.id
  /*檢驗(yàn)id是否存在狈网，已經(jīng)存在則直接跳過宙搬，不存在則標(biāo)記哈希表has，用于下次檢驗(yàn)*/
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      /*如果沒有flush掉拓哺，直接push到隊(duì)列中即可*/
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i >= 0 && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(Math.max(i, index) + 1, 0, watcher)
    }
    // queue the flush
    if (!waiting) {
      waiting = true
      nextTick(flushSchedulerQueue)
    }
  }
}

查看queueWatcher的源碼我們發(fā)現(xiàn)勇垛，Watch對(duì)象并不是立即更新視圖，而是被push進(jìn)了一個(gè)隊(duì)列queue士鸥，此時(shí)狀態(tài)處于waiting的狀態(tài)闲孤，這時(shí)候會(huì)繼續(xù)會(huì)有Watch對(duì)象被push進(jìn)這個(gè)隊(duì)列queue，等待下一個(gè)tick時(shí)烤礁，這些Watch對(duì)象才會(huì)被遍歷取出讼积，更新視圖。同時(shí)脚仔，id重復(fù)的Watcher不會(huì)被多次加入到queue中去勤众，因?yàn)樵谧罱K渲染時(shí)，我們只需要關(guān)心數(shù)據(jù)的最終結(jié)果鲤脏。

radio

// html代碼
<input type="radio" name="lhl" value="0" v-model="index" >
<input type="radio" name="lhl" value="1" v-model="index" >

// vue中代碼
data () {
    index: 0 // index取值為value中的值决摧，初始化為0時(shí)可默認(rèn)選中第一個(gè)
}

vue-router2.0

重定向

routes: [
  {
      path:'/',
      redirect:{'/', 'goods'}
  }
]

不再是1.0中的.go()

Axios

在vue1.x的時(shí)候，vue的官方推薦HTTP請(qǐng)求工具是vue-resource凑兰，但是在vue2.0的時(shí)候?qū)⑼扑]工具改成了axios掌桩。使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的數(shù)據(jù)姑食，而是經(jīng)過axios本身處理過的json對(duì)象波岛。真正的數(shù)據(jù)在res.data里

使用emit來發(fā)送廣播

vue2提供了一套廣播機(jī)制，即一邊發(fā)送廣播音半，一邊接收廣播來執(zhí)行相應(yīng)操作则拷。 比如想要給test組件發(fā)送一個(gè)“相加”廣播:

export default {
  method: {
    click () {
      Vue.$emit('add',{}) //第二個(gè)參數(shù)可作為傳遞數(shù)據(jù)傳送到監(jiān)聽端口，不需要?jiǎng)t傳空對(duì)象
    }
  }
}

那么test組件中就需要監(jiān)聽曹鸠，在created方法里寫

export default {
  created () {
     Vue.$on('add', this.add)
  },
  method: {
     add () {
        this.count++
     }
  }
}

keep-alive

1.普通用法

<keep-alive>
    <router-view></router-view>
</keep-alive>

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

2.緩存部分頁(yè)面或者組件
(1)使用router.mate屬性

// 這是目前用的比較多的方式
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

route.js設(shè)置

  routes: [
    { path: '/', redirect: '/index',  component: Index, meta: { keepAlive: true }},
    {
      path: '/common',
      component: TestParent,
      children: [
        { path: '/test2', component: Test2, meta: { keepAlive: true } } 
      ]
    }
    ....
    // 表示index和test2都使用keep-alive

(2) 2.1.0后提供了include/exclude兩個(gè)屬性 可以針對(duì)性緩存相應(yīng)的組件

<!-- 逗號(hào)分隔字符串 -->
<keep-alive include="a,b">
    <component :is="view"></component>
</keep-alive>
<!-- 正則表達(dá)式 (使用 v-bind) -->
<keep-alive :include="/a|b/">
    <component :is="view"></component>
</keep-alive>
<!-- Array (use v-bind) -->
<keep-alive :include="['a', 'b']">
    <component :is="view"></component>
</keep-alive>
// 其中a,b是組件的name,如果 name 選項(xiàng)不可用煌茬，則匹配它的局部注冊(cè)名稱（父組件 components 選項(xiàng)的鍵值）。
// 匿名組件不能被匹配彻桃。

注意:這種方法都是預(yù)先知道組件的名稱的