Vue必懂的知識點

把本身的學習使用記錄在本地電腦，此次整理出來分享一下。我的認爲都是平時工做當中用到的比較多的。但願對大家有幫助。

基礎複習

跨域： 域名、端口

一、跨域是瀏覽器之間的， 由於服務器之間是不存在跨域的，因此，配置代理以後，瀏覽器先發給代理服務器，而後 代理服務器去跟接口交流 不存在跨域了。 二、 多個請求地址，就在proxy那配置 多個對象就好了。

負載均衡

只須要在ngix中添加一個 配置就能解決。

options的根屬性

• el:目的地(string||DOM元素)
• template 模板
• data是一個函數,return一個對象, 對象中的key data中的屬性...在dom中直接用，在js中 this.xxx
• components: key是組件名，value是組件對象
• methods: 通常用來配合 xxx事件
• props: 子組件接收的參數設置 ['title','name']

指令

• v-if: (留坑:<!----> 插入\移除 ) 和 v-show: (添加樣式:display:none)
• v-else-if/v-if: 必須和v-if是相鄰的元素
• v-bind/v-on: bind是給屬性賦值, v-on 綁定事件
• v-bind:單項數據流(vue -->-html): 對象、數組、三目運算、綁定內聯樣式
• v-model:雙向數據流(vue --> html --> vue):
  v-model 指令在 <input> (<input> 標籤有多種類型，如 button、select 等等)及 <textarea> 元素上進行雙向數據綁定。但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。 區別詳情

附加功能: 過濾器&監視改動

• 過濾器 能夠給 數據顯示 進行 添油加醋

<!-- 在雙花括號中 -->
{{ message | filterA }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | filterA"></div>
複製代碼

1. 組件的選項中定義本地的過濾器： filters: {filterA: function (value) {return value}}
2. 建立 Vue 實例以前全局定義過濾器： Vue.filter('filterA', function (value) {return value})

• 監視單個(data)watch 官方詳解

• {{ watchfn1: 'xxx' }} //監視xxx並經過watchfn1函數處理輸出
• key是屬於data屬性的屬性名,value是監視後的行爲
• 基礎類型 簡單監視、複雜類型 深度 監視

• computed(計算屬性) 監視多個(data) 官方詳解

• 全局： 組件/過濾器 讓你們直接用 全局不帶s
• 過濾器： function(原數據,參數1,參數2){return 結果;} 調用 {{ '原數據'| 過濾器名(參數1,參數2) }}
• watch：單個監視
• computed： 羣體監視

slot

• 內置的組件

vue響應式原理

當你把一個普通的 JavaScript 對象傳入 Vue 實例做爲 data 選項，Vue 將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter。 這些 getter/setter 對用戶來講是不可見的，可是在內部它們讓 Vue 可以追蹤依賴，在屬性被訪問和修改時通知變動。 每一個組件實例都對應一個 watcher 實例，它會在組件渲染的過程當中把「接觸」過的數據屬性記錄爲依賴。以後當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的組件從新渲染。

• 注意：屬性必須在 data 對象上存在才能讓 Vue 將它轉換爲響應式的，由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化。

異步更新隊列 (重災區)

由於Vue 在更新 DOM 時是異步執行的。若是你想基於更新後的 DOM 狀態來作點什麼，這就可能會有些棘手。 爲了在數據變化以後等待 Vue 完成更新 DOM，能夠在數據變化以後當即使用 Vue.nextTick(callback)。這樣回調函數將在 DOM 更新完成後被調用。

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})
複製代碼

vue雙向數據綁定原理

vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty() 來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

Vue實現這種數據雙向綁定的效果，須要三大模塊：

Observer：可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者 Compile：對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數 Watcher：做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖

vue生命週期的執行過程

首先建立一個vue實例，Vue()； 在建立Vue實例的時候，執行了init()，在init過程當中首先調用了beforeCreate。

• beforeCreate：初始化了部分參數，若是有相同的參數，作了參數合併，執行beforeCreate；el和數據對象都爲undefined，還未初始化；

• created：初始化了 Inject、Provide 、props、methods、data、computed和watch，執行created ；data有了，el尚未；

• beforeMount：檢查是否存在el屬性，存在的話進行渲染dom操做，執行beforeMount；$el和data都初始化了，可是dom仍是虛擬節點，dom中對應的數據尚未替換；

