傳說前端江湖有一篇vue秘籍，看懂全篇，vue界即可橫行霸道，共有X式招數。
第一式 v-if v-for
傳說v-if與v-for不可以同時使用，主要是因為v-for的優先級高于v-if。
第二式 懶加載路由
傳說在路由較多的時候，打包出現資源較多，進入單頁面較慢等問題。則需要對路由進行按需加載，也稱為懶加載，懶加載在江湖中主要有三種途徑：
- 使用import
component: () =>
import(/* webpackChunkName: "about" */ '../views/About.vue')
不指定webpackChunkName
元件會各自打包成一個js檔案 指定後元件會打包成一個js檔案
- 使用異步元件
component: resolve =>
require(['@/components/index'],resolve)
- 使用webpack的ensure方法
component: resolve=>
require.ensure([], () => resolve(require('@/components/index')), 'demo')
第三式 vue無法監測數組變化
通過索引修改數組的值，并不會使vue視圖進行重新整理
data() {
return {
test:[1,2,3]
}
}
this.$set(this.test,0,4); //三個參數分别為 目标,索引,值
第四式 vuex的表單處理
對vuex的state中定義資料使用雙向綁定時，v-model會試圖直接修改其值，但是state的資料必須在mutation中執行修改，否則會抛出異常。
有兩種解決方案：
- 第一種就是不用v-model 了改為 對input 進行監聽 或者valuechange的變化
// ...
computed: {
...mapState({
message: state => state.obj.message
})
},
methods: {
updateMessage (e) {
this.$store.commit('updateMessage', e.target.value)
}
}
// ...
mutations: {
updateMessage (state, message) {
state.obj.message = message
}
}
- 第二種就是繼續使用v-model 但是需要在計算屬性中對其的set方法進行指定
// ...
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
第五式 vue-router的導航守衛
導航守衛都有哪些層次的？
一共有三種層次的，全局級，路由級群組件級。
- 全局前置守衛 beforeEach
//為登入即為false
let isAuthenticated = false;
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})
from 是從哪兒來 to是到哪兒去
如果去登入和注冊頁 則顯示登入和注冊頁
如果不是則跳轉到登入頁
- 全局解析守衛 beforeResolve
步驟：在導航被确認之前，同時在所有元件内守衛和異步路由元件被解析之後。調用。
- 全局後置鈎子 afterEach
router.afterEach((to, from) => {
// ...
})
- 路由獨享守衛 beforeEnter 與全局前置守衛的參數相同
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
-元件内守衛 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
},
beforeRouteUpdate(to, from, next) {
},
beforeRouteLeave(to, from, next) {
}
}
第六式 為什麼vue中的data必須是一個函數
反向思考一下如果data是一個對象的話。
在元件引入過程中，其實都是在操作同一個對象，由于元件的共享，data也在共享，是以data需要用函數傳回一個對象的獨立拷貝，以保持資料解耦。
第七式 嵌套路由
主要是children屬性，詳細看一下嵌套路由的demo：
{
path: '/user/:id',
component: User,
children: [
{
path: '', // /user/:id
component: userIndex
},
{
path: 'others', // /user/:id/others
component: userOthers
},
{
path: 'detail',// /user/:id/detail
component: userDetail
}
]
}
第八式 vue混入 Mixins
混合進入
混入在文檔裡的概念不容易了解，但在文檔中提到了一個混合進入的概念。沒錯，其實mixins就是把自己的資料和方法混合進入到引入它的元件裡。
在鍵名相同的比較過程中，優先元件的鍵值顯示。
// 定義一個混入對象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定義一個使用混入對象的元件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
第九式 vue項目中引入插件
引入element
引入echarts
引入vuex
引入vue-router
第十式 v-model的原理
v-model 是vue雙向綁定的指令。可以将頁面輸入的值同步更新到相關綁定的data屬性上，也會在data屬性更新時，更新頁面控件的值。這裡可以詳見雙向綁定的原理，問v-model的原理即是問complie指令解析器的過程。
第十一式 元件間傳值
父傳子：props，子傳父：$emit，非父子元件：bus事件總線法。
bus事件總線法的步驟：
首先建立一個bus的vue執行個體中間件
在需要通信的元件中都引入這個中間件
利用 e m i t 和 emit和 emit和on進行發送和接收
第十二式 keep-alive
<keep-alive>
<router-view></router-view>
</keep-alive>
使用keep-alive包裹動态元件時，會緩存不活動的元件執行個體，而不是銷毀它們
第十三式 vue中key的作用
key的主要作用是高效的 更新虛拟DOM
其原理是vue在patch過程中通過key可以精準的判斷兩個vnode節點是不是同一個，進而避免頻繁更新不同元素，讓整個過程更加高效，減少DOM操作量，提高性能。
第十四式 虛拟dom及vue中diff算法
什麼是虛拟dom
當狀态更新時，将新的JavaScript對象和舊的JavaScript對象進行比較(即diff算法)，運算出兩者的差異，将差異應用到真正的DOM，以此減少了DOM的操作
移步檢視diff算法
第十五式 nextTick解決
this.$nextTick(() => {
const listRef = this.$refs.list;
console.log(listRef.childNodes.length);
});
nextTick的作用：将回調延遲到DOM 更新循環之後執行。 在修改資料時立即使用它，然後等待 DOM 更新，便可達到擷取更新後的節點。
第十五式 基本功
單向資料流，MVVM，SPA單頁應用，生命周期等
移步基本功解析
第十六式 VueX資料持久化
移步 vuex資料持久化
第十七式 route和router的差別
移步 route和router的差別
未完待續 待各路高手完善
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)