传说前端江湖有一篇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=)