• mounted：實例化 Watcher,渲染dom，執行mounted；vue實例掛載完成，dom中對應的數據成功渲染；

• beforeUpdate：在渲染dom 後，執行了mounted 鉤子後，在數據更新的時候，執行 beforeUpdate；

• updated：檢查當前的watcher列表中，是否存在當前要更新數據的watcher，若是存在就執行updated；

• beforeDestroy：檢查是否已經被卸載,若是已經被卸載,就直接return出去,不然執行beforeDestroy；

• destroyed：把全部有關本身痕跡的地方，都給刪除掉；

---

組件傳值

父傳子

1. 在調用組件的時候 綁定一個屬性，此屬性就能夠在 子組件中獲取到 <fu-component v-bind:users="users"></fu-component>
2. 在子組件中獲取並使用: props: ["users"], 這樣就可使用了:<div>User {{ users }}</div>

總結:

• 父用子 先有子，聲明子, 使用子。
• 父傳子 綁定屬性, 子聲明(接收), 子直接用。

子傳父$emit

• 在子組件註冊 this.$emit("eventName","子向父傳 值"); 再父組件上 v-on:eventName="xxx($event)".
• 在eventName事件中就能夠寫邏輯代碼了.

兄弟組件通訊

跨多層級組件通訊

1. provide & inject 父組件中經過provider來提供變量，而後在子組件中經過inject來注入變量。不論子組件有多深，只要調用了inject那麼就能夠注入provider中的數據。而不是侷限於只能從當前父組件的prop屬性來獲取數據，只要在父組件的生命週期內，子組件均可以調用。
2. eventBus模式 而若是兩個組件不是父子關係呢？這種狀況下可使用中央事件總線的方式。新建一個Vue事件bus對象，而後經過bus.$emit觸發事件，bus.$on監聽觸發的事件。

• 避免 this.$parent

Vue.js 支持組件嵌套，而且子組件可訪問父組件的上下文。訪問組件以外的上下文違反了 基於模塊開發 的 第一原則 。所以你應該儘可能避免使用 this.$parent 。

任意傳值使用 vuex

已下有詳細講解

---

Vue路由

