傳說前端江湖有一篇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的變化
<input :value="message" @input="updateMessage">
// ...
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的區別
未完待續 待各路高手完善
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298393.html
標籤：其他