vue.js的使用總結

最近公司要求使用vue.js開發一款PC端的應用，大約用時4個月完成，在此以前只是瞭解過vue.js，在項目完成後對vuejs的相關內容也有了大體的瞭解，爲了增強自身的記憶，對vue的相關知識進行總結梳理，方便之後的開發。若有不足之處請各位道友批評指正。 基礎篇： 先上張xmind思惟導圖

注：vue的基本知識內容比較多，此處總結本身認爲在vue中比較難理解和重要的知識點 1. vue主要優勢 a.沒有的複雜的DOM操做：由react發揚光大的虛擬DOM概念已經成爲前段開發中比較火的技術。vue框架固然也不會落後了。 b.優雅的數據處理： 雙向綁定的數據處理延續了angular最大的優勢，而且沒有angular中煩人的$scope（自認爲） c.官方文檔通俗易懂：中文文檔寫的很是棒（這要感謝咱們的尤大神）

2.vue的安裝和基本API vue的安裝須要用到vue-cli,具體步驟請參照國vue官方文檔(cn.vuejs.org/v2/guide/in…) vue的基本API： 指令：v-bind v-model v-text v-html v-for v-if v-show v-click ...這些最基本的指令須要知道它們的做用和使用方法 生命週期函數：vm.forceUpdate vm.destroy 全局的API：Vue.extend Vue.nextTick Vue.set Vue.delete Vue.directive..... 模板必備的函數和屬性: data props propsData computed methods watch 詳細api請參照

3.vue實例與生命週期 咱們能夠把vue的整個應用都當作一個vue的實例:

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  //vue實例建立
  created: function () {
  },
  //vue掛在DOM
  mounted:function(){
  },
  //vue中數據改變後從新渲染
  updated:function(){},
  //vue實例銷燬
  destory:function(){}
  .....
})
複製代碼

4.vue的組件（全局和局部） 註冊vue的組件的方法有兩種爲全局註冊和局部註冊。全局組件減小的代碼的重複率，方便他人閱讀，可是他知足不了一些特殊的需求，而局部組件可以補足這個短板。 全局組件：在建立vue實例以後用Vue.component(tagName, options)來註冊個全局組件。若是使用的是.vue文件註冊全局組件能夠建立個文件夾，將.vue文件放入文件夾中，新建index.js文件，在index.js文件中添加如下代碼:

//導入你須要註冊的全局組件
import MyTest from './test.vue'
// 這裏是重點
const Loading = {
    install: function(Vue){
        Vue.component('Test',MyTest)
    }
}

// 導出組件
export default Test
複製代碼
複製代碼

而後在入口文件main.js中引入你所定義文件夾的位置(假設爲components/test)

import Vue from 'vue'
import App from './App.vue'

// 引入element-ui組件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

// 引入自定義組件。index.js是組件的默認入口
import Test from '../components/test'
Vue.use(Test );

Vue.use(ElementUi);
new Vue({
  el: '#app',
  render: h => h(App)
})
複製代碼

全局組件註冊完畢 **局部組件:**能夠經過某個 Vue 實例/組件的實例選項 components 註冊僅在其做用域中可用的組件.

5.vue中的computed（計算屬性）和watch（偵聽器） computed計算屬性，用來改變咱們某個變量，已達到咱們所要的值。例:

<div id="example">
  <p>Original value: "{{ val}}"</p>
  <p>Computed value: "{{ newVal }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    val: 'test'
  },
  computed: {
    // 計算屬性的 getter
    newVal : function () {
      // `this` 指向 vm 實例
      return val+val
    }
  }
})
複製代碼

在這個例子中利用methods也能獲得相同的結果，但computed有個緩存的特性（緩存了初次獲得的newVal的值，只有當newVal值再次改變時纔會觸發計算）減小了內部的運行次數。

watch偵聽器Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：偵聽屬性（監聽某個值（能夠是任何類型的值），當值變化時執行watch中的函數）。 **watch與computed比較(watch)優勢:**watch 選項提供了一個更通用的方法（watch會執行回調），來響應數據的變化。當須要在數據變化時執行其餘操做是watch更適合。 **watch與computed比較(computed)優勢:**當你有一些數據須要隨着其它數據變更而變更時，很容易濫用watch。此時，更好的作法是使用計算屬性而不是命令式的 watch 回調。 例子以下:(cn.vuejs.org/v2/guide/co…)

原理篇

原理篇 本章是以上一章爲基礎上來深刻理解vuejs的設計思想， vue中比較出彩的是虛擬DOM，響應式數據數據操做（數據雙向綁定）以及豐富的生態庫（vue-router vuex iview....）。 1.vue中的響應式數據 在數據雙向綁定這個理念出來以前，前端中都是使用jQuery或原生js操做DOM來實現數據變化。這不只實現過程麻煩，也對頁面的性能有很大的影響。vue框架中的核心理念就是響應式，所以瞭解響應式的原理能夠幫助咱們解決vue中遇到的大部分問題，也能加深咱們對vue的瞭解。

1. 原理 vue響應式原理是靠Object.defineProperty實現的 這個方法會在對象上添加新的屬性，或者修改對象上的屬性並返回這個對象。詳細能夠查看MDN Object.defineProperty(obj,prop,descriptor) obj要在其上定義屬性的對象。 prop要定義或修改的屬性的名稱。 descriptor將被定義或修改的屬性描述符
2. 實現 在New vue()建立後，數據初始化開始，使用Object.defineProperty方法實現響應式 第一步先要遍歷vue data中全部的變量

function observer (value) {
    if (!value || (typeof value !== 'object')) {
        return;
    }
    
    Object.keys(value).forEach((key) => {
        defineReactive(value, key, value[key]);
    });
}

複製代碼

第二步將每一個變量實現響應式
複製代碼

Object.defineProperty(obj, key, {
    //key data中定義的數據
        enumerable: true,
        configurable: true,
   //數據的讀取時調用
        get: function reactiveGetter () {
            return val;         
        },
   //數據的改變時調用
        set: function reactiveSetter (newVal) {
            if (newVal === val) return;
            cb(newVal);
        }
    });
}
複製代碼

感興趣的同窗能夠本身試着實現一個響應數據 依賴收集追蹤 在vue中數據的變化會觸發視圖更新，視圖變化會同時改變數據。這種狀況看似是響應式的所有，但有種狀況，當data中的某個數據不用顯示在視圖上而且他會不斷的變化。這時若是視圖不斷的更新顯然不合理，咱們須要可以判斷某個數據的變化是否有必要更新視圖。

2.vue中實現Virtual DOM過程 Vue中 的虛擬DOM操做是其核心概念之一，其實質就是將vue render函數轉化成Vnode節點。而後用JavaScript中對象的形式表示，以JavaScript中對象的屬性來描述vnode節點。

1. 獲取Vue 組件（假設以下組件）

<template>
  <p class="demo" v-if="isShow">
    This is a span.
  </p>
</template>
複製代碼

2. 解析vue組件（轉換後）

{
    tag: 'p',
    data: {
        /* 指令集合數組 */
        directives: [
            {
                /* v-if指令 */
                rawName: 'v-if',
                expression: 'isShow',
                name: 'show',
                value: true
            }
        ],
        /* 靜態class */
        staticClass: 'demo'
    },
    text: undefined,
    children: [
        /* 子節點是一個文本VNode節點 */
        {
            tag: undefined,
            data: undefined,
            text: 'This is a span.',
            children: undefined
        }
    ]
}
複製代碼

內部的具體實現過程可參見《實現 Virtual DOM 下的一個 VNode 節點》。