路由的概念来源于服务端，服务端中的路由描述的是URL和处理函数之间的映射关系；web前端单页应用SPA（single page application）中，路由描述的是URL和UI之前的映射关系，这种映射是单向的，即URL的变化引起UI更新；
如何实现前端路由？
解决两个核心问题：
使用hash和history两种实现方法可以解决上面两个问题；
<a href="https://jingyan.baidu.com/">百度经验</a>
// 默认在当前页打开链接网页
<a href="https://jingyan.baidu.com/" target="_blank">百度经验</a>
// 加上target，在新的标签页打开链接网页
Vue的双向绑定首先就是MVVM（model-view-viewmodel）模式；当视图发生改变的时候传递给VM，再让数据得到更新，当数据发生改变时传给VM，使得视图发生改变。
MVVM模式通过以下三个核心组件组成，每个都有它独特的角色：
任务拆分：
1）组件初始化时，利用Object.defineProperty（在一个对象上定义一个新的属性）方法，给每一个data属性注册getter和setter方法，也就是reaction化（数据劫持）；
2）在mount阶段会创建watcher类（每个组件对应一个watcher），然后再new一个watcher对象，watcher对象会立即调用组件的render函数生成虚拟DOM，在调用render函数时会访问data的属性值，此时会触发属性的getter函数，getter函数将当前的watcher注册到属性的dep中；watcher在组件渲染的过程中把“接触”过的data属性记录为依赖；
3）之后当data属性发生变化时，触发setter函数，之后调用dep的notify函数，通知watcher调用updata函数进行更新，从而使它关联的组件重新渲染。
创建阶段：
beforeMount() {
console.log(document.getElementById('h3').innerText)
//{{msg}}
},
mounted() {
console.log(document.getElementById('h3').innerText)
//ok
},
运行阶段：
销毁阶段：
子组件Scroll.vue
<template>
<div class="wrapper" ref='wrapper'>
<div class='content'>
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'Scroll',
props: {
probeType: {
type: Number,
default: 0
},
},
data() {
return {
scroll: null,
}
}
</script>
父组件：Detail.vue
<template>
<div id="detail">
<scroll class="scroll-content" ref="scroll"
:probe-type="2" @scroll="contentScroll" >
<detail-swiper :top-images="topImages"/>
<goods-list :goods="recommends" ref="recommend"/>
</scroll>
</div>
</template>
<script>
import Scroll from '@/components/common/scroll/Scroll'
export default {
name: "Detail",
components: {
Scroll
},
</script>
data() {
return {xx: xx， yy：yy}
},
methods: {
login() { },
layout() { }
},
mounted() {
this.login()
},
computed:{
lowerCaseUsername () {
return this.username.toLowerCase()
}
}
<div v-bind:class="{ active: isActive }"></div>
1、创建项目时可以选择runtime-only和runtime-compiler
vue-template-compiler可以将template解析成ast，再将ast编译为render函数，render函数可以将template翻译成虚拟DOM树，之后将虚拟DOM树渲染成真实DOM树；
使用runtime-compiler：template => ast => render函数 => 虚拟DOM树 => 真实DOM树；
使用runtime-only：render函数 => 虚拟DOM树 => 真实DOM树；
kee-alive 是 Vue 内置的一个抽象组件，它自身不会渲染一个DOM元素；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存；
使用keep-alive组件保留了组件状态且不会重新渲染，这样会导致created(){ } 钩子函数不会再次触发；
keep-alive不仅仅能保存页面 / 组件的状态这么简单，还可以避免组件反复创建和渲染，有效提升系统性能。
include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；
export default {
name: 'keep-alive',
abstract: true,
// 判断当前组件虚拟dom是否渲染成真实dom的关键，true不渲染
props: {
include: patternTypes, // 缓存白名单
exclude: patternTypes, // 缓存黑名单
max: [String, Number] // 缓存的组件
},
created() {
this.cache = Object.create(null) // 缓存虚拟dom
this.keys = [] // 缓存的虚拟dom的键集合
},
destroyed() {
for (const key in this.cache) {
// 删除所有的缓存
pruneCacheEntry(this.cache, key, this.keys)
}
},
mounted() {
// 实时监听黑白名单的变动
this.$watch('include', val => {
pruneCache(this, name => matched(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
},
render() {
// 先省略...
}
}
keep-alive在它生命周期内定义了三个钩子函数：
vue渲染：render函数将组件对象转化为一个VNode实例，之后调用update函数把Vnode渲染成真实DOM；这个工程调用patch函数完成；
activated // 用于keep-alive激活
activated() {
//刚进入该组件时，执行
// console.log('组件刚进来')
this.$refs.scroll.scrollTo(0, this.saveY, 0)
this.$refs.scroll.refresh()
},
destroyed // 用于keep-alive停用
deactivated() {
//离开该组件时，执行
//1.保存Y值
this.saveY = -this.$refs.scroll.getScrollY
//2.取消全局事件的监听
this.$bus.$off('itemImageLoad', this.itemImgListener)
},
新的问题：keep-alive不会生成真正的DOM节点，因为Vue在初始化生命周期的时候，为组件实例建立父子关系会根据abstract属性决定是否忽略某个组件；keep-alive中设置了abstract：true，那么Vue就会跳过该组件实例。
被缓存的组件实例会为其设置keepAlive = true，而在初始化组件钩子函数中，不会再进入$mount过程，那么mounted之前的所有钩子函数(beforeCreate、created、mounted）都不再执行。
1、相同点：v-if和v-show都可以动态控制DOM元素的显示与隐藏
2、不同点：
v-if动态地向DOM树中添加或删除DOM元素节点；
v-show通过向DOM元素设置样式display属性值控制显示隐藏。
当两个demo用一个button按钮执行函数控制v-if和v-show的值，在控制台可以看出，两值都为false时，v-if控制的元素直接从DOM树销毁，而v-show控制的元素还是在DOM树中，只是以display：none的样式隐藏元素内容；
编译方面：v-if惰性，若最初指令值为false，不会编译；直至指令值为true时，才会编译存入缓存；
v-show不管最初指令值为真还是为假，都会马上编译存入缓存；
消耗方面：v-if切换性能消耗较大；v-show最初渲染消耗较大；
适用场景：v-if适用切换条件、项目需求稳定；v-show使用与频繁需要切换；
语法方面：v-if可以v-else、v-else-if配合使用，进行判断执行；但一定需要相邻，不可中断。
display：none； 不在文档流，无法触发绑定的事件，不会被子元素继承；但是父元素都不在了，子元素肯定也不在了~
visibilty：hidden； 会被子元素继承；在文档流中，会占据位置，但是不能触发绑定的事件；由于父元素隐藏，所以子元素也会隐藏，为了使子元素不被隐藏，可以使用visibility：visible；
opacity：0； 在文档流中，会占据位置；绑定的事件也可以触发。
1、onchange事件:
此事件会在元素内容发生改变，且失去焦点的时候触发。
浏览器支持度较好。
2、onpropertychange事件:
此事件会在元素内容发生改变时立即触发，即便是通过js改变的内容也会触发此事件。
元素的任何属性改变都会触发该事件，不止是value。只有IE11以下浏览器支持此事件。
3、oninput事件:
此事件会在value属性值发生改变时触发，通过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持。
参考 https://www.cnblogs.com/answershuto/p/7825022.html
是Vue.js一个内置组件；它能够将不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中也不会出现在父组件链中；它提供了include与exclude两个属性，允许组件有条件地进行缓存；
<keep-alive>
<component></component>
</keep-alive>
这里面的component组件会被缓存起来。
举例说明：
<keep-alive>
<coma v-if="test"></coma>
<comb v-else="test"></comb>
</keep-alive>
<button @click="test=handleClick">请点击</button>
export default {
data () {
return {
test: true
}
},
methods: {
handleClick () {
this.test = !this.test;
}
}
}
在点击button时候，coma与comb两个组件会发生切换，但是这时候这两个组件的状态会被缓存起来，比如说coma与comb组件中都有一个input标签，那么input标签中的内容不会因为组件的切换而消失。
1、include与exclude属性
keep-alive组件提供了include与exclude两个属性来允许组件有条件地进行缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
<keep-alive include="a">
<component></component>
</keep-alive>
将缓存name为a的组件
<keep-alive exclude="a">
<component></component>
</keep-alive>
name为a的组件将不会被缓存
2、keep-alive提供的生命钩子
activated与deactivated
keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法；需要使用activated与deactivated两个生命钩子来得知当前组件是否处于活动状态；
3、深入keep-alive组件实现
created钩子会创建一个cache对象，用来作为缓存容器，保存vnode节点；
created () {
/* 缓存对象 */
this.cache = Object.create(null)
},
destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。
/* destroyed钩子中销毁所有cache中的组件实例 */
destroyed () {
for (const key in this.cache) {
pruneCacheEntry(this.cache[key])
}
},
4、render函数
首先通过getFirstComponentChild获取第一个子组件，获取该组件的name（存在组件名则直接使用组件名，否则会使用tag）。接下来会将这个name通过include与exclude属性进行匹配，匹配不成功（name不在inlcude中或者在exlude中，说明不需要进行缓存）则不进行任何操作直接返回vnode，vnode是一个VNode类型的对象，不了解VNode的同学可以参考笔者的另一篇文章《VNode节点》。
5、watch
用watch来监听pruneCache与pruneCache这两个属性的改变，在改变的时候修改cache缓存中的缓存数据。
6、总结
Vue.js内部将DOM节点抽象成了一个个的VNode节点，keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件（pruneCache与pruneCache）的组件在cache对象中缓存起来，在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。
在失去焦点时，进行规则的验证，并且发送ajax请求，在数据库中搜索，用户名有没有被注册；
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ type: 'string', min: 6, message: '密码不允许小于6位', trigger: 'blur' }
],
来源：https://www.jianshu.com/p/72e36168944f
async/await 执行原理详解
async函数就是generator函数的语法糖。
async函数，就是将generator函数的 * 换成async，将yield替换成await。
1、async函数对generator的改进
内置执行器，不需要使用next()手动执行。
await命令后面可以是Promise对象或原始类型的值，yield命令后面只能是Thunk函数或Promise对象。
返回值是Promise；返回非Promise时，async函数会把它包装成Promise返回。(Promise.resolve(value))
2、async函数作用
异步编程的终极解决方案
3、通俗理解
async/await，就是异步编程回调函数写法的替代方法。（使代码以同步方式的写法完成异步操作）
4、执行顺序
函数执行时，一旦遇到await就会返回。等到触发的异步操作完成（并且调用栈清空），再接着执行函数体内后面的语句。
await语句后面的代码，相当于回调函数。（即：await的下一行开始，都视作回调函数的内容）
async showSetRightDialog(role) {
const { data: res } = await this.$http.get('rights/tree')
if (res.meta.status !== 200) {
return this.$message.error('获取权限列表失败')
}
this.rightsList = res.data
// console.log(this.rightsList)
this.getLeafKeys(role, this.defKeys)
this.dialogVisible = true
this.roleId = role.id
}
回调函数会被压入microtask队列，当主线程调用栈被清空时，去microtask队列里取出各个回调函数，逐个执行。
await只是让当前async函数内部的代码等待，并不是所有代码都卡在这里。遇到await就先返回，执行async函数之后的代码。
（2019.8.20测试发现：浏览器实际执行结果发生变化。await后面的函数，无论返回promise、还是非promise，执行结果都与曾经返回非promise相同）
主线程执行过程中，遇到await后面的函数调用，会直接进入函数，并执行。
(1)当这个函数返回非promise：
await后面的代码被压入microtask队列。当主线程执行完毕，取出这个回调，执行。
(2)当这个函数返回promise：—— 这种情况，看浏览器实际表现，已经不是这样处理了。
await后面的代码被压入microtask队列。当主线程执行完毕，取出这个回调，发现await语句等待的函数返回了promise，把后续代码赋给这个promise对象的then，并把这个promise的回调再压入microtask队列，重新排队。当它前面的回调函数都被取出执行后，再取出它，执行。
- 举例说明
【1】await返回非promise
async function func1(){
console.log('func1');
var a = await func2(); //当await返回非promise
console.log('func1 return');
}
function func2(){
console.log('func2');
}
func1();
new Promise(function(resolve){
console.log('promise1')
resolve('resolved');
}).then(function(data){
console.log(data);
})
// 结果：
// func1
// func2
// promise1
// func1 return
// resolved
【No2】await返回promise（来自头条笔试题）
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log( 'async2');
}
console.log("script start");
setTimeout(function () {
console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("promise2");
});
console.log('script end');
//结果：
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// settimeout
【注】
async1 end、promise2的console顺序，原来是反过来的。
来源
这里有一个非常重要的问题： 为什么要用Action管理异步操作？
乍一想，使用mutation也可以实现异步操作，为什么要多此一举，使用actions呢？
mutation必须同步执行这个限制，action不受约束；
可以在actions内部执行异步操作；
如果遇到异步操作涉及互相依赖的情况的时候，我们希望被依赖的操作执行完成之后，再执行依赖项，这样能保证程序执行得到正确的结果。但是异步操作，比如接口访问，往往不能确定执行完成的时间；
比如：在接口A中得到一个值，a；接口B需要使用这个值，结合B接口返回的值进行一些判断操作，if(a&&b){ … }； 这个时候如果B接口执行完毕了，A接口的值还没过来的话，就可能得到错误的结果。 a => undefined
addCountAction (context) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit('add') // 先提交
resolve()
}, 1000)
})
}
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
具体实例：
this.$store.commit("addCart", product)
addCart(context, payload) {
return new Promise((resolve, reject) => {
})
}
1、state状态的更改
当在其他地方更改了state状态时，其他组件应用到这个状态的时候，也会得到更新；
2、mutations：
3、store的状态是响应式的
Vuex中的store的状态是响应式的，mutations作为更改store中状态的唯一方法，需要遵循Vue的响应规则；
提前在store中初始化好所需的属性；
当给state中的对象添加新属性时，使用以下方法；
方式一：使用Vue.set()方法
addProp(state, payload) {
// 该方法新增的属性不会添加至响应系统
// state.obj.id = payload.id
// Vue.set()添加的属性可以加入响应式系统
// 三个参数分别是改变的对象，新增的属性名，新增的属性值
Vue.set(state.obj, 'id', payload.id)
// 删除对象使用Vue.delete()方法
}
方式二：用新对象给旧对象重新赋值（新对象替换旧对象）
addPorp(state, payload) {
// (...) 扩展运算符(对象展开符)
state.obj = {...state.obj, 'id': payload.id}
}
4、为什么要加action功能？
在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，无法知道什么时候回调和哪个先回调。