知識點 · Vue 學習筆記

[TOC] # `$createElement` Element UI 中 Message 消息提示，MessageBox 彈框，Notification 通知組件怎么插入自定義的HTML？ ~~~ const h = this.$createElement; this.$notify({ title: '這是提示標題', message: h('div', { on: { click: handleClick }, '查看詳情'), dangerouslyUseHTMLString: true }); ~~~ 這種方式還有一個弊端，如果有多個嵌套層，寫起來相當復雜和混亂，用 JSX 的方式重新 > [https://www.jianshu.com/p/84cd41a5009c](https://www.jianshu.com/p/84cd41a5009c) # 對于不想被響應式的數據觸發順序： ``` beforeCreate constructor -> 這之間會 Init injections & reactivity created ``` 所有對于一些數據不想被響應式的化，可以放置在 `created` 中賦值： ``` ... private?cashViews!:string[];?//待優化，點擊刷新 ... created()?{ this.cashViews =?['List',?'Detail'];?//待優化，點擊刷新 } ... ``` # `this.$set` ``` // 給data中的對象動態新增的屬性，不能夠有響應式的效果，也就是說不能觸發視圖更新 // 如果想要有響應式效果 // 1. 就需要提前，在對象中先把屬性聲明好在aa中一開始就添加好age屬性，哪怕不給值 // this.aa.age = 18; // 2. 如果確實需要動態的給aa對象添加age屬性，那么我們可以用到vue中提供的$set方法 // 這個方法，可以動態的給數據添加響應式的屬性！ this.$set(this.aa, "age", 18); //或者 Vue.set(this.aa, "age", 18) ``` 什么時候用`$set`? 1. 當給對象動態添加屬性的時候，需要用`$set` 2. 當想要通過數組的下表給元素賦值的時候，需要用`$set` > [不觸發vue響應式更新的4種情況](https://www.jianshu.com/p/5574c5664d3f) # Vue中 `Vue.nextTick()` 和 `this.$nextTick()` 常用的場景是在進行獲取數據后，需要對新視圖進行下一步操作或者其他操作時，發現獲取不到 dom 。**因為賦值操作只完成了數據模型的改變并沒有完成視圖更新**。 ``` Vue.component('example', { template: '<span>{{ message }}</span>', data: function () { return { message: 'not updated' } }, methods: { updateMessage: function () { this.message = 'updated' console.log(this.$el.textContent) // => 'not updated' this.$nextTick(function () { console.log(this.$el.textContent) // => 'updated' }) } } } ``` [淺析 Vue 2.6 中的 nextTick 方法](https://segmentfault.com/a/1190000018328525) # vue 指令 # Vue.extend # computed 與 $watch ## computed 如果需要多于一個表達式的邏輯，應當使用**計算屬性**。計算屬性默認只是 `getter`，不過在需要時你也可以提供一個 `setter`： ```javascript // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ... ``` 現在在調用 `vm.fullName = 'John Doe'` 時，`setter` 會被調用，`vm.firstName` 和 `vm.lastName` 也會有相應更新。 ## $watch # [v-model 和 v-bind](https://blog.csdn.net/transformer_wsz/article/details/80245962) ## v-model `v-model` 會忽略所有表單元素的 `value`、`checked`、`selected` 特性的初始值而總是將 Vue 實例的數據作為數據來源。實際上，由于 `v-model` 只是語法糖， `<input v-model="message">` 與下面的兩行代碼是一致的： ~~~ <input v-bind:value="message" v-on:input="message = $event.target.value" /> <input :value="message" @input="message = $event.target.value" /> ~~~ ## v-bind ~~~ <p v-bind:class="someclass"></p> ~~~ 如果不加 `v-bind` 那么 `someclass` 就是個常量，沒有任何動態數據參與。當加上 `v-bind` 之后，它的值 `someclass` 不是字符串，而是vue實例對應的 `data.someclass` 這個變量。 ## v-bind與v-model區別下面兩句是等價的： ~~~ <input v-model="message"> <input v-bind:value="message" v-on:input="message = $event.target.value" /> ~~~ 那么 `v-model` 其實就是 `v-bind` 和 `v-on` 的語法糖。看到此處，是不是豁然開朗呢？ # [vuex](https://vuex.vuejs.org/zh/) Vuex 背后的基本思想，**借鑒了 Flux、Redux、和 The Elm Architecture**。與其他模式不同的是，Vuex 是專門為 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。要注意一個應用或是項目中只能存在一個Store實例！！ Vuex 和單純的全局對象有以下兩點不同： 1. Vuex 的狀態存儲是響應式的 2. 你不能直接改變 store 中的狀態 vuex有6個概念 * Store(最基本的概念)（倉庫）在使用Vuex的時候通常會創建 Store 實例 `new Vuex.store({state,getters,mutations,actions})` 有很多子模塊的時候還會使用到`modules`。要注意一個應用或是項目中只能存在一個Store實例！！ * State (數據) Vuex 使用單一狀態樹——是的，用一個對象就包含了全部的應用層級狀態。至此它便作為一個“唯一數據源 (SSOT)”而存在。 * Getters(可以說是計算屬性) Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。 * Mutations Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數。第二個參數：提交載荷（Payload）。 * Actions Action 提交的是 mutation，而不是直接變更狀態。 Action 可以包含任意異步操作。 * Modules Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：用 `commit()` 方法來調用，改數據的唯一方式就是顯式的提交 mutations ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義屬性（數據） var state = { count:6 } // 定義 getters var getters={ count(state){ return state.count } } // 定義 actions ，要執行的動作，如流程的判斷、異步請求 const actions ={ // ({commit,state}) 這種寫法是 es6 中的對象解構 increment({commit,state}){ //提交一個名為 increment 的變化，名字可自定義，可以認為是類型名，與下方 mutations 中的 increment 對應 //commit 提交變化，修改數據的唯一方式就是顯式的提交 mutations commit('increment') } } // 定義 mutations ，處理狀態（數據）的改變 const mutations ={ //與上方 commit 中的 ‘increment' 相對應 increment(state){ state.count ++; } } // 創建 store 對象 const store = new Vuex.Store({ state, getters, actions, mutations }) // 導出 store 對象 export default store; ``` # vuex 中的 store 和 $store 的區別 ~~~ <router-link to="/login">{{ $store.state.userName }}</router-link> <router-link to="/login">{{ store.state.userName }}</router-link> <router-link to="/login">{{ this.store.state.userName }}</router-link> <router-link to="/login">{{ this.$store.state.userName }}</router-link> ~~~ `$store` 是掛載在 Vue 實例上的（即`Vue.prototype`），而組件也其實是一個Vue實例，在組件中可使用 this 訪問原型上的屬性，`template` 擁有組件實例的上下文，可直接通過` {{ $store.state.userName }}`訪問，等價于 script 中的 `this.$store.state.userName`。至于 `{{ store.state.userName }}`，script 中的 data 需聲明過 store 才可訪問。 # mixins mixin 的作用是多個組件可以共享數據和方法，在使用mixin 的組件中引入后，mixin 中的方法和屬性也就并入到該組件中，可以直接使用，在已有的組件數據和方法進行了擴充。引入 mixin 分全局引用和局部引用 ```dart // 全局引用 import mixin from './mixin' Vue.mixin(mixin) // 在組件中引用 import '@/mixin'; // 引入mixin文件 export default { mixins: [mixin] } ``` > [vue的mixin的使用](https://cn.vuejs.org/v2/guide/mixins.html)) # [axios](https://github.com/axios/axios) axios 是一個基于 Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征： * 從瀏覽器中創建 XMLHttpRequest * 從 node.js 發出 http 請求 * 支持 Promise API * 攔截請求和響應 * 轉換請求和響應數據 * 取消請求 * 自動轉換JSON數據 * 客戶端支持防止 CSRF/XSRF axios 不支持 jsonp，可以選用： ``` npm install fetch-jsonp ``` # Vue.prototype - vue3 中被替換 app.config.globalProperties # Vue.use # ~~vue-resource~~ vue2.0 之后，官方就不再對 vue-resource 更新，而是推薦使用 axios。