Vue 是什么?

• Vue (讀音 /vju?/, 類似于 view)

• Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。

• 與其它大型框架不同的是, Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。

• Vue 的核心庫只關(guān)注視圖層, 不僅易于上手, 還便于與第三方庫或既有項(xiàng)目整合。

• 另一方面, 當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí), Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。

出自 Vue.js 官方文檔

• Vue 有很多特點(diǎn)和 Web 開發(fā)中常見的高級(jí)功能
  • 解耦視圖和數(shù)據(jù)
  • 可復(fù)用的組件
  • 前端路由技術(shù)
  • 狀態(tài)管理
  • 虛擬 DOM

Vue 實(shí)例

new Vue(options)
options = {
  el: "value" // "value - 元素選擇器" 進(jìn)行數(shù)據(jù)綁定(實(shí)際上調(diào)用了$mount())
  data: {
    // 數(shù)據(jù)
    // 實(shí)例對(duì)象可直接使用Object的方式定義數(shù)據(jù)
    // 組件必須通過return一個(gè)Object的方式來定義數(shù)據(jù)
  },
  computed: {
    // 計(jì)算屬性
    // 優(yōu)點(diǎn): 
    //      在template中調(diào)用時(shí)可省略"()", 即調(diào)用get函數(shù)
    //      當(dāng)不發(fā)生set時(shí), 每次get都不會(huì)重新計(jì)算, 效率提高
    attr: {
      set: function(newValue) {}
      get: function() {}
    }
  }
  methods: {
    // 方法
    // 在template中使用時(shí)需要"()"來調(diào)用
    attr: function() {}
  },
  filters: {
    // 過濾器方法:
    // 使用時(shí): data | function, 會(huì)自動(dòng)把 data 作為參數(shù)傳入 function 中
    attr: function(data) {}
  },
  components: {
    // 局部組件:
    // "組件標(biāo)簽名": 組件構(gòu)造器
  },
  watch: {
    // 監(jiān)聽Vue中數(shù)據(jù)發(fā)生改變的事件
    attr(newValue, oldValue) {

    }
  },

  /** 以下均為 生命周期函數(shù) **/

  created() {
    // 當(dāng)組件被創(chuàng)建后回調(diào)該函數(shù)
    // 注意: 組件被創(chuàng)建后DOM并不一定創(chuàng)建完成, 即不能在created中操作DOM元素
  },
  mounted() {
    // 當(dāng)組件的template掛載到DOM之后回調(diào)該函數(shù)
  },
  updated() {
    // 當(dāng)頁面發(fā)生更新后回調(diào)該函數(shù)
  },
  destroyed() {
    // 組件銷毀后回調(diào)
  }
}

生命周期

lifecycle.png

lifecycle-hooks.png

計(jì)算屬性詳細(xì)

• 在template中使用時(shí)不需要(), 會(huì)默認(rèn)調(diào)用get函數(shù)

• 使用時(shí)attr即調(diào)用get方法, 為attr賦值即調(diào)用set方法

• 計(jì)算屬性一般沒有set方法, 所以計(jì)算屬性也稱只讀屬性

即可以簡(jiǎn)寫:

computed: {
  attr: function() {}

  /** 或以下 es6 語法 **/
  attr: () => {}
}

computed 和 methods 的對(duì)比

• computed 的屬性如果沒有變化, 則 computed 有緩存, 即 computed 只執(zhí)行一次, 而 methods 沒有緩存, 調(diào)用幾次執(zhí)行幾次
  • 相比之下, 如果某個(gè)元素get比較多的話推薦使用computed
  • 反之, 如果邏輯比較復(fù)雜, 那么使用methods