• 首先安裝路由 npm install vue-router
• main.js 使用路由 Vue.use(VueRouter)
• 配置路由:const router = new VueRouter({ routers: [ {path: "/", component: Home}],//配置路由地址 mode: "history" //去除# 配置(發佈後刷新404的話就須要服務器配置WEB-INF) })
• 同時在使用的地方加上 <router-view></router-view>
• a標籤會從新加載頁面，因此 使用 <router-link></router-link>標籤
• jsonplaceholder.typicode.com 在線json接口

參數傳遞

1. "動態路徑參數"(dynamic segment)

• 路由 參數的聲明: { path: '**/user/:id**', component: User }
• 參數的獲取(使用)： this.$route.params.id

2. 捕獲全部路由

• path: '*': 會匹配全部路徑
• path: '/user-*' : 會匹配以 /user- 開頭的任意路徑.$route.params 內會自動添加一個名爲 pathMatch 參數.

3. query傳參

• path:'/componentsB' query:{que:'我是經過query傳到組件B的參數'} 頁面經過this.$route.query來獲取參數

精講路由

路由的跳轉

一、第一種 router-link 聲明式

• <router-link to="name"> </router-link> tag屬性 可自定義 顯示標籤； :to="{name:'xxx',params:{key:value}}" 這種寫法就是 根據路由定義的 name來動態獲取跳轉路由 {{this.$route.params.username}} 獲取路由參數

二、第二種 編程式

this.$router.go(-1);   //跳轉到上一次瀏覽的頁面

 //不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。
 this.$router.replace('/index');
 this.$router.replace({name: 'routerNmae'});    //指定跳轉到路由name

 this.$router.push('/index');   //經過push跳轉
 this.$router.push({name: 'routerNmae'});   //經過push跳轉，新增history記錄
 // 命名的路由
 router.push({ name: 'user', params: { userId: '123' }})-> /user/123
 // 帶查詢參數，變成 /register?plan=private
 router.push({ path: 'register', query: { plan: 'private' }})

複製代碼

二級路由 — 路由嵌套

通常都用做導航

• 一、依然在 路由.js 中import 頁面路徑
• 二、在須要展現二級的 path中 配置 {path:'/', name:'index', meta:{title:'主頁',}, component:index, children:[{path:'/index/xxx',name:"erjiLink",component:routerName}]}
• 三、配置 redirect:'/默認顯示路徑' -- 重定向

導航守衛

完整的導航解析流程

全局守衛

• 全局前置守衛 使用更多(登陸攔截) router.beforeEach((to, from, next) => { // ... })

路由獨享的守衛

​routes: [ {path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ...**進入該頁面以前todo** } } ]

組件內守衛

• beforeRouteEnter：在渲染該組件的對應路由被 confirm 前調用，不能 訪問 this。可是,next(vm => { // 經過 **vm** 訪問組件實例 })
• beforeRouteUpdate (2.2 新增)：在當前路由改變，可是該組件被複用時調用
• beforeRouteLeave：導航離開該組件的對應路由時調用

完整的導航解析流程（路由守衛）

導航被觸發。
在失活的組件裏調用離開守衛。
調用全局的 beforeEach 守衛。
在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
在路由配置裏調用 beforeEnter。
解析異步路由組件。
在被激活的組件裏調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (2.5+)。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。
複製代碼

---

組件結構化

按照必定的結構組織，使得組件便於理解。

<template lang="html">
    <div class="Ranger__Wrapper">
        <!-- ... -->
    </div>
</template>

<script type="text/javascript">
  export default {
    // 不要忘記了 name 屬性
    name: 'RangeSlider',
    // 組合其它組件
    extends: {},
    // 組件屬性、變量
    props: {
        bar: {}, // 按字母順序
        foo: {},
        fooBar: {},
    },
    // 變量
    data() {},
    computed: {},
    // 使用其它組件
    components: {},
    // 方法
    watch: {},
    methods: {},
    // 生命週期函數
    beforeCreate() {},
    mounted() {},
};
</script>

<style scoped>
  .Ranger__Wrapper { /* ... */ }
</style>

複製代碼

優化組件

檢查全部的事件。子組件向父組件通訊通常是經過事件來實現的，可是大多數的開發者更多的關注於 props 從忽視了這點。 Props向下傳遞，事件向上傳遞！ 。以此爲目標升級你的組件，提供良好的 API 和 獨立性。 當遇到 props 和 events 難以實現的功能時，經過 this.$refs 來實現。 當須要操做 DOM 沒法經過指令來作的時候可以使用 this..$ref 而不是 JQuery , document.getElement*,document.queryElement 。

提供組件 API 文檔

在模塊目錄中添加 README.md 文件： 在 README 文件中說明模塊的功能以及使用場景。對於 vue組件來講，比較有用的描述是組件的自定義屬性即 API 的描述介紹。

狀態管理器 教程

state: 存儲數據

getter: 獲取store 屬性方法

mutatuon: 更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation,相似於事件。

action: Action 提交的是 mutation，而不是直接變動狀態。

若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。 確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。

這個狀態自管理應用包含如下幾個部分：

state，驅動應用的數據源；
view，以聲明方式將 state 映射到視圖；
actions，響應在 view 上的用戶輸入致使的狀態變化。
Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
複製代碼

你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。

• 你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

經過 store.state 來獲取狀態對象，以及經過 store.commit 方法觸發狀態變動：

store簡單狀態管理起步使用

• this.$store.state.products;// 獲取 store中的數據
• getters:Getter 會暴露爲 store.getters 對象，你能夠以屬性的形式訪問這些值：

**store.js 中定義**
getters: {
  // ...1經過屬性定義
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  },
  // ...2經過方法定義
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
** 咱們能夠很容易地在任何組件中使用它：**
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount; //經過屬性訪問
    store.getters.getTodoById(2) //經過方法訪問 -> { id: 2, text: '...', done: false }
  }
}
複製代碼

mapGetters 輔助函數

僅僅是將 store 中的 getter 映射到局部計算屬性：

computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ]).
  }

複製代碼

Mutation

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation,相似於事件。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})
//要喚醒 mutation handler
store.commit('increment')

複製代碼

---

登陸成功以後重定向到redirect

watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  
  //登陸成功方法裏
  this.$router.push({ path: this.redirect || '/' })
複製代碼