class Vue {
	constructor(options) {
		this.$options = options;
		this.$data = options.data;

		// 对data选项做响应式处理
		observe(this.$data);

		// 代理data到vm上
		proxy(this);

		// 执行编译
		new Compile(options.el, this);
	}
}

function observe(obj) {
	if (typeof obj !== "object" || obj == null) {
		return;
	}
	new Observer(obj);
}

class Observer {
	constructor(value) {
		this.value = value;
		this.walk(value);
	}
	walk(obj) {
		Object.keys(obj).forEach((key) => {
			defineReactive(obj, key, obj[key]);
		});
	}
}

class Compile {
	constructor(el, vm) {
		this.$vm = vm;
		this.$el = document.querySelector(el); // 获取dom
		if (this.$el) {
			this.compile(this.$el);
		}
	}
	compile(el) {
		const childNodes = el.childNodes;
		Array.from(childNodes).forEach((node) => { // 遍历子元素
			if (this.isElement(node)) { // 判断是否为节点
				console.log("编译元素" + node.nodeName);
			} else if (this.isInterpolation(node)) {
				console.log("编译插值文本" + node.textContent); // 判断是否为插值文本{{}}
			}
			if (node.childNodes && node.childNodes.length > 0) { // 判断是否有子元素
				this.compile(node); // 子元素进行递归遍历
			}
		});
	}
	isElement(node) {
		return node.nodeType == 1;
	}
	isInterpolation(node) {
		return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);
	}
}

// 负责更新视图
class Watcher {
	constructor(vm, key, updater) {
		this.vm = vm
		this.key = key
		this.updaterFn = updater

		// 创建实例时，把当前实例指定到Dep.target静态属性
		Dep.target = this
		// 读一下key,触发get 
		vm[key]
		// 置空
		Dep.target = null
	}

	// 未来执行dom更新函数，由dep调用的 
	update() {
		this.updaterFn.call(this.vm, this.vm[this.key])
	}
}

class Dep {
	constructor() {
		this.deps = []; // 依赖管理
	}
	addDep(dep) {
		this.deps.push(dep);
	}
	notify() {
		this.deps.forEach((dep) => dep.update());
	}
}

class Watcher {
	constructor(vm, key, updateFn) {
		Dep.target = this;
		this.vm[this.key];
		Dep.target = null;
	}
}

function defineReactive(obj, key, val) {
	this.observe(val);
	const dep = new Dep();
	Object.defineProperty(obj, key, {
		get() {
			Dep.target && dep.addDep(Dep.target); // Dep.target也就是Watcher实例 
			return val;
		},
		set(newVal) {
			if (newVal === val) return;
			dep.notify(); // 通知dep执行更新方法
		},
	});
}

props: {
	// 字符串形式
	name: String // 接收的类型参数
	// 对象形式
	age: {
		type: Number, // 接收的类型为数值
		defaule: 18, // 默认值为18 
		require: true // age属性必须传递
	}
}

<Children name="jack" age=18 />

this.$emit('add', good)

<Children @add="cartAdd($event)" />

<Children ref="foo" />

this.$refs.foo // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

// 创建一个中央时间总线类
class Bus {
	constructor() {
		this.callbacks = {}; // 存放事件的名字
	}
	$on(name, fn) {
		this.callbacks[name] = this.callbacks[name] || [];
		this.callbacks[name].push(fn);
	}
	$emit(name, args) {
		if (this.callbacks[name]) {
			this.callbacks[name].forEach((cb) => cb(args));
		}
	}
}

// main.js 
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

this.$bus.$emit('foo')

this.$bus.$on('foo', this.handle)

this.$parent.on('add',this.add)

this.$parent.emit('add')

// child：并未在props中声明foo
<p>{{$attrs.foo}}</p> 
 
// parent 
<HelloWorld foo="foo"/>

// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>

// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>

// Grandson使用
<div @click="$emit('some-event', 'msg from grandson')">
	{{msg}}
</div>

provide() {
	return {
		foo: 'foo'
	}
}

inject:['foo'] // 获取到祖先组件传递过来的值

const app = new Vue({
	el: "#app",
	// 对象格式
	data: {
		foo: "foo"
	},
	// 函数格式
	data() {
		return {
			foo: "foo"
		}
	}
})

Vue.component('component1', {
	template: `<div>组件</div>`,
	data: {
		foo: "foo"
	}
})

function Component() {}
Component.prototype.data = {
	count: 0
}

const componentA = new Component()
const componentB = new Component()

console.log(componentB.data.count) // 0
componentA.data.count = 1
console.log(componentB.data.count) // 1

function Component() {
	this.data = this.data()
}
Component.prototype.data = function() {
	return {
		count: 0
	}
}

console.log(componentB.data.count) // 0
componentA.data.count = 1
console.log(componentB.data.count) // 0

function initData(vm: Component) {
	let data = vm.$options.data
	data = vm._data = typeof data === 'function' ?
		getData(data, vm) :
		data || {}
		...
}

Vue.prototype._init = function(options ? : Object) {
	...
	// merge options
	if (options && options._isComponent) {
		// optimize internal component instantiation
		// since dynamic options merging is pretty slow, and none of the
		// internal component options needs special treatment.
		initInternalComponent(vm, options)
	} else {
		vm.$options = mergeOptions(
			resolveConstructorOptions(vm.constructor),
			options || {},
			vm
		)
	}
	...
}

strats.data = function(
	parentVal: any,
	childVal: any,
	vm ? : Component
): ? Function {
	if (!vm) {
		if (childVal && typeof childVal !== "function") {
			process.env.NODE_ENV !== "production" &&
				warn(
					'The "data" option should be a function ' +
					"that returns a per-instance value in component " +
					"definitions.",
					vm
				);
			return parentVal;
		}
		return mergeDataOrFn(parentVal, childVal);
	}
	return mergeDataOrFn(parentVal, childVal, vm);
};

<p v-for="(value,key) in item" :key="key">
	{{ value }}
</p>
<button @click="addProperty">动态添加新属性</button>

const app = new Vue({
	el: "#app",
	data: () => {
		item: {
			oldProperty: "旧属性"
		}
	},
	methods: {
		addProperty() {
			this.items.newProperty = "新属性" // 为items添加新属性
			console.log(this.items) // 输出带有newProperty的items
		}
	}
})

const obj = {}
Object.defineProperty(obj, 'foo', {
	get() {
		console.log(`get foo:${val}`);
		return val
	},
	set(newVal) {
		if (newVal !== val) {
			console.log(`set foo:${newVal}`);
			val = newVal
		}
	}
})

obj.foo 
obj.foo = 'new'

obj.bar = '新属性'

function set(target: Array < any > | Object, key: any, val: any): any {
	...
	defineReactive(ob.value, key, val)
	ob.dep.notify()
	return val
}

function defineReactive(obj, key, val) {
	Object.defineProperty(obj, key, {
		get() {
			console.log(`get ${key}:${val}`);
			return val
		},
		set(newVal) {
			if (newVal !== val) {
				console.log(`set ${key}:${newVal}`);
				val = newVal
			}
		}
	})
}

this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})

<Modal v-if="isShow" />

<li v-for="item in items" :key="item.id">
	{{ item.label }}
</li>

<div id="app">
	<p v-if="isShow" v-for="item in items">
		{{ item.title }}
	</p>
</div>

const app = new Vue({
	el: "#app",
	data() {
		return {
			items: [{
					title: "foo"
				},
				{
					title: "baz"
				}
			]
		}
	},
	computed: {
		isShow() {
			return this.items && this.items.length > 0
		}
	}
})

f anonymous() {
	with(this) {
		return
		_c('div', {
				attrs: {
					"id": "app"
				}
			},
			_l((items), function(item) {
				return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e()
			}), 0)
	}
}

<div id="app">
	<template v-if="isShow">
		<p v-for="item in items">{{item.title}}</p>
	</template>
</div>

ƒ anonymous() {
	with(this) {
		return
		_c('div', {
				attrs: {
					"id": "app"
				}
			},
			[(isShow) ? [_v("\n"),
				_l((items), function(item) {
					return _c('p', [_v(_s(item.title))])
				})
			] : _e()], 2)
	}
}

export function genElement(el: ASTElement, state: CodegenState): string {
	if (el.parent) {
		el.pre = el.pre || el.parent.pre
	}
	if (el.staticRoot && !el.staticProcessed) {
		return genStatic(el, state)
	} else if (el.once && !el.onceProcessed) {
		return genOnce(el, state)
	} else if (el.for && !el.forProcessed) {
		return genFor(el, state)
	} else if (el.if && !el.ifProcessed) {
		return genIf(el, state)
	} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
		return genChildren(el, state) || 'void 0'
	} else if (el.tag === 'slot') {
		return genSlot(el, state)
	} else {
		// component or element
		...
	}
}

<template v-if="isShow">
	<p v-for="item in items">
</template>

computed: {
	items: function() {
		return this.list.filter(function(item) {
			return item.isShow
		})
	}
}

<Model v-show="isShow" />
<Model v-if="isShow" />

// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.ts
export const vShow : ObjectDirective<VShowElement> = {
	beforeMount(el, {
		value
	}, {
		transition
	}) {
		el._vod = el.style.display === 'none' ? '' : el.style.display
		if (transition && value) {
			transition.beforeEnter(el)
		} else {
			setDisplay(el, value)
		}
	},
	mounted(el, {
		value
	}, {
		transition
	}) {
		if (transition && value) {
			transition.enter(el)
		}
	},
	updated(el, {
		value,
		oldValue
	}, {
		transition
	}) {
		// ...
	},
	beforeUnmount(el, {
		value
	}) {
		setDisplay(el, value)
	}
}

// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.ts
export const transformIf = createStructuralDirectiveTransform(/^(if|else|else-if)$/, (node, dir, context) => {
	return processIf(node, dir, context, (ifNode, branch, isRoot) => {
		// ...
		return () => {
			if (isRoot) {
				ifNode.codegenNode = createCodegenNodeForBranch(branch, key, context) as IfConditionalExpression;
			} else {
				// attach this branch's codegen node to the v-if root.
				const parentCondition = getParentCondition(ifNode.codegenNode!);
				parentCondition.alternate = createCodegenNodeForBranch(branch, key + ifNode.branches.length - 1, context);
			}
		};
	});
});

<ul>
	<li v-for="item in items" :key="item.id">...</li>
</ul>

<Comp :key="+new Date()" />

<body>
	<div id="demo">
		<p v-for="item in items" :key="item">{{item}}</p>
	</div>
	<script src="../../dist/vue.js"></script>
	<script>
		// 创建实例
		const app = new Vue({
			el: '#demo',
			data: {
				items: ['a', 'b', 'c', 'd', 'e']
			},
			mounted() {
				setTimeout(() => {
					this.items.splice(2, 0, 'f') // 插入数据
				}, 2000);
			},
		});
	</script>
</body>

function sameVnode(a, b) {
	return (
		a.key === b.key && (
			(
				a.tag === b.tag &&
				a.isComment === b.isComment &&
				isDef(a.data) === isDef(b.data) &&
				sameInputType(a, b)
			) || (
				isTrue(a.isAsyncPlaceholder) &&
				a.asyncFactory === b.asyncFactory &&
				isUndef(b.asyncFactory.error)
			)
		)
	)
}

function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue, remo veOnly) {
	...
	while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
		if (isUndef(oldStartVnode)) {
			...
		} else if (isUndef(oldEndVnode)) {
			...
		} else if (sameVnode(oldStartVnode, newStartVnode)) {
			...
		} else if (sameVnode(oldEndVnode, newEndVnode)) {
			...
		} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
			...
		} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
			...
		} else {
			if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
			idxInOld = isDef(newStartVnode.key) ?
				oldKeyToIdx[newStartVnode.key] :
				findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
			if (isUndef(idxInOld)) { // New element
				createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
			} else {
				vnodeToMove = oldCh[idxInOld]
				if (sameVnode(vnodeToMove, newStartVnode)) {
					patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
					oldCh[idxInOld] = undefined
					canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
				} else {
					// same key but different element. treat as new element
					createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
				}
			}
			newStartVnode = newCh[++newStartIdx]
		}
	}
	...
}

var myMixin = {
	created: function() {
		this.hello()
	},
	methods: {
		hello: function() {
			console.log('hello from mixin!')
		}
	}
}

Vue.component('componentA', {
	mixins: [myMixin]
})

Vue.mixin({
	created: function() {
		console.log("全局混入")
	}
})

const Modal = {
	template: '#modal',
	data() {
		return {
			isShowing: false
		}
	},
	methods: {
		toggleShow() {
			this.isShowing = !this.isShowing;
		}
	}
}

const Tooltip = {
	template: '#tooltip',
	data() {
		return {
			isShowing: false
		}
	},
	methods: {
		toggleShow() {
			this.isShowing = !this.isShowing;
		}
	}
}

const toggle = {
	data() {
		return {
			isShowing: false
		}
	},
	methods: {
		toggleShow() {
			this.isShowing = !this.isShowing;
		}
	}
}

const Modal = {
	template: '#modal',
	mixins: [toggle]
};

const Tooltip = {
	template: '#tooltip',
	mixins: [toggle]
}

export function initMixin(Vue: GlobalAPI) {
	Vue.mixin = function (mixin: Object) {
		this.options = mergeOptions(this.options, mixin);
		return this;
	};
}

export function mergeOptions(
	parent: Object,
	child: Object,
	vm ? : Component
): Object {
	if (child.mixins) { // 判断有没有mixin，也就是mixin里面挂mixin的情况，有的话递归进行合并
		for (let i = 0, l = child.mixins.length; i < l; i++) {
			parent = mergeOptions(parent, child.mixins[i], vm)
		}
	}
	const options = {}
	let key
	for (key in parent) {
		mergeField(key) // 先遍历parent的key调对应的strats[XXX]方法进行合并
	}
	for (key in child) {
		if (!hasOwn(parent, key)) { // 如果parent已经处理过某个key就不处理了
			mergeField(key) // 处理child中的key也就parent中没有处理过的key
		}
	}

	function mergeField(key) {
		const strat = strats[key] || defaultStrat
		options[key] = strat(parent[key], child[key], vm, key) // 根据不同类型的options调用strats中不同的方法进行合并
	}
	return options
}

strats.props =
	strats.methods =
	strats.inject =
	strats.computed = function(
		parentVal: ? Object,
		childVal : ? Object,
		vm ? : Component,
		key : string
	): ? Object {
		if (!parentVal) return childVal // 如果parentVal没有值，直接返回childVal
		const ret = Object.create(null) // 创建一个第三方对象ret
		extend(ret, parentVal) // extend方法实际是把parentVal的属性复制到ret中
		if (childVal) extend(ret, childVal) // 把childVal的属性复制到ret中
		return ret
	}
strats.provide = mergeDataOrFn

strats.data = function(parentVal, childVal, vm) {
	return mergeDataOrFn(
		parentVal, childVal, vm
	)
};

function mergeDataOrFn(parentVal, childVal, vm) {
	return function mergedInstanceDataFn() {
		var childData = childVal.call(vm, vm) // 执行data挂的函数得到对象
		var parentData = parentVal.call(vm, vm)
		if (childData) {
			return mergeData(childData, parentData) // 将2个对象进行合并

		} else {
			return parentData // 如果没有childData直接返回parentData
		}
	}
}

function mergeData(to, from) {
	if (!from) return to
	var key, toVal, fromVal;
	var keys = Object.keys(from);
	for (var i = 0; i < keys.length; i++) {
		key = keys[i];
		toVal = to[key];
		fromVal = from[key];
		// 如果不存在这个属性，就重新设置
		if (!to.hasOwnProperty(key)) {
			set(to, key, fromVal);
		}
		// 存在相同属性，合并对象
		else if (typeof toVal == "object" && typeof fromVal == "object") {
			mergeData(toVal, fromVal);
		}
	}
	return to
}

function mergeHook(
	parentVal: ? Array < Function > ,
	childVal : ? Function | ? Array < Function >
): ? Array < Function > {
	return childVal ?
		parentVal ?
		parentVal.concat(childVal) :
		Array.isArray(childVal) ?
		childVal : [childVal] : parentVal
}
LIFECYCLE_HOOKS.forEach(hook => {
	strats[hook] = mergeHook
})
// watch
strats.watch = function(
	parentVal,
	childVal,
	vm,
	key
) {
	// work around Firefox's Object.prototype.watch...
	if (parentVal === nativeWatch) {
		parentVal = undefined;
	}
	if (childVal === nativeWatch) {
		childVal = undefined;
	}
	/* istanbul ignore if */
	if (!childVal) {
		return Object.create(parentVal || null)
	} {
		assertObjectType(key, childVal, vm);
	}
	if (!parentVal) {
		return childVal
	}
	var ret = {};
	extend(ret, parentVal);
	for (var key$1 in childVal) {
		var parent = ret[key$1];
		var child = childVal[key$1];
		if (parent && !Array.isArray(parent)) {
			parent = [parent];
		}
		ret[key$1] = parent ?
			parent.concat(child) :
			Array.isArray(child) ? child : [child];
	}
	return ret
};

strats.components =
	strats.directives =
	strats.filters = function mergeAssets(
		parentVal, childVal, vm, key
	) {
		var res = Object.create(parentVal || null);
		if (childVal) {
			for (var key in childVal) {
				res[key] = childVal[key];
			}
		}
		return res
	}

<input type="text" v-model.lazy="value">
<p>{{value}}</p>

<input type="text" v-model.trim="value">

<input v-model.number="age" type="number">

<div @click="shout(2)">
	<button @click.stop="shout(1)">ok</button>
</div>
<!-- 只输出1 -->

<form v-on:submit.prevent="onSubmit"></form>

<div v-on:click.self="doThat">...</div>

<button @click.once="shout(1)">ok</button>

<div @click.capture="shout(1)">
	obj1
	<div @click.capture="shout(2)">
		obj2
		<div @click="shout(3)">
			obj3
			<div @click="shout(4)">
				obj4
			</div>
		</div>
	</div>
</div>
// 输出结构: 1 2 4 3

<!--滚动事件的默认行为(即滚动行为)将会立即触发-->
<!--而不会等待`onScroll`完成  -->
<!--这其中包含`event.preventDefault()`的情况-->
<div v-on:scroll.passive="onScroll">..</div>

<my-component v-on:click.native="doSomething"></my-component>

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout()">

Vue.config.keyCodes.f2 =113

<comp :myMessage.sync="bar"></comp>

this.$emit('update:myMessage',params);

// 父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
<script>
	func(e) {
		this.bar = e;
	}
</script>

// 子组件js
<script>
	func2() {
		this.$emit('update:myMessage', params);
	}
</script>

<input id="uid" title="title1" value="1" :index.prop="index">

<svg :viewBox="viewBox"></svg>

<div id="app"> {{ message }} </div>

const vm = new Vue({
	el: '#app',
	data: {
		message: '原始值'
	}
})

this.message = '修改后的值1'
this.message = '修改后的值2'
this.message = '修改后的值3'

console.log(vm.$el.textContent) // 原始值

for (let i = 0; i < 100000; i++) {
	num = i
}

// 修改数据
vm.message = '修改后的值'
// DOM还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function() {
	// DOM更新了
	console.log(vm.$el.textContent) // 修改后的值
})

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
this.$nextTick(function() {
	console.log(this.$el.textContent) // => '修改后的值'
})

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'

export function nextTick(cb ? : Function, ctx ? : Object) {
	let _resolve;
	// cb回调函数会经统一处理压入callbacks数组
	callbacks.push(() => {
		if (cb) {
			// 给cb回调函数执行加上了try-catch错误处理 
			try {
				cb.call(ctx);
			} catch (e) {
				handleError(e, ctx, 'nextTick');
			}
		} else if (_resolve) {
			_resolve(ctx);
		}
	});
	// 执行异步延迟函数timerFunc
	if (!pending) {
		pending = true;
		timerFunc();
	}
	// 当nextTick没有传入函数参数的时候，返回一个Promise化的调用 
	if (!cb && typeof Promise !== 'undefined') {
		return new Promise(resolve => {
			_resolve = resolve;
		});
	}
}

export let isUsingMicroTask = false
if (typeof Promise !== 'undefined' && isNative(Promise)) {
	// 判断1:是否原生支持Promise
	const p = Promise.resolve()
	timerFunc = () => {
		p.then(flushCallbacks)
		if (isIOS) setTimeout(noop)
	}
	isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
		isNative(MutationObserver) ||
		MutationObserver.toString() === '[object MutationObserverConstructor]'
	)) {
	// 判断2:是否原生支持MutationObserver
	let counter = 1
	const observer = new MutationObserver(flushCallbacks)
	const textNode = document.createTextNode(String(counter))
	observer.observe(textNode, {
		characterData: true
	})
	timerFunc = () => {
		counter = (counter + 1) % 2
		textNode.data = String(counter)
	}
	isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
	// 判断3:是否原生支持setImmediate
	timerFunc = () => {
		setImmediate(flushCallbacks)
	}
} else {
	// 判断4:上面都不行，直接用setTimeout
	timerFunc = () => {
		setTimeout(flushCallbacks, 0)
	}
}

function flushCallbacks() {
	pending = false
	const copies = callbacks.slice(0)
	callbacks.length = 0
	for (let i = 0; i < copies.length; i++) {
		copies[i]()
	}
}

function Vue(options) {
	if (process.env.NODE_ENV !== 'production' &&
		!(this instanceof Vue)
	) {
		warn('Vue is a constructor and should be called with the `new` keyword')
	}
	this._init(options)
}

initMixin(Vue); // 定义_init
stateMixin(Vue); // 定义$set $get $delete $watch等 
eventsMixin(Vue); // 定义事件$on $once $off $emit
lifecycleMixin(Vue);// 定义_update $forceUpdate $destroy
renderMixin(Vue); // 定义_render返回虚拟dom

Vue.prototype._init = function(options ? : Object) {
	const vm: Component = this
	// a uid
	vm._uid = uid++
	let startTag, endTag
	/* istanbul ignore if */
	if (process.env.NODE_ENV !== 'production' && config.performance && mar k) {
		startTag = `vue-perf-start:${vm._uid}`
		endTag = `vue-perf-end:${vm._uid}`
		mark(startTag)
	}
	// a flag to avoid this being observed
	vm._isVue = true
	// merge options
	// 合并属性，判断初始化的是否是组件，这里合并主要是mixins或extends的方法 
	if (options && options._isComponent) {
		// optimize internal component instantiation
		// since dynamic options merging is pretty slow, and none of the
		// internal component options needs special treatment.
		initInternalComponent(vm, options)
	} else { // 合并vue 属性
		vm.$options = mergeOptions(
			resolveConstructorOptions(vm.constructor),
			options || {},
			vm
		)
	}
	/* istanbul ignore else */
	if (process.env.NODE_ENV !== 'production') {
		// 初始化proxy拦截器
		initProxy(vm)
	} else {
		vm._renderProxy = vm
	}
	// expose real self
	vm._self = vm
	// 初始化组件生命周期标志位
	initLifecycle(vm)
	// 初始化组件事件侦听
	initEvents(vm)
	// 初始化渲染方法
	initRender(vm)
	callHook(vm, 'beforeCreate')
	// 初始化依赖注入内容，在初始化data、props之前
	initInjections(vm) // resolve injections before data/props
	// 初始化props/data/method/watch/methods
	initState(vm)
	initProvide(vm) // resolve provide after data/props
	callHook(vm, 'created')
	/* istanbul ignore if */
	if (process.env.NODE_ENV !== 'production' && config.performance && mar k) {
		vm._name = formatComponentName(vm, false)
		mark(endTag)
		measure(`vue ${vm._name} init`, startTag, endTag)
	}
	// 挂载元素
	if (vm.$options.el) {
		vm.$mount(vm.$options.el)
	}
}

export function initState(vm: Component) {
	// 初始化组件的watcher列表
	vm._watchers = []
	const opts = vm.$options
	// 初始化props
	if (opts.props) initProps(vm, opts.props)
	// methods
	if (opts.methods) initMethods(vm, opts.methods)
	if (opts.data) {
		// 初始化data 
		initData(vm)
	} else {
		observe(vm._data = {}, true /* asRootData */ )
	}
	if (opts.computed) initComputed(vm, opts.computed)
	if (opts.watch && opts.watch !== nativeWatch) {
		initWatch(vm, opts.watch)
	}
}

function initData(vm: Component) {
	let data = vm.$options.data
	// 获取到组件上的data
	data = vm._data = typeof data === 'function' ?
		getData(data, vm) :
		data || {}
	if (!isPlainObject(data)) {
		data = {}
		process.env.NODE_ENV !== 'production' && warn(
			'data functions should return an object:\n' +
			'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
			vm
		)
	}
	// proxy data on instance
	const keys = Object.keys(data)
	const props = vm.$options.props
	const methods = vm.$options.methods
	let i = keys.length
	while (i--) {
		const key = keys[i]
		if (process.env.NODE_ENV !== 'production') {
			// 属性名不能与方法名重复
			if (methods && hasOwn(methods, key)) {
				warn(
					`Method "${key}" has already been defined as a data property.`,
					vm
				)
			}
		}
		// 属性名不能与state名称重复
		if (props && hasOwn(props, key)) {
			process.env.NODE_ENV !== 'production' && warn(
				`The data property "${key}" is already declared as a prop. ` +
				`Use prop default value instead.`,
				vm
			)
		} else if (!isReserved(key)) { // 验证key 值的合法性
			// 将_data中的数据挂载到组件vm上，这样就可以通过this.xxx访问到组件上的数据
			proxy(vm, `_data`, key)
		}
	}
	// observe data
	// 响应式监听data是数据的变化
	observe(data, true /* asRootData */ )
}

Vue.prototype.$mount = function(
	el ? : string | Element,
	hydrating ? : boolean
): Component {
	// 获取或查询元素
	el = el && query(el)
	/* istanbul ignore if */
	// vue不允许直接挂载到body或页面文档上
	if (el === document.body || el === document.documentElement) {
		process.env.NODE_ENV !== 'production' && warn(
			`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
		)
		return this
	}
	const options = this.$options
	// resolve template/el and convert to render function
	if (!options.render) {
		let template = options.template
		// 存在template 模板，解析vue模板文件
		if (template) {
			if (typeof template === 'string') {
				if (template.charAt(0) === '#') {
					template = idToTemplate(template)
					/* istanbul ignore if */
					if (process.env.NODE_ENV !== 'production' && !template) {
						warn(
							`Template element not found or is empty: ${options.template}
`,
							this
						)
					}
				}
			} else if (template.nodeType) {
				template = template.innerHTML
			} else {
				if (process.env.NODE_ENV !== 'production') {
					warn('invalid template option:' + template, this)
				}
				return this
			}
		} else if (el) {
			// 通过选择器获取元素内容
			template = getOuterHTML(el)
		}
		if (template) {
			/* istanbul ignore if */
			if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
				mark('compile')
			}
			/**
			 * 1. 将temmplate解析ast tree
			 * 2. 将ast tree转换成render语法字符串
			 * 3. 生成render方法
			 */
			const {
				render,
				staticRenderFns
			} = compileToFunctions(template, {
				outputSourceRange: process.env.NODE_ENV !== 'production',
				shouldDecodeNewlines,
				shouldDecodeNewlinesForHref,
				delimiters: options.delimiters,
				comments: options.comments
			}, this)
			options.render = render
			options.staticRenderFns = staticRenderFns
			/* istanbul ignore if */
			if (process.env.NODE_ENV !== 'production' && config.performance && m ark) {
				mark('compile end')
				measure(`vue ${this._name} compile`, 'compile', 'compile end')
			}
		}
	}
	return mount.call(this, el, hydrating)
}

// public mount method
Vue.prototype.$mount = function(
	el ? : string | Element,
	hydrating ? : boolean
): Component {
	el = el && inBrowser ? query(el) : undefined
	// 渲染组件
	return mountComponent(this, el, hydrating)
}

export function mountComponent(
	vm: Component,
	el: ? Element,
	hydrating ? : boolean
): Component {
	vm.$el = el
	// render
	// render
	if (!vm.$options.render) {
		vm.$options.render = createEmptyVNode
		if (process.env.NODE_ENV !== 'production') {
			/* istanbul ignore if */
			if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
				vm.$options.el || el) {
				warn(
					'You are using the runtime-only build of Vue where the template
					' +
					'compiler is not available. Either pre-compile the templates int
					o ' +
					'render functions, or use the compiler-included build.',
					vm
				)
			} else {
				// vue
				warn(
					'Failed to mount component: template or render function not defi
					ned.
					',
					vm
				)
			}
		}
	}
	// 执行beforeMount钩子
	callHook(vm, 'beforeMount')
	let updateComponent
	/* istanbul ignore if */
	if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
		updateComponent = () => {
			const name = vm._name
			const id = vm._uid
			const startTag = `vue-perf-start:${id}`
			const endTag = `vue-perf-end:${id}`
			mark(startTag)
			const vnode = vm._render()
			mark(endTag)
			measure(`vue ${name} render`, startTag, endTag)
			mark(startTag)
			vm._update(vnode, hydrating)
			mark(endTag)
			measure(`vue ${name} patch`, startTag, endTag)
		}
	} else {
		// 定义更新函数
		updateComponent = () => {
			// 实际调用实在lifeCycleMixin中定义的_update和renderMixin中定义的_render
			vm._update(vm._render(), hydrating)
		}
	}
	// we set this to vm._watcher inside the watcher's constructor
	// since the watcher's initial patch may call $forceUpdate (e.g. insidechild
	// component's mounted hook), which relies on vm._watcher being already defined
	// 监听当前组件状态，当有数据变化时，更新组件
	new Watcher(vm, updateComponent, noop, {
		before() {
			if (vm._isMounted && !vm._isDestroyed) {
				// 数据更新引发的组件更新
				callHook(vm, 'beforeUpdate')
			}
		}
	}, true /* isRenderWatcher */ )
	hydrating = false
	// manually mounted instance, call mounted on self
	// mounted is called for render-created child components in its inserted hook
	if (vm.$vnode == null) {
		vm._isMounted = true
		callHook(vm, 'mounted')
	}
	return vm
}

// 定义vue原型上的render方法
Vue.prototype._render = function(): VNode {
	const vm: Component = this
	// render函数来自于组件的option
	const {
		render,
		_parentVnode
	} = vm.$options
	if (_parentVnode) {
		vm.$scopedSlots = normalizeScopedSlots(
			_parentVnode.data.scopedSlots,
			vm.$slots,
			vm.$scopedSlots
		)
	}
	// set parent vnode. this allows render functions to have access
	// to the data on the placeholder node.
	vm.$vnode = _parentVnode
	// render self
	let vnode
	try {
		// There's no need to maintain a stack because all render fns arecalled
		// separately from one another. Nested component's render fns arecalled
		// when parent component is patched.
		currentRenderingInstance = vm
		// 调用render方法，自己的独特的render方法，传入createElement参数，生成vNode
		vnode = render.call(vm._renderProxy, vm.$createElement)
	} catch (e) {
		handleError(e, vm, `render`)
		// return error render result,
		// or previous vnode to prevent render error causing blank component
		/* istanbul ignore else */
		if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
			try {
				vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
			} catch (e) {
				handleError(e, vm, `renderError`)
				vnode = vm._vnode
			}
		} else {
			vnode = vm._vnode
		}
	} finally {
		currentRenderingInstance = null
	}
	// if the returned array contains only a single node, allow it
	if (Array.isArray(vnode) && vnode.length === 1) {
		vnode = vnode[0]
	}
	// return empty vnode in case the render function errored out
	if (!(vnode instanceof VNode)) {
		if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
			warn(
				'Multiple root nodes returned from render function. Render function ' +
				'should return a single root node.', vm
			)
		}
		vnode = createEmptyVNode()
	}
	// set parent
	vnode.parent = _parentVnode
	return vnode
}

Vue.prototype._update = function(vnode: VNode, hydrating ? : boolean) {
	const vm: Component = this
	const prevEl = vm.$el
	const prevVnode = vm._vnode
	// 设置当前激活的作用域
	const restoreActiveInstance = setActiveInstance(vm)
	vm._vnode = vnode
	// Vue.prototype.__patch__ is injected in entry points
	// based on the rendering backend used.
	if (!prevVnode) {
		// initial render
		// 执行具体的挂载逻辑
		vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly*/ )
	} else {
		// updates
		vm.$el = vm.__patch__(prevVnode, vnode)
	}
	restoreActiveInstance()
	// update __vue__ reference
	if (prevEl) {
		prevEl.__vue__ = null
	}
	if (vm.$el) {
		vm.$el.__vue__ = vm
	}
	// if parent is an HOC, update its $el as well
	if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
		vm.$parent.$el = vm.$el
	}
	// updated hook is called by the scheduler to ensure that children are
	// updated in a parent's updated hook.
}

function patch(oldVnode, vnode, hydrating, removeOnly) {
	if (isUndef(vnode)) { // 没有新节点，直接执行destory钩子函数
		if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
		return
	}
	let isInitialPatch = false
	const insertedVnodeQueue = []
	if (isUndef(oldVnode)) {
		isInitialPatch = true
		createElm(vnode, insertedVnodeQueue) // 没有旧节点，直接用新节点生成dom元素
	} else {
		const isRealElement = isDef(oldVnode.nodeType)
		if (!isRealElement && sameVnode(oldVnode, vnode)) {
			// 判断旧节点和新节点自身一样， 一致执行patchVnode
			patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
		} else {
			// 否则直接销毁及旧节点，根据新节点生成dom元素
			if (isRealElement) {
				if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
					oldVnode.removeAttribute(SSR_ATTR)
					hydrating = true
				}
				if (isTrue(hydrating)) {
					if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
						invokeInsertHook(vnode, insertedVnodeQueue, true)
						return oldVnode
					}
				}
				oldVnode = emptyNodeAt(oldVnode)
			}
			return vnode.elm
		}
	}
}

function patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) {
	// 如果新旧节点一致，什么都不做
	if (oldVnode === vnode) {
		return
	}
	// 让vnode.el引用到现在的真实dom，当el修改时，vnode.el会同步变化
	const elm = vnode.elm = oldVnode.elm
	// 异步占位符
	if (isTrue(oldVnode.isAsyncPlaceholder)) {
		if (isDef(vnode.asyncFactory.resolved)) {
			hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
		} else {
			vnode.isAsyncPlaceholder = true
		}
		return
	}
	// 如果新旧都是静态节点，并且具有相同的key
	// 当vnode是克隆节点或是v-once指令控制的节点时，只需要把oldVnode.elm和oldVnode.child都复制到vnode上
	// 也不用再有其他操作
	if (isTrue(vnode.isStatic) &&
		isTrue(oldVnode.isStatic) &&
		vnode.key === oldVnode.key &&
		(isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
	) {
		vnode.componentInstance = oldVnode.componentInstance
		return
	}
	let i
	const data = vnode.data
	if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
		i(oldVnode, vnode)
	}
	const oldCh = oldVnode.children
	const ch = vnode.children
	if (isDef(data) && isPatchable(vnode)) {
		for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
		if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
	}
	// 如果vnode不是文本节点或者注释节点
	if (isUndef(vnode.text)) {
		// 并且都有子节点
		if (isDef(oldCh) && isDef(ch)) {
			// 并且子节点不完全一致，则调用updateChildren
			if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
			// 如果只有新的vnode 有子节点
		} else if (isDef(ch)) {
			if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
			// elm已经引用了老的dom节点，在老的dom节点上添加子节点
			addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
			// 如果新vnode没有子节点，而vnode有子节点，直接删除老的oldCh
		} else if (isDef(oldCh)) {
			removeVnodes(elm, oldCh, 0, oldCh.length - 1)
			// 如果老节点是文本节点
		} else if (isDef(oldVnode.text)) {
			nodeOps.setTextContent(elm, '')
		}
		// 如果新vnode和老vnode是文本节点或注释节点
		// 但是vnode.text!= oldVnode.text时，只需要更新vnode.elm的文本内容就可以
	} else if (oldVnode.text !== vnode.text) {
		nodeOps.setTextContent(elm, vnode.text)
	}
	if (isDef(data)) {
		if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
	}
}

function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
	let oldStartIdx = 0 // 旧头索引
	let newStartIdx = 0 // 新头索引
	let oldEndIdx = oldCh.length - 1 // 旧尾索引
	let newEndIdx = newCh.length - 1 // 新尾索引
	let oldStartVnode = oldCh[0] // oldVnode的第一个child
	let oldEndVnode = oldCh[oldEndIdx] // oldVnode的最后 一个child
	let newStartVnode = newCh[0] // newVnode的第一个child
	let newEndVnode = newCh[newEndIdx] // newVnode的最后 一个child
	let oldKeyToIdx, idxInOld, vnodeToMove, refElm
	// removeOnly is a special flag used only by <transition-group>
	// to ensure removed elements stay in correct relative positions
	// during leaving transitions
	const canMove = !removeOnly
	// 如果oldStartVnode和oldEndVnode重合，并且新的也都重合了，证明diff完了，循环结束
	while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
		// 如果oldVnode的第一个child不存在
		if (isUndef(oldStartVnode)) {
			// oldStart索引右移
			oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
			// 如果oldVnode的最后一个child不存在
		} else if (isUndef(oldEndVnode)) {
			// oldEnd索引左移
			oldEndVnode = oldCh[--oldEndIdx]
			// oldStartVnode和newStartVnode是同一个节点
		} else if (sameVnode(oldStartVnode, newStartVnode)) {
			// patch oldStartVnode和newStartVnode，索引左移，继续循环
			patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
			oldStartVnode = oldCh[++oldStartIdx]
			newStartVnode = newCh[++newStartIdx]
			// oldEndVnode和newEndVnode是同一个节点
		} else if (sameVnode(oldEndVnode, newEndVnode)) {
			// patch oldEndVnode和newEndVnode，索引右移，继续循环
			patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
			oldEndVnode = oldCh[--oldEndIdx]
			newEndVnode = newCh[--newEndIdx]
			// oldStartVnode和newEndVnode是同一个节点
		} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode movedright
			// patch oldStartVnode和newEndVnode
			patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
			// 如果removeOnly是false，则将oldStartVnode.eml移动到oldEndVnode.elm之后
			canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
			// oldStart索引右移，newEnd索引左移
			oldStartVnode = oldCh[++oldStartIdx]
			newEndVnode = newCh[--newEndIdx]
			// 如果oldEndVnode和newStartVnode是同一个节点
		} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode movedleft
			// patch oldEndVnode和newStartVnode
			patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
			// 如果removeOnly是false，则将oldEndVnode.elm移动到oldStartVnode.elm之前
			canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
			// oldEnd索引左移，newStart索引右移
			oldEndVnode = oldCh[--oldEndIdx]
			newStartVnode = newCh[++newStartIdx]
			// 如果都不匹配
		} else {
			if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
			// 尝试在oldChildren中寻找和newStartVnode的具有相同的key的Vnode
			idxInOld = isDef(newStartVnode.key) ?
				oldKeyToIdx[newStartVnode.key] :
				findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
			// 如果未找到，说明newStartVnode是一个新节点
			if (isUndef(idxInOld)) { // New element
				// 创建一个新Vnode
				createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
				// 如果找到了和newStartVnodej具有相同的key的Vnode，叫vnodeToMove
			} else {
				vnodeToMove = oldCh[idxInOld]
				/* istanbul ignore if */
				if (process.env.NODE_ENV !== 'production' && !vnodeToMove) {
					warn('It seems there are duplicate keys that is causing an update error. ' +
						'Make sure each v-for item has a unique key.'
					)
				}
				// 比较两个具有相同的key 的新节点是否是同一个节点
				// 不设key,newCh和oldCh只会进行头尾两端的相互比较，设key后，除了头尾两端的比较外，还会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom。
				if (sameVnode(vnodeToMove, newStartVnode)) {
					// patch vnodeToMove和newStartVnode
					patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
					// 清除
					oldCh[idxInOld] = undefined
					// 如果remove0nly是false,则将找到的和newStartVnodej具有相同的key的Vnode,叫vnodeToMove.elm
					// 移动到oldStartVnode.elm之前
					canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
					// 如果key相同，但是节点不相同，则创建一个新的节点
				} else {
					// same key but different element. treat as new element
					createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
				}
			}
			// 右移
			newStartVnode = newCh[++newStartIdx]
		}
	}
}

<template>
</template>
<script>
	export default {
		...
	}
</script>
<style>
</style>

<!-- 组件显示的内容 -->
<template id="testComponent">
	<div>component!</div>
</template>
<script>
	Vue.component('componentA', {
		template: '#testComponent'
		template: `<div>component</div>` // 组件内容少可以通过这种形式
	})
</script>

MyPlugin.install = function(Vue, options) {
	// 1. 添加全局方法或property
	Vue.myGlobalMethod = function() {
		// 逻辑...
	}
	// 2. 添加全局资源
	Vue.directive('my-directive', {
		bind(el, binding, vnode, oldVnode) {
			// 逻辑...
		}
		...
	})
	// 3. 注入组件选项
	Vue.mixin({
		created: function() {
				// 逻辑...
			}
			...
	})
	// 4. 添加实例方法
	Vue.prototype.$myMethod = function(methodOptions) {
		// 逻辑...
	}
}

Vue.component('my-component-name', { /* ... */ })

const component1 = {
	...
} // 定义一个组件
export default {
	components: {
		component1 // 局部注册
	}
}

Vue.use(插件名字 ,{ /* ... */} )

app.use(async (ctx, next) => {
	ctx.set('Access-Control-Allow-Origin', '*');
	ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X - Requested - With, yourHeaderFeild ');
	ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS ');
	if (ctx.method == 'OPTIONS') {
		ctx.body = 200;
	} else {
		await next();
	}
})

amodule.exports = {
	devServer: {
		host: '127.0.0.1',
		port: 8084,
		open: true, // vue项目启动时自动打开浏览器
		proxy: {
			'/api': { // '/api'是代理标识，用于告诉node,url前面是/api的就是使用代理的
				target: "http://xxx.xxx.xx.xx:8080", // 目标地址，一般是指后台服务器地址
				changeOrigin: true, // 是否跨域
				pathRewrite: { // pathRewrite的作用是把实际Request Url中的'/api'用""代替
					'^/api': ""
				}
			}
		}
	}
}

axios.defaults.baseURL = '/api'

var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({
	target: 'http://localhost:4000',
	changeOrigin: false
}));
module.exports = app

server {
	listen 80;
	# server_name www.josephxia.com;
	location / {
		root /var/www/html;
		index index.html index.htm;
		try_files $uri $uri/ /index.html;
	}
	location /api {
		proxy_pass http://127.0.0.1:3000;
		proxy_redirect off;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}
}

// 实例化一个指令，但这个指令没有参数
`v-xxx`

// --将值传到指令中
`v-xxx="value"` 

// --将字符串传入到指令中，如`v-html="'<p>内容</p>'"
`v-xxx="'string'"`

// --传参数(arg`),如`v-bind:class="className"
`v-xxx:arg="value"`

// --使用修饰符(`modifier`)
`v-xxx:arg.modifier="value"`

// 注册一个全局自定义指令`v-focus`
Vue.directive('focus', {
	// 当被绑定的元素插入到DOM中时...
	inserted: function(el) {
		// 聚焦元素
		el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
	}
})

directives: {
	focus: {
		// 指令的定义
		inserted: function(el) {
			el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
		}
	}
}

<input v-focus />

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>
	Vue.directive('demo', function(el, binding) {
		console.log(binding.value.color) // "white"
		console.log(binding.value.text) // "hello!"
	})
</script>

<script>
	// 1. 设置v-throttle自定义指令
	Vue.directive('throttle', {
		bind: (el, binding) => {
			let throttleTime = binding.value; // 节流时间
			if (!throttleTime) { // 用户若不设置节流时间，则默认2s
				throttleTime = 2000;
			}
			let cbFun;
			el.addEventListener('click', event => {
				if (!cbFun) { // 第一次执行
					cbFun = setTimeout(() => {
						cbFun = null;
					}, throttleTime);
				} else {
					event && event.stopImmediatePropagation();
				}
			}, true);
		},
	});
</script>

<!-- 2.为button标签设置v-throttle自定义指令 -->
<button @click="sayHello" v-throttle>提交</button>

const LazyLoad = {
	// install方法
	install(Vue, options) {
		// 代替图片的loading图
		let defaultSrc = options.default;
		Vue.directive('lazy', {
			bind(el, binding) {
				LazyLoad.init(el, binding.value, defaultSrc);
			},
			inserted(el) {
				// 兼容处理
				if ('IntersectionObserver' in window) {
					LazyLoad.observe(el);
				} else {
					LazyLoad.listenerScroll(el);
				}

			},
		})
	},
	// 初始化
	init(el, val, def) {
		// data-src储存真实src
		el.setAttribute('data-src', val);
		// 设置src为loading图
		el.setAttribute('src', def);
	},
	// 利用IntersectionObserver监听el
	observe(el) {
		let io = new IntersectionObserver(entries => {
			let realSrc = el.dataset.src;
			if (entries[0].isIntersecting) {
				if (realSrc) {
					el.src = realSrc;
					el.removeAttribute('data-src');
				}
			}
		});
		io.observe(el);
	},
	// 监听scroll事件
	listenerScroll(el) {
		let handler = LazyLoad.throttle(LazyLoad.load, 300);
		LazyLoad.load(el);
		window.addEventListener('scroll', () => {
			handler(el);
		});
	},
	// 加载真实图片
	load(el) {
		let windowHeight = document.documentElement.clientHeight
		let elTop = el.getBoundingClientRect().top;
		let elBtm = el.getBoundingClientRect().bottom;
		let realSrc = el.dataset.src;
		if (elTop - windowHeight < 0 && elBtm > 0) {
			if (realSrc) {
				el.src = realSrc;
				el.removeAttribute('data-src');
			}
		}
	},
	// 节流
	throttle(fn, delay) {
		let timer;
		let prevTime;
		return function(...args) {
			let currTime = Date.now();
			let context = this;
			if (!prevTime) prevTime = currTime;
			clearTimeout(timer);

			if (currTime - prevTime > delay) {
				prevTime = currTime;
				fn.apply(context, args);
				clearTimeout(timer);
				return;
			}
			timer = setTimeout(function() {
				prevTime = Date.now();
				timer = null;
				fn.apply(context, args);
			}, delay);
		}
	}
}
export default LazyLoad;

import {
	Message
} from 'ant-design-vue';
const vCopy = { //
	/*
	 * bind：钩子函数，第一次绑定时调用，可以在这里做初始化设置
     * el：作用的dom对象
     * value：传给指令的值，也就是我们要copy的值
	*/
	bind(el, {
		value
	}) {
		el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
		el.handler = () => {
			if (!el.$value) {
				// 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue的提示，你们随意 
				Message.warning('无复制内容');
				return;
			}
			// 动态创建textarea标签
			const textarea = document.createElement('textarea');
			// 将该textarea设为readonly防止下自动唤起键盘，同时将textarea移出可视区域
			textarea.readOnly = 'readonly';
			textarea.style.position = 'absolute';
			textarea.style.left = '-9999px';
			// 将要copy的值赋给textarea标签的value属性
			textarea.value = el.$value;
			// 将textarea插入到body中
			document.body.appendChild(textarea);
			// 选中值并复制
			textarea.select();
			// textarea.setSelectionRange(0, textarea.value.length);
			const result = document.execCommand('Copy');
			if (result) {
				Message.success('复制成功');
			}
			document.body.removeChild(textarea);
		};
		// 绑定点击事件，就是所谓的一键copy啦
		el.addEventListener('click', el.handler);
	},
	// 当传进来的值更新的时候触发
	componentUpdated(el, {
		value
	}) {
		el.$value = value;
	},
	// 指令与元素解绑的时候，移除事件绑定
	unbind(el) {
		el.removeEventListener('click', el.handler);
	},
};
export default vCopy;

<!--在双花括号中-->
{{ message | capitalize }}

<!--在‘v-bind`中-->
<div v-bind:id="rawId | formatId"></div>

filters: {
	capitalize: function(value) {
		if (!value) return ''
		value = value.toString()
		return value.charAt(0).toUpperCase() + value.slice(1)
	}
}

Vue.filter('capitalize', function(value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
	// ...
})

{{ message | filterA | filterB }}

{{ message | filterA('arg1', arg2) }}

<div id="app">
	<p>{{ msg | msgFormat('疯狂','--')}}</p>
</div>
<script>
	// 定义一个Vue全局的过滤器，名字叫做msgFormat
	Vue.filter('msgFormat', function(msg, arg, arg2) {
		// 字符串的replace方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则
		return msg.replace(/单纯/g, arg + arg2)
	})
</script>

Vue.filter('toThousandFilter', function(value) {
	if (!value) return ''
	value = value.toString()
	return replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')
})

{{ message | capitalize }}

_s(_f('filterFormat')(message))

// 变为
this.$options.filters['filterFormat'](message) // message为参数

import {
	indentity,
	resolveAsset
} from 'core/util/index'
export function resolveFilter(id) {
	return resolveAsset(this.$options, 'filters', id, true) || identity
}

export function resolveAsset(options, type, id, warnMissing) { // 因为我们找的是过滤器，所以在resolveFilter函数中调用时type的值直接给的'filters',实际这个函数还可以拿到其他很多东西
	if (typeof id !== 'string') { // 判断传递的过滤器id是不是字符串，不是则直接返回
		return
	}
	const assets = options[type] // 
	// 接下来的逻辑便是判断id是否在assets中存在，即进行匹配
	if (hasOwn(assets, id)) return assets[id] // 如找到，直接返回过滤器
	// 没有找到，代码继续执行
	const camelizedId = camelize(id) // 万一你是驼峰的呢
	if (hasOwn(assets, camelizedId)) return assets[camelizedId]
	// 没找到，继续执行
	const PascalCaseId = capitalize(camelizedId) // 万一你是首字母大写的驼峰呢
	if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]
	// 如果还是没找到，则检查原型链(即访问属性)
	const result = assets[id] || assets[camelizedId] || assets[PascalCaseId]
	// 如果依然没找到，则在非生产环境的控制台打印警告
	if (process.env.NODE_ENV !== 'production' && warnMissing && !result) {
		warn('Failed to resolve ' + type.slice(0, -1) + ': ' + id, options)
	}
	// 无论是否找到，都返回查找结果
	return result
}

function toString(value) {
	return value == null ?
		'' :
		typeof value === 'object' ?
		JSON.stringify(value, null, 2) // JSON.stringify()第三个参数可用来控制字符串里面的间距
		: String(value)
}

function parseFilters(filter) {
	let filters = filter.split('|')
	let expression = filters.shift().trim() // shift()删除数组第一个元素并将其返回，该方法会更改原数组
	let i
	if (filters) {
		for (i = 0; i < filters.length; i++) {
			experssion = warpFilter(expression, filters[i].trim()) // 这里传进去的expression实际上是管道符号前面的字符串，即过滤器的第一个参数 
		}
	}
	return expression
}
// warpFilter函数实现
function warpFilter(exp, filter) {
	// 首先判断过滤器是否有其他参数
	const i = filter.indexof('(')
	if (i < 0) { // 不含其他参数，直接进行过滤器表达式字符串的拼接
		return `_f("${filter}")(${exp})`
	} else {
		const name = filter.slice(0, i) // 过滤器名称
		const args = filter.slice(i + 1) // 参数，但还多了‘)’
		return `_f('${name}')(${exp},${args}` // 注意这一步少给了一个‘)’
	}
}

<template id="element-details-template">
	<slot name="element-name">Slot template</slot>
</template>
<element-details>
	<span slot="element-name">1</span>
</element-details>
<element-details>
	<span slot="element-name">2</span>
</element-details>

customElements.define('element-details',
	class extends HTMLElement {
		constructor() {
			super();
			const template = document
				.getElementById('element-details-template')
				.content;
			const shadowRoot = this.attachShadow({
					mode: 'open'
				})
				.appendChild(template.cloneNode(true));
		}
	})

<template>
	<slot>
		<p>插槽后备的内容</p>
	</slot>
</template>

<Child>
	<div>默认插槽</div>
</Child>

<template>
	<slot>插槽后备的内容</slot>
	<slot name="content">插槽后备的内容</slot>
</template>

<child>
	<template v-slot:default>具名插槽</template>
	<!--具名插槽用插槽名做参数-->
	<template v-slot:content>内容...</template>
</child>

<template>
	<slot name="footer" testProps="子组件的值">
		<h3>没传footer插槽</h3>
	</slot>
</template>

<child>
	<!--把v-slot的值指定为作用域上下文对象-->
	<template v-slot:default="slotProps">
		来自子组件数据：{{slotProps.testProps}}
	</template>
	<template #default="slotProps">
		来自子组件数据：{{slotProps.testProps}}
	</template>
</child>

Vue.component('button-counter', {
	template: '<div><slot>我是默认内容</slot></div>'
})

new Vue({
	el: '#app',
	template: '<button-counter><span>我是slot传入内容</span></button-counter>',
	components: {
		buttonCounter
	}
})

(function anonymous() {
	with(this) {
		return _c('div', [_t("default", [_v("我是默认内容")])], 2)
	}
})

function renderSlot(
	name,
	fallback,
	props,
	bindObject
) {
	// 得到渲染插槽内容的函数
	var scopedSlotFn = this.$scopedSlots[name];
	var nodes;
	// 如果存在插槽渲染函数，则执行插槽渲染函数，生成nodes节点返回
	// 否则使用默认值
	nodes = scopedSlotFn(props) || fallback;
	return nodes;
}

function initRender(vm) {
	...
	vm.$slots = resolveSlots(options._renderChildren, renderContext);
	...
}

function resolveSlots(
	children,
	context
) {
	if (!children || !children.length) {
		return {}
	}
	var slots = {};
	for (var i = 0, l = children.length; i < l; i++) {
		var child = children[i];
		var data = child.data;
		// remove slot attribute if the node is resolved as a Vue slot node
		if (data && data.attrs && data.attrs.slot) {
			delete data.attrs.slot;
		}
		// named slots should only be respected if the vnode was rendered in the
		// same context.
		if ((child.context === context || child.fnContext === context) &&
			data && data.slot != null
		) {
			// 如果slot存在(slot="header")则拿对应的值作为key
			var name = data.slot;
			var slot = (slots[name] || (slots[name] = []));
			// 如果是tempalte元素 则把template的children添加进数组中，这也就是为什么 你写的template标签并不会渲染成另一个标签到页面
			if (child.tag === 'template') {
				slot.push.apply(slot, child.children || []);
			} else {
				slot.push(child);
			}
		} else {
			// 如果没有就默认是default
			(slots.default || (slots.default = [])).push(child);
		}
	}
	// ignore slots that contains only whitespace
	for (var name$1 in slots) {
		if (slots[name$1].every(isWhitespace)) {
			delete slots[name$1];
		}
	}
	return slots
}

vm.$scopedSlots = normalizeScopedSlots(
	_parentVnode.data.scopedSlots,
	vm.$slots,
	vm.$scopedSlots
);

<div id="app">
	<p class="p">节点内容</p>
	<h3>{{ foo }}</h3>
</div>

const app = new Vue({
	el: "#app",
	data: {
		foo: "foo"
	}
})

(function anonymous() {
	with(this) {
		return _c('div', {
			attrs: {
				"id": "app"
			}
		}, [_c('p', {
			staticClass: "p"
		}, [_v("节点内容")]), _v(" "), _c('h3', [_v(_s(foo))])])
	}
})

export default class VNode {
	tag: string | void;
	data: VNodeData | void;
	children: ?Array<VNode>;
	text: string | void;
	elm: Node | void;
	ns: string | void;
	context: Component | void; // rendered in this component's scope
	functionalContext: Component | void; // only for functional component root nodes
	key: string | number | void;
	componentOptions: VNodeComponentOptions | void;
	componentInstance: Component | void; // component instance
	parent: VNode | void; // component placeholder node
	raw: boolean; // contains raw HTML? (server only)
	isStatic: boolean; // hoisted static node
	isRootInsert: boolean; // necessary for enter transition check
	isComment: boolean; // empty comment placeholder?
	isCloned: boolean; // is a cloned node?
	isOnce: boolean; // is a v-once node?
	constructor(tag?: string, data?: VNodeData, children?: ?Array<VNode>, text?: string, elm?: Node, context?: Component, componentOptions?: VNodeComponentOptions) {
		/* 当前节点的标签名 */
		this.tag = tag;
		/* 当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息 */
		this.data = data;
		/* 当前节点的子节点，是一个数组 */
		this.children = children;
		/* 当前节点的文本 */
		this.text = text;
		/* 当前虚拟节点对应的真实dom节点 */
		this.elm = elm;
		/* 当前节点的名字空间 */
		this.ns = undefined;
		/* 编译作用域 */
		this.context = context;
		/* 函数化组件作用域 */
		this.functionalContext = undefined;
		/* 节点的key属性，被当作节点的标志，用以优化 */
		this.key = data && data.key;
		/* 组件的option选项 */
		this.componentOptions = componentOptions;
		/* 当前节点对应的组件的实例 */
		this.componentInstance = undefined;
		/* 当前节点的父节点 */
		this.parent = undefined;
		/* 简而言之就是是否为原生HTML 或只是普通文本，innerHTML的时候为true,textContent的时候为false */
		this.raw = false;
		/* 静态节点标志 */
		this.isStatic = false;
		/* 是否作为跟节点插入 */
		this.isRootInsert = true;
		/* 是否为注释节点 */
		this.isComment = false;
		/* 是否为克隆节点 */
		this.isCloned = false;
		/* 是否有v-once指令 */
		this.isOnce = false;
	}
	// DEPRECATED: alias for componentInstance for backwards compat.
	/* istanbul ignore next https://github.com/answershuto/learnVue*/
	get child(): Component | void {
		return this.componentInstance;
	}
}

export function createElement(context: Component, tag: any, data: any, children: any, normalizationType: any, alwaysNormalize: boolean): VNode | Array<VNode> {
	if (Array.isArray(data) || isPrimitive(data)) {
		normalizationType = children;
		children = data;
		data = undefined;
	}
	if (isTrue(alwaysNormalize)) {
		normalizationType = ALWAYS_NORMALIZE;
	}
	return _createElement(context, tag, data, children, normalizationType);
}

export function _createElement(
	context: Component,
	tag ? : string | Class < Component > | Function | Object,
	data ? : VNodeData,
	children ? : any,
	normalizationType ? : number
): VNode | Array < VNode > {
	if (isDef(data) && isDef((data: any).__ob__)) {
		process.env.NODE_ENV !== 'production' && warn(
			`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
			'Always create fresh vnode data objects in each render!', context
		)
		return createEmptyVNode()
	}
	// object syntax in v-bind
	if (isDef(data) && isDef(data.is)) {
		tag = data.is
	}
	if (!tag) {
		// in case of component :is set to falsy value
		return createEmptyVNode()
	}
	...
	// support single function children as default scoped slot
	if (Array.isArray(children) &&
		typeof children[0] === 'function'
	) {
		data = data || {}
		data.scopedSlots = {
			default: children[0]
		}
		children.length = 0
	}
	if (normalizationType === ALWAYS_NORMALIZE) {
		children = normalizeChildren(children)
	} else if ( === SIMPLE_NORMALIZE) {
		children = simpleNormalizeChildren(children)
	}
	// 创建VNode
	...
}

if (normalizationType === ALWAYS_NORMALIZE) {
	children = normalizeChildren(children)
} else if ( === SIMPLE_NORMALIZE) {
	children = simpleNormalizeChildren(children)
}

let vnode, ns
// 对tag进行判断
if (typeof tag === 'string') {
	let Ctor
	ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
	if (config.isReservedTag(tag)) {
		// 如果是内置的节点，则直接创建一个普通VNode
		vnode = new VNode(
			config.parsePlatformTagName(tag), data, children,
			undefined, undefined, context
		)
	} else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
		// component
		// 如果是component类型，则会通过createComponent创建VNode节点
		vnode = createComponent(Ctor, data, context, children, tag)
	} else {
		vnode = new VNode(
			tag, data, children,
			undefined, undefined, context
		)
	}
} else {
	// direct component options / constructor
	vnode = createComponent(tag, data, context, children)
}

export function createComponent(
	Ctor: Class<Component> | Function | Object | void, 
	data: ?VNodeData, 
	context: Component, 
	children: ?Array<VNode>, 
	tag?: string
): VNode | Array<VNode> | void {
	if (isUndef(Ctor)) {
		return;
	}
	// 构建子类构造函数
	const baseCtor = context.$options._base;
	// plain options object: turn it into a constructor
	if (isObject(Ctor)) {
		Ctor = baseCtor.extend(Ctor);
	}
	// if at this stage it's not a constructor or an async component factory,
	// reject.
	if (typeof Ctor !== "function") {
		if (process.env.NODE_ENV !== "production") {
			warn(`Invalid Component definition: ${String(Ctor)}`, context);
		}
		return;
	}
	// async component
	let asyncFactory;
	if (isUndef(Ctor.cid)) {
		asyncFactory = Ctor;
		Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context);
		if (Ctor === undefined) {
			return createAsyncPlaceholder(asyncFactory, data, context, children, tag);
		}
	}
	data = data || {};
	// resolve constructor options in case global mixins are applied after
	// component constructor creation
	resolveConstructorOptions(Ctor);
	// transform component v-model data into props & events
	if (isDef(data.model)) {
		transformModel(Ctor.options, data);
	}
	// extract props
	const propsData = extractPropsFromVNodeData(data, Ctor, tag);
	// functional component
	if (isTrue(Ctor.options.functional)) {
		return createFunctionalComponent(Ctor, propsData, data, context, children);
	}
	// extract listeners, since these needs to be treated as
	// child component listeners instead of DOM listeners
	const listeners = data.on;
	// replace with listeners with .native modifier
	// so it gets processed during parent component patch.
	data.on = data.nativeOn;
	if (isTrue(Ctor.options.abstract)) {
		const slot = data.slot;
		data = {};
		if (slot) {
			data.slot = slot;
		}
	}
	// 安装组件钩子函数，把钩子函数合并到data.hook中
	installComponentHooks(data);
	// 实例化一个VNode返回。组件的VNode 是没有children的
	const name = Ctor.options.name || tag;
	const vnode = new VNode(`vue-component-${Ctor.cid}${name ? `-${name}` : ""}`, data, undefined, undefined, undefined, context, {Ctor, propsData, listeners, tag, children}, asyncFactory);
	if (__WEEX__ && isRecyclableComponent(vnode)) {
		return renderRecyclableComponentTemplate(vnode);
	}
	return vnode;
}

// 项目中安装
npm install axios --S
// cdn 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

import axios from 'axios'

axios({
	url: 'xxx', // 设置请求的地址
	method: "GET", // 设置请求方法
	params: { // get请求使用params进行参数凭借，如果是post请求用data
		type: '',
		page: 1
	}
}).then(res => {
	// res为后端返回的数据
	console.log(res);
})

function getUserAccount() {
	return axios.get('/user/12345');
}

function getUserPermissions() {
	return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
	.then(axios.spread(function(res1, res2) {
		// res1第一个请求的返回的内容，res2第二个请求返回的内容
		// 两个请求都执行完成才会执行
	}));

axios('http://localhost:3000/data', {
		// 配置代码
		method: 'GET',
		timeout: 1000,
		withCredentials: true,
		headers: {
			'Content-Type': 'application/json',
			Authorization: 'xxx',
		},
		transformRequest: [function(data, headers) {
			return data;
		}],
		// 其他请求配置...
	})
	.then((data) => {
		// todo: 真正业务逻辑代码
		console.log(data);
	}, (err) => {
		// 错误处理代码
		if (err.response.status === 401) {
			// handle authorization error
		}
		if (err.response.status === 403) {
			// handle server forbidden error
		}
		// 其他错误处理.....
		console.log(err);
	});

if (process.env.NODE_ENV === 'development') {
	axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
	axios.defaults.baseURL = 'http://prod.xxx.com'
}

devServer: {
	proxy: {
		'/proxyApi': {
			target: 'http://dev.xxx.com',
			changeOrigin: true,
			pathRewrite: {
				'/proxyApi': ''
			}
		}
	}
}

const service = axios.create({
	...
	timeout: 30000, // 请求30s超时
	headers: {
		get: {
			'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
			// 在开发中， 一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
		},
		post: {
			'Content-Type': 'application/json;charset=utf-8'
			// 在开发中， 一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
		}
	},
})

// get请求
export function httpGet({
	url,
	params = {}
}) {
	return new Promise((resolve, reject) => {
		axios.get(url, {
			params
		}).then((res) => {
			resolve(res.data)
		}).catch(err => {
			reject(err)
		})
	})
}
// post
// post请求
export function httpPost({
	url,
	data = {},
	params = {}
}) {
	return new Promise((resolve, reject) => {
		axios({
			url,
			method: 'post',
			transformRequest: [function(data) {
				let ret = ''
				for (let it in data) {
					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
				}
				return ret
			}],
			// 发送的数据
			data,
			// url参数
			params
		}).then(res => {
			resolve(res.data)
		})
	})
}

import {
	httpGet,
	httpPost
} from './http'
export const getorglist = (params = {}) => httpGet({
	url: 'apps/api/org/list',
	params
})

// .vue
import {
	getorglist
} from '@/assets/js/api'
getorglist({
	id: 200
}).then(res => {
	console.log(res)
})

// 请求拦截器
axios.interceptors.request.use(
	config => {
		// 每次发送请求之前判断是否存在token
		// 如果存在，则统一在http请求的header都加上token,这样后台根据token判断你的登录 情况，此处token一般是用户完成登录后储存到localstorage里的
		token && (config.headers.Authorization = token)
		return config
	},
	error => {
		return Promise.error(error)
	})

// 响应拦截器
axios.interceptors.response.use(response => {
	// 如果返回的状态码为200,说明接口请求成功，可以正常拿到数据
	// 否则的话抛出错误
	if (response.status === 200) {
		if (response.data.code === 511) {
			// 未授权调取授权接口
		} else if (response.data.code === 510) {
			// 未登录跳转登录页
		} else {
			return Promise.resolve(response)
		}
	} else {
		return Promise.reject(response)
	}
}, error => {
	// 我们可以在这里对异常状态作统一处理
	if (error.response.status) {
		// 处理请求失败的情况
		// 对不同返回码对相应处理
		return Promise.reject(error.response)
	}
})

apiClient.interceptors.response.use(
	response => {
		return response;
	},
	error => {
		if (error.response.status == 401) {
			router.push({
				name: "Login"
			});
		} else {
			message.error("出错了");
			return Promise.reject(error);
		}
	}
);

Vue.config.errorHandler = function(err, vm, info) {
	// handle error
	// `info`是Vue特定的错误信息，比如错误所在的生命周期钩子 
	// 只在2.2.0+可用 
}

(err: Error, vm: Component, info: string) => ?boolean

Vue.component('cat', {
	template: `
	 <div>
		<h1>Cat: </h1>
		<slot></slot>
	 </div>`,
	props: {
		name: {
			required: true,
			type: String
		}
	},
	errorCaptured(err, vm, info) {
		console.log(`cat EC: ${err.toString()}\ninfo: ${info}`);
		return false;
	}
});

Vue.component('kitten', {
	template: '<div><h1>Kitten: {{ dontexist() }}</h1></div>',
	props: {
		name: {
			required: true,
			type: String
		}
	}
});

<div id="app" v-cloak>
	<cat name="my cat">
		<kitten></kitten>
	</cat>
</div>

cat EC: TypeError: dontexist is not a function
info: render

// Vue全局配置，也就是上面的Vue.config
import config from "../config";
import {warn} from "./debug";
// 判断环境
import {inBrowser, inWeex} from "./env";
// 判断是否是Promise,通过val.then === 'function' && val.catch === 'function', val === null && val !== undefined
import {isPromise} from "shared/util";
// 当错误函数处理错误时，停用deps跟踪以避免可能出现的infinite rendering
// 解决以下出现的问题https://github.com/vuejs/vuex/issues/1505的问题
import {pushTarget, popTarget} from "../observer/dep";
export function handleError(err: Error, vm: any, info: string) {
	// Deactivate deps tracking while processing error handler to avoid possible infinite rendering.
	pushTarget();
	try {
		// vm指当前报错的组件实例
		if (vm) {
			let cur = vm;
			// 首先获取到报错的组件，之后递归查找当前组件的父组件，依次调用errorCaptured方法。
			// 在遍历调用完所有errorCaptured方法、或errorCaptured方法有报错时，调用globalHandleError方
			while ((cur = cur.$parent)) {
				const hooks = cur.$options.errorCaptured;
				// 判断是否存在errorCaptured钩子函数
				if (hooks) {
					// 选项合并的策略，钩子函数会被保存在一个数组中
					for (let i = 0; i < hooks.length; i++) {
						// 如果errorCaptured钩子执行自身抛出了错误
						// 则用try{}catch{}捕获错误，将这个新错误和原本被捕获的 错误都会发送给全局的config.errorHandler
						// 调用globalHandleError方法
						try {
							// 当前errorCaptured执行，根据返回是否是false值
							// 是false,capture =true,阻止其它任何会被这个 错误唤起的errorCaptured钩子和全局的config.errorHandler
							// 是true capture =fale,组件的继承或父级从属链路中存在的多个errorCaptured钩子，会被相同的错误逐个唤起
							// 调用对应的钩子函数，处理错误
							const capture = hooks[i].call(cur, err, vm, info) === false;
							if (capture) return;
						} catch (e) {
							globalHandleError(e, cur, "errorCaptured hook");
						}
					}
				}
			}
		}
		// 除非禁止错误向上传播，否则都会调用全局的错误处理函数
		globalHandleError(err, vm, info);
	} finally {
		popTarget();
	}
}
// 异步错误处理函数
export function invokeWithErrorHandling(handler: Function, context: any, args: null | any[], vm: any, info: string) {
	let res;
	try {
		// 根据参数选择不同的handle 执行方式
		res = args ? handler.apply(context, args) : handler.call(context);
		// handle返回结果存在
		// res._isVue an flag to avoid this being observed，如果传入值的_isVue为ture时(即传入的值是Vue实例本身)不会新建observer实例
		// isPromise(res)判断val.then === 'function' && val.catch === 'function', val === null && val !== undefined
		// !res._handled _handle是Promise实例的内部变量之一，默认是false，代表onFulfilled,onRejected是否被处理
		if (res && !res._isVue && isPromise(res) && !res._handled) {
			res.catch((e) => handleError(e, vm, info + ` (Promise/async)`));
			// avoid catch triggering multiple times when nestedcalls
			// 避免嵌套调用时catch 多次的触发
			res._handled = true;
		}
	} catch (e) {
		// 处理执行错误
		handleError(e, vm, info);
	}
	return res;
}
// 全局错误处理
function globalHandleError(err, vm, info) {
	// 获取全局配置，判断是否设置处理函数，默认undefined
	// 已配置
	if (config.errorHandler) {
		// try{}catch{}住全局错误处理函数
		try {
			// 执行设置的全局错误处理函数， handle error 想干啥就干啥
			return config.errorHandler.call(null, err, vm, info);
		} catch (e) {
			// 如果开发者在errorHandler函数中手动抛出同样错误信息throw err
			// 判断err信息是否相等，避免log两次
			// 如果抛出新的错误信息throw err Error('你好毒'),将会一起log输出
			if (e !== err) {
				logError(e, null, "config.errorHandler");
			}
		}
	}
	// 未配置常规log 输出
	logError(err, vm, info);
}
// 错误输出函数
function logError(err, vm, info) {
	if (process.env.NODE_ENV !== "production") {
		warn(`Error in ${info}: "${err.toString()}"`, vm);
	}
	/* istanbul ignore else */
	if ((inBrowser || inWeex) && typeof console !== "undefined") {
		console.error(err);
	} else {
		throw err;
	}
}

import axios from 'axios';

axios(config) // 直接传入配置
axios(url[, config]) // 传入url和配置
axios[method](url[, option]) // 直接调用请求方式方法，传入url和配置
axios[method](url[, data[, option]]) // 直接调用请求方式方法，传入data、url和配置
axios.request(option) // 调用request方法
const axiosInstance = axios.create(config)
// axiosInstance也具有以上axios的能力
axios.all([axiosInstance1, axiosInstance2]).then(axios.spread(response1, response2))
// 调用all和传入spread回调

axios.interceptors.request.use(function(config) {
	// 这里写发送请求前处理的代码
	return config;
}, function(error) {
	// 这里写发送请求错误相关的代码
	return Promise.reject(error);
});

axios.interceptors.response.use(function(response) {
	// 这里写得到响应数据后处理的代码
	return response;
}, function(error) {
	// 这里写得到错误响应处理的代码
	return Promise.reject(error);
});

// 方式一
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('xxxx', {
	cancelToken: source.token
})
// 取消请求(请求原因是可选的)
source.cancel('主动取消请求');

// 方式二
const CancelToken = axios.CancelToken;
let cancel;
axios.get('xxxx', {
	cancelToken: new CancelToken(function executor(c) {
		cancel = c;
	})
});
cancel('主动取消请求');

class Axios {
	constructor() {}
	request(config) {
		return new Promise(resolve => {
			const {
				url = '', method = 'get', data = {}
			} = config;
			// 发送ajax请求
			const xhr = new XMLHttpRequest();
			xhr.open(method, url, true);
			xhr.onload = function() {
				console.log(xhr.responseText)
				resolve(xhr.responseText);
			}
			xhr.send(data);
		})
	}
}

// 最终导出axios的方法，即实例的request方法
function CreateAxiosFn() {
	let axios = new Axios();
	let req = axios.request.bind(axios);
	return req;
}
// 得到最后的全局变量axios
let axios = CreateAxiosFn();

// 定义get,post...方法，挂在到Axios原型上
const methodsArr = ['get', 'delete', 'head', 'options', 'put', 'patch', 'post'];
methodsArr.forEach(met => {
	Axios.prototype[met] = function() {
		console.log('执行'+met+'方法');
		// 处理单个方法
		if (['get', 'delete', 'head', 'options'].includes(met)) { // 2个参数(url[,config])
			return this.request({
				method: met,
				url: arguments[0],
				...arguments[1] || {}
			})
		} else { // 3个参数(url[,data[,config]])
			return this.request({
				method: met,
				url: arguments[0],
				data: arguments[1] || {},
				...arguments[2] || {}
			})
		}
	}
})

const utils = {
	extend(a, b, context) {
		for (let key in b) {
			if (b.hasOwnProperty(key)) {
				if (typeof b[key] === 'function') {
					a[key] = b[key].bind(context);
				} else {
					a[key] = b[key]
				}
			}
		}
	}
}

function CreateAxiosFn() {
	let axios = new Axios();
	let req = axios.request.bind(axios);
	// 增加代码
	utils.extend(req, Axios.prototype, axios)

	return req;
}

class InterceptorsManage {
	constructor() {
		this.handlers = [];
	}
	use(fullfield, rejected) {
		this.handlers.push({
			fullfield,
			rejected
		})
	}
}

class Axios {
	constructor() {
		// 新增代码
		this.interceptors = {
			request: new InterceptorsManage,
			response: new InterceptorsManage
		}
	}
	request(config) {
		...
	}
}

function CreateAxiosFn() {
	let axios = new Axios();

	let req = axios.request.bind(axios);
	// 混入方法，处理axios的request方法，使之拥有get,post...方法
	utils.extend(req, Axios.prototype, axios)
	// 新增代码
	utils.extend(req, axios)
	return req;
}

request(config) {
	this.sendAjax(config)
}
sendAjax(config) {
	return new Promise(resolve => {
		const {
			url = '', method = 'get', data = {}
		} = config;
		// 发送ajax请求
		console.log(config);
		const xhr = new XMLHttpRequest();
		xhr.open(method, url, true);
		xhr.onload = function() {
			console.log(xhr.responseText)
			resolve(xhr.responseText);
		};
		xhr.send(data);
	})
}

request(config) {
	// 拦截器和请求组装队列
	let chain = [this.sendAjax.bind(this), undefined] // 成对出现的，失败回调暂时不处理
	
	// 请求拦截
	this.interceptors.request.handlers.forEach(interceptor => {
		chain.unshift(interceptor.fullfield, interceptor.rejected)
	})

	// 响应拦截
	this.interceptors.response.handlers.forEach(interceptor => {
		chain.push(interceptor.fullfield, interceptor.rejected)
	})

	// 执行队列，每次执行一对，并给promise赋最新的值
	let promise = Promise.resolve(config);
	while (chain.length > 0) {
		promise = promise.then(chain.shift(), chain.shift())
	}
	return promise;
}

function createInstance(defaultConfig) {
	var context = new Axios(defaultConfig);
	// instance指向了request方法，且上下文指向context,所以可以直接以instance(option)方式调用
	// Axios.prototype.request内对第一个参数的数据类型判断，使我们能够以instance(url,option)方式调用
	var instance = bind(Axios.prototype.request, context);
	// 把Axios.prototype上的方法扩展到instance对象上
	// 并指定上下文为context,这样执行Axios原型链上的方法时，this会指向context
	utils.extend(instance, Axios.prototype, context);
	// Copy context to instance
	// 把context对象上的自身属性和方法扩展到instance上
	// 注：因为extend内部使用的forEach方法对对象做for in遍历时，只遍历对象本身的属性，而不会遍历原型链上的属性
	// 这样，instance就有了defaults、interceptors属性
	utils.extend(instance, context);
	return instance;
}
// Create the default instance to be exported创建一个由默认配置生成的axios实例
var axios = createInstance(defaults);
// Factory for creating new instances扩展axios.create工厂函数，内部也是crea teInstance
teInstance
axios.create = function create(instanceConfig) {
	return createInstance(mergeConfig(axios.defaults, instanceConfig));
};
// Expose all/spread
axios.all = function all(promises) {
	return Promise.all(promises);
};
axios.spread = function spread(callback) {
	return function wrap(arr) {
		return callback.apply(null, arr);
	};
};
module.exports = axios;

Axios.prototype.request = function request(config) {
	// Allow for axios('example/url'[, config]) a la fetch API
	// 判断config参数是否是字符串，如果是则认为第一个参数是URL,第二个参数是真正的config
	if (typeof config === 'string') {
		config = arguments[1] || {};
		// 把url放置到config对象中，便于之后的mergeConfig
		config.url = arguments[0];
	} else {
		// 如果config参数是否是字符串，则整体都当做config
		config = config || {};
	}
	// 合并默认配置和传入的配置
	config = mergeConfig(this.defaults, config);
	// 设置请求方法
	config.method = config.method ? config.method.toLowerCase() : 'get';
	/*
	something... 此部分会在后续拦截器单独讲述
	*/
};
// 在Axios原型上挂载'delete','get','head','options'且不传参的请求方法实现内部也是request
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
	Axios.prototype[method] = function(url, config) {
		return this.request(utils.merge(config || {}, {
			method: method,
			url: url
		}));
	};
});
// 在Axios原型上挂载'post','put','patch′且传参的请求方法，实现内部同样也是request
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
	Axios.prototype[method] = function(url, data, config) {
		return this.request(utils.merge(config || {}, {
			method: method,
			url: url,
			data: data
		}));
	};
});

// axios.js
// 创建一个由默认配置生成的axios实例
var axios = createInstance(defaults);
// 扩展axios.create工厂函数，内部也是createInstance
axios.create = function create(instanceConfig) {
	return createInstance(mergeConfig(axios.defaults, instanceConfig));
};
// Axios.js
// 合并默认配置和传入的配置
config = mergeConfig(this.defaults, config);
// 设置请求方法
config.method = config.method ? config.method.toLowerCase() : 'get';

Axios.prototype.request = function request(config) {
	/*
	先是mergeConfig ..等，不再阐述
	*/
	// Hook up interceptors middleware创建拦截器链.dispatchRequest是重中之重，后续重点 
	var chain = [dispatchRequest, undefined];
	// push各个拦截器方法注意：interceptor.fulfilled或interceptor.rejected是 可能为undefined
	this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
		// 请求拦截器逆序注意此处的forEach是自定义的拦截器的forEach方法
		chain.unshift(interceptor.fulfilled, interceptor.rejected);
	});
	this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
		// 响应拦截器顺序注意此处的forEach是自定义的拦截器的forEach方法 
		chain.push(interceptor.fulfilled, interceptor.rejected);
	});
	// 初始化一个promise对象，状态为resolved,接收到的参数为已经处理合并过的config对象
	var promise = Promise.resolve(config);
	// 循环拦截器的链
	while (chain.length) {
		promise = promise.then(chain.shift(), chain.shift()); // 每一次向外弹出拦截器
	}
	// 返回promise
	return promise;
};

function Axios(instanceConfig) {
	this.defaults = instanceConfig;
	this.interceptors = {
		request: new InterceptorManager(), // 请求拦截
		response: new InterceptorManager() // 响应拦截
	};
}

// 拦截器的初始化其实就是一组钩子函数
function InterceptorManager() {
	this.handlers = [];
}
// 调用拦截器实例的use时就是往钩子函数中push方法
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
	this.handlers.push({
		fulfilled: fulfilled,
		rejected: rejected
	});
	return this.handlers.length - 1;
};
// 拦截器是可以取消的，根据use的时候返回的ID,把某一个拦截器方法置为null
// 不能用splice或者slice的原因是删除之后id就会变化，导致之后的顺序或者是操作不可控
InterceptorManager.prototype.eject = function eject(id) {
	if (this.handlers[id]) {
		this.handlers[id] = null;
	}
};
// 这就是在Axios的request方法中中循环拦截器的方法forEach循环执行钩子函数
InterceptorManager.prototype.forEach = function forEach(fn) {
	utils.forEach(this.handlers, function forEachHandler(h) {
		if (h !== null) {
			fn(h);
		}
	});
}

var utils = require('./../utils');
var transformData = require('./transformData');
var isCancel = require('../cancel/isCancel');
var defaults = require('../defaults');
var isAbsoluteURL = require('./../helpers/isAbsoluteURL');
var combineURLs = require('./../helpers/combineURLs');
// 判断请求是否已被取消，如果已经被取消，抛出已取消
function throwIfCancellationRequested(config) {
	if (config.cancelToken) {
		config.cancelToken.throwIfRequested();
	}
}
module.exports = function dispatchRequest(config) {
	throwIfCancellationRequested(config);
	// 如果包含baseUrl,并且不是config.url绝对路径，组合baseUrl以及config.url
	if (config.baseURL && !isAbsoluteURL(config.url)) {
		// 组合baseURL与url形成完整的请求路径
		config.url = combineURLs(config.baseURL, config.url);
	}
	config.headers = config.headers || {};
	// 使用/lib/defaults.js中的transformRequest方法，对config.headers和config.data进行格式化
	// 比如将headers中的Accept,Content-Type统一处理成大写
	// 比如如果请求正文是一个Object会格式化为JSON字符串，并添加application/json;charset=utf-8的Content-Type
	// 等一系列操作
	config.data = transformData(
		config.data,
		config.headers,
		config.transformRequest
	);
	// 合并不同配置的headers,config.headers的配置优先级更高
	config.headers = utils.merge(
		config.headers.common || {},
		config.headers[config.method] || {},
		config.headers || {}
	);
	// 删除headers中的method属性
	utils.forEach(
		['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],
		function cleanHeaderConfig(method) {
			delete config.headers[method];
		}
	);
	// 如果config配置了adapter,使用config中配置adapter的替代默认的请求方法var adapter=config.adapter || defaults.adapter;
	// 使用adapter方法发起请求 (adapter根据浏览器环境或者Node环境会有不同)
	return adapter(config).then(
		// 请求正确返回的回调
		function onAdapterResolution(response) {
			// 判断是否以及取消了请求，如果取消了请求抛出以取消
			throwIfCancellationRequested(config);
			// 使 用 /lib/defaults.js中的transformResponse方法，对服务器返回的数据进行格式化
			// 例如，使用JSON.parse对响应正文进行解析
			response.data = transformData(
				response.data,
				response.headers,
				config.transformResponse
			);
			return response;
		},
		// 请求失败的回调
		function onAdapterRejection(reason) {
			if (!isCancel(reason)) {
				throwIfCancellationRequested(config);
				if (reason && reason.response) {
					reason.response.data = transformData(
						reason.response.data,
						reason.response.headers,
						config.transformResponse
					);
				}
			}
			return Promise.reject(reason);
		}
	);
};

function CancelToken(executor) {
	if (typeof executor !== 'function') {
		throw new TypeError('executor must be a function.');
	}
	// 在CancelToken上定义一个pending状态的promise ,将resolve回调赋值给外部变量resolvePromise
	var resolvePromise;
	this.promise = new Promise(function promiseExecutor(resolve) {
		resolvePromise = resolve;
	});
	var token = this;
	// 立即执行传入的executor函数，将真实的cancel方法通过参数传递出去。
	// 一旦调用就执行resolvePromise即前面的promise的resolve,就更改promise的 状态为resolve
	// 那么xhr中定义的CancelToken.promise.then方法就会执行，从而xhr内部会取消请求
	executor(function cancel(message) {
		// 判断请求是否已经取消过，避免多次执行
		if (token.reason) {
			return;
		}
		token.reason = new Cancel(message);
		resolvePromise(token.reason);
	});
}
CancelToken.source = function source() {
	// source方法就是返回了一个CancelToken实例，与直接使用new CancelToken是一样的操作
	var cancel;
	var token = new CancelToken(function executor(c) {
		cancel = c;
	});
	// 返回创建的CancelToken实例以及取消方法
	return {
		token: token,
		cancel: cancel
	};
};

if (config.cancelToken) {
	config.cancelToken.promise.then(function onCanceled(cancel) {
		if (!request) {
			return;
		}
		// 取消请求
		request.abort();
		reject(cancel);
	});
}

axios.interceptors.request.use(config => {
	config.headers['token'] = cookie.get('token')
	return config
})
axios.interceptors.response.use(res => {}, {
	response
} => {
	if (response.data.code === 40099 || response.data.code === 40098) { //token过期或者错误
		router.push('/login')
	}
})

const routerMap = [{
	path: '/permission',
	component: Layout,
	redirect: '/permission/index',
	alwaysShow: true, // will always show the root menu
	meta: {
		title: 'permission',
		icon: 'lock',
		roles: ['admin', 'editor'] // you can set roles in root nav
	},
	children: [{
		path: 'page',
		component: () => import('@/views/permission/page'),
		name: 'pagePermission',
		meta: {
			title: 'pagePermission',
			roles: ['admin'] // or you can only set roles in sub nav
		}
	}, {
		path: 'directive',
		component: () => import('@/views/permission/directive'),
		name: 'directivePermission',
		meta: {
			title: 'directivePermission'
			// if do not set roles, means: this page does not require permission
		}
	}]
}]

import router from './router'
import store from './store'
import {
	Message
} from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import {
	getToken
} from '@/utils/auth' // getToken from cookie
NProgress.configure({
	showSpinner: false
}) // NProgress Configuration
// permission judge function
function hasPermission(roles, permissionRoles) {
	if (roles.indexOf('admin') >= 0) return true // admin permission passeddirectly
	if (!permissionRoles) return true
	return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login', '/authredirect'] // no redirect whitelist
router.beforeEach((to, from, next) => {
	NProgress.start() // start progress bar
	if (getToken()) { // determine if there has token
		/* has token*/
		if (to.path === '/login') {
			next({
				path: '/'
			})
			NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
		} else {
			if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
				store.dispatch('GetUserInfo').then(res => { // 拉取user_info
					const roles = res.data.roles // note: roles must be a array! such as: ['editor', 'develop']
					store.dispatch('GenerateRoutes', {
						roles
					}).then(() => { // 根据roles权限生成可访问的路由表
						router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
						next({
							...to,
							replace: true
						}) // hack方法确保addRoutes已完成,set the replace: true so the navigation will not leave a history record
					})
				}).catch((err) => {
					store.dispatch('FedLogOut').then(() => {
						Message.error(err || 'Verification failed, please login again')
						next({
							path: '/'
						})
					})
				})
			} else {
				// 没有动态改变权限的需求可直接next()删除下方权限判断↓
				if (hasPermission(store.getters.roles, to.meta.roles)) {
					next() //
				} else {
					next({
						path: '/401',
						replace: true,
						query: {
							noGoBack: true
						}
					})
				}
				// 可删↑
			}
		}
	} else {
		/* has no token*/
		if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
			next()
		} else {
			next('/login') // 否则全部重定向到登录页
			NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
		}
	}
})
router.afterEach(() => {
	NProgress.done() // finish progress bar
})

{
	name: "login",
	path: "/login",
	component: () => import("@/pages/Login.vue")
}

function hasPermission(router, accessMenu) {
	if (whiteList.indexOf(router.path) !== -1) {
		return true;
	}
	let menu = Util.getMenuByName(router.name, accessMenu);
	if (menu.name) {
		return true;
	}
	return false;
}
Router.beforeEach(async (to, from, next) => {
	if (getToken()) {
		let userInfo = store.state.user.userInfo;
		if (!userInfo.name) {
			try {
				await store.dispatch("GetUserInfo")
				await store.dispatch('updateAccessMenu')
				if (to.path === '/login') {
					next({
						name: 'home_index'
					})
				} else {
					//Util.toDefaultPage([...routers], to.name, router, next);
					next({
						...to,
						replace: true
					}) //菜单权限更新完成，重新进一次当前路由 ,
				}
			} catch (e) {
				if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
					next()
				} else {
					next('/login')
				}
			}
		} else {
			if (to.path === '/login') {
				next({
					name: 'home_index'
				})
			} else {
				if (hasPermission(to, store.getters.accessMenu)) {
					Util.toDefaultPage(store.getters.accessMenu, to, routes, next);
				} else {
					next({
						path: '/403',
						replace: true
					})
				}
			}
		}
	} else {
		if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
			next()
		} else {
			next('/login')
		}
	}
	let menu = Util.getMenuByName(to.name, store.getters.accessMenu);
	Util.title(menu.title);
});
Router.afterEach((to) => {
	window.scrollTo(0, 0);
});

const Home = () => import("../pages/Home.vue");
const UserInfo = () => import("../pages/UserInfo.vue");
export default {
	home: Home,
	userInfo: UserInfo
};

[{
		name: "home",
		path: "/",
		component: "home"
	},
	{
		name: "home",
		path: "/userinfo",
		component: "userInfo"
	}
]

{
	path: '/permission',
	component: Layout,
	name: '权限测试',
	meta: {
		btnPermissions: ['admin', 'supper', 'normal']
	},
	// 页面需要的权限
	children: [{
			path: 'supper',
			component: _import('system/supper'),
			name: '权限测试页',
			meta: {
				btnPermissions: ['admin', 'supper']
			} // 页面需要的权限
		},
		{
			path: 'normal',
			component: _import('system/normal'),
			name: '权限测试页',
			meta: {
				btnPermissions: ['admin']
			} // 页面需要的权限
		}
	]
}

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
	bind: function(el, binding, vnode) {
		// 获取页面按钮权限
		let btnPermissionsArr = [];
		if (binding.value) {
			// 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。
			btnPermissionsArr = Array.of(binding.value);
		} else {
			// 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。
			btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
		}
		if (!Vue.prototype.$_has(btnPermissionsArr)) {
			el.parentNode.removeChild(el);
		}
	}
});
// 权限检查方法
Vue.prototype.$_has = function(value) {
	let isExist = false;
	// 获取用户按钮权限
	let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
	if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
		return false;
	}
	if (value.indexOf(btnPermissionsStr) > -1) {
		isExist = true;
	}
	return isExist;
};
export {
	has
}

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

<keep-alive>
	<component :is="view"></component>
</keep-alive>

<keep-alive include="a,b">
	<component :is="view"></component>
</keep-alive>
<!-- 正则表达式(使用v-bind) -->
<keep-alive :include="/a|b/">
	<component :is="view"></component>
</keep-alive>
<!-- 数组(使用v-bind) -->
<keep-alive :include="['a', 'b']">
	<component :is="view"></component>
</keep-alive>

{
	path: 'list',
	name: 'itemList', // 列表页
	component(resolve) {
		require(['@/pages/item/list'], resolve)
	},
	meta: {
		keepAlive: true,
		title: '列表页'
	}
}

<div id="app" class='wrapper'>
	<keep-alive>
		<!-- 需要缓存的视图组件 -->
		<router-view v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
	<!-- 不需要缓存的视图组件 -->
	<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

export default {
	name: 'keep-alive',
	abstract: true,
	props: {
		include: [String, RegExp, Array],
		exclude: [String, RegExp, Array],
		max: [String, Number]
	},
	created() {
		this.cache = Object.create(null)
		this.keys = []
	},
	destroyed() {
		for (const key in this.cache) {
			pruneCacheEntry(this.cache, key, this.keys)
		}
	},
	mounted() {
		this.$watch('include', val => {
			pruneCache(this, name => matches(val, name))
		})
		this.$watch('exclude', val => {
			pruneCache(this, name => !matches(val, name))
		})
	},
	render() {
		/* 获取默认插槽中的第一个组件节点 */
		const slot = this.$slots.default
		const vnode = getFirstComponentChild(slot)
		/* 获取该组件节点的componentOptions */
		const componentOptions = vnode && vnode.componentOptions
		if (componentOptions) {
			/* 获取该组件节点的名称，优先获取组件的name 字段，如果name 不存在则获取组件的tag */
			const name = getComponentName(componentOptions)
			const {
				include,
				exclude
			} = this
			/* 如 果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */
			if ((include && (!name || !matches(include, name))) ||
				// excluded
				(exclude && name && matches(exclude, name))
			) {
				return vnode
			}
			const {
				cache,
				keys
			} = this
			/* 获取组件的key值*/
			const key = vnode.key == null
				// same constructor may get registered as different local components
				// so cid alone is not enough (#3269)
				? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') 
				: vnode.key
			/* 拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */
			if (cache[key]) {
				vnode.componentInstance = cache[key].componentInstance
				// make current key freshest
				remove(keys, key)
				keys.push(key)
			}
			/*  如果没有命中缓存，则将其设置进缓存 */
			else {
				cache[key] = vnode
				keys.push(key)
				// prune oldest entry
				/* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个 */
				if (this.max && keys.length > parseInt(this.max)) {
					pruneCacheEntry(cache, keys[0], keys, this._vnode)
				}
			}
			vnode.data.keepAlive = true
		}
		return vnode || (slot && slot[0])
	}
}

this.cache = {
	'key1': ' 组件1',
	'key2': ' 组件2',
	// ...
}

function pruneCacheEntry(cache: VNodeCache, key: string, keys: Array<string>, current?: VNode) {
	const cached = cache[key];
	/* 判断当前没有处于被渲染状态的组件，将其销毁 */
	if (cached && (!current || cached.tag !== current.tag)) {
		cached.componentInstance.$destroy();
	}
	cache[key] = null;
	remove(keys, key);
}

mounted() {
	this.$watch('include', val => {
		pruneCache(this, name => matches(val, name))
	})
	this.$watch('exclude', val => {
		pruneCache(this, name => !matches(val, name))
	})
}

function pruneCache(keepAliveInstance, filter) {
	const {
		cache,
		keys,
		_vnode
	} = keepAliveInstance
	for (const key in cache) {
		const cachedNode = cache[key]
		if (cachedNode) {
			const name = getComponentName(cachedNode.componentOptions)
			if (name && !filter(name)) {
				pruneCacheEntry(cache, key, keys, _vnode)
			}
		}
	}
}

const key = vnode.key == null ?
	componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') :
	vnode.key

/* 如果命中缓存，则直接从缓存中拿vnode的组件实例 */
if (cache[key]) {
	vnode.componentInstance = cache[key].componentInstance
	/* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
	remove(keys, key)
	keys.push(key)
}

/* 如果没有命中缓存，则将其设置进缓存 */
else {
	cache[key] = vnode
	keys.push(key)
	/* 如果配置了max并且缓存的长度超过了this.max,则从缓存中删除第一个 */
	if (this.max && keys.length > parseInt(this.max)) {
		pruneCacheEntry(cache, keys[0], keys, this._vnode)
	}
}

beforeRouteEnter(to, from, next) {
	next(vm => {
		console.log(vm)
		// 每次进入路由执行
		vm.getData() // 获取数据
	})
},

activated() {
	this.getData() //获取数据
},

// 定义Router 
class Router {
	constructor() {
		this.routes = {}; // path callback 
		this.currentUrl = '';

		// 监听路由change调用相对应的路由回调
		window.addEventListener('load', this.refresh, false);
		window.addEventListener('hashchange', this.refresh, false);
	}

	route(path, callback) {
		this.routes[path] = callback;
	}

	push(path) {
		this.routes[path] && this.routes[path]()
	}
}

// 使用router 
window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))

miniRouter.push('/') // page1 
miniRouter.push('/page2') // page2

// 定义Router 
class Router {
	constructor() {
		this.routes = {};
		this.listerPopState()
	}

	init(path) {
		history.replaceState({
			path: path
		}, null, path);
		this.routes[path] && this.routes[path]();
	}

	route(path, callback) {
		this.routes[path] = callback;
	}

	push(path) {
		history.pushState({
			path: path
		}, null, path);
		this.routes[path] && this.routes[path]();
	}

	listerPopState() {
		window.addEventListener('popstate', e => {
			const path = e.state && e.state.path;
			this.routers[path] && this.routers[path]()
		})
	}
}

// 使用Router 

window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))

// 跳转
miniRouter.push('/page2') // page2

// 方案一
document.addEventListener('DOMContentLoaded', (event) => {
	console.log('first contentful painting');
});
// 方案二
performance.getEntriesByName("first-contentful-paint")[0].startTime
// performance.getEntriesByName("first-contentful-paint")[0]

// 会返回一个PerformancePaintTiming的实例，结构如下
{
	name: "first-contentful-paint",
	entryType: "paint",
	startTime: 507.80000002123415,
	duration: 0,
};

routes: [
	path: 'Blogs',
	name: 'ShowBlogs',
	component: () => import('./components/ShowBlogs.vue')
]

import ElementUI from 'element-ui'
Vue.use(ElementUI)

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

minChunks:3

cnmp i compression-webpack-plugin -D

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
		if (process.env.NODE_ENV === 'production') {
			// 为生产环境修改配置...
			config.mode = 'production'
			return {
				plugins: [new CompressionPlugin({
					test: /\.js$|\.html$|\.css/, // 匹配文件名
					threshold: 10240, // 对超过10k的数据进行压缩
					deleteOriginalAssets: false // 是否删除原文件
				})]
			}
		}

const compression = require('compression')
app.use(compression()) //

//scp上传user为主机登录用户，host为主机外网ip,xx为web容器静态资源路径
scp dist.zip userghost:/xx/xx/xx

server {
	listen 80;
	server_name www.xxx.com;
	location / {
		index /data/dist/index.html;
	}
}

//检查配置是否正确
nginx -t

//平滑重启
nginx -s reload

server {
	listen 80;
	server_name www.xxx.com;
	location / {
		index /data/dist/index.html;
	}
}

server {
	listen 80;
	server_name www.xxx.com;
	location / {
		index /data/dist/index.html;
		try_files $uri $uri/ /index.html;
	}
}

nginx -s reload

const router = new VueRouter({
	mode: 'history',
	routes: [{
		path: '*',
		component: NotFoundComponent
	}]
})

src
├── router
├────── index.js # 路由声明
├── store
├────── index.js # 全局状态
├── main.js # 用于创建vue实例
├── entry-client.js # 客户端入口，用于静态内容“激活”
└── entry-server.js # 服务端入口，用于首屏内容渲染

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
// 导出工厂函数
export function createRouter() {
	return new Router({
		mode: 'history',
		routes: [
			// 客户端没有编译器，这里要写成渲染函数
			{
				path: "/",
				component: {
					render: h => h('div', 'index page')
				}
			},
			{
				path: "/detail",
				component: {
					render: h => h('div', 'detailpage')
				}
			}
		]
	});
}

import Vue from "vue";
import App from "./App.vue";
import {
	createRouter
} from "./router";
// 导出Vue实例工厂函数，为每次请求创建独立实例
// 上下文用于给vue实例传递参数
export function createApp(context) {
	const router = createRouter();
	const app = new Vue({
		router,
		context,
		render: h => h(App)
	});
	return {
		app,
		router
	};
}

import {
	createApp
} from "./main";
// 返回一个函数，接收请求上下文，返回创建的vue实例
export default context => {
	// 这里返回一个Promise,确保路由或组件准备就绪
	return new Promise((resolve, reject) => {
		const {
			app,
			router
		} = createApp(context);
		// 跳转到首屏的地址
		router.push(context.url);
		// 路由就绪，返回结果
		router.onReady(() => {
			resolve(app);
		}, reject);
	});
};

import {
	createApp
} from "./main";
// 创建vue、router实例
const {
	app,
	router
} = createApp();
// 路由就绪，执行挂载
router.onReady(() => {
	app.$mount("#app");
});

npm install webpack-node-externals lodash.merge -D

// 两个插件分别负责打包客户端和服务端
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");

// 根据传入环境变量决定入口文件和相应配置项
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";
module.exports = {
	css: {
		extract: false
	},
	outputDir: './dist/' + target,
	configureWebpack: () => ({
		// 将entry指向应用程序的server/client文件
		entry: `./src/entry-${target}.js`,
		// 对bundle renderer提供source map支持
		devtool: 'source-map',
		// target设置为node使webpack以Node适用的方式处理动态导入，
		// 并且还会在编译Vue组件时告知`vue-loader`输出面向服务器代码。
		target: TARGET_NODE ? "node" : "web",
		// 是否模拟node全局变量
		node: TARGET_NODE ? undefined : false,
		output: {
			// 此处使用Node风格导出模块
			libraryTarget: TARGET_NODE ? "commonjs2" : undefined
		},
		// https://webpack.js.org/configuration/externals/#function
		// https://github.com/liady/webpack-node-externals
		// 外置化应用程序依赖模块。可以使服务器构建速度更快，并生成较小的打包文件。
		externals: TARGET_NODE ?
			nodeExternals({
				// 不要外置化webpack需要处理的依赖模块。
				// 可以在这里添加更多的文件类型。例如，未处理*.vue原始文件， 
				// 还应该将修改`global`(例如polyfill)的依赖模块列入白名单
				whitelist: [/\.css$/]
			}) :
			undefined,
		optimization: {
			splitChunks: undefined
		},
		// 这是将服务器的整个输出构建为单个JSON文件的插件。
		// 服务端默认文件名为`vue-ssr-server-bundle.json`
		// 客户端默认文件名为`vue-ssr-client-manifest.json`
		plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new
			VueSSRClientPlugin()
		]
	}),
	chainWebpack: config => {
		// cli4 项目添加
		if (TARGET_NODE) {
			config.optimization.delete('splitChunks')
		}
		config.module
			.rule("vue")
			.use("vue-loader")
			.tap(options => {
				merge(options, {
					optimizeSSR: false
				});
			});
	}
};

npm i cross-env -D

"scripts": {
	"build:client": "vue-cli-service build",
	"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
	"build": "npm run build:server && npm run build:client"
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!--vue-ssr-outlet-->
	</body>
</html>

npm install -S vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export function createStore() {
	return new Vuex.Store({
		state: {
			count: 108
		},
		mutations: {
			add(state) {
				state.count += 1;
			}
		}
	})
}

import {
	createStore
} from './store'
export function createApp(context) {
	// 创建实例
	const store = createStore()
	const app = new Vue({
		store, // 挂载
		render: h => h(App)
	})
	return {
		app,
		router,
		store
	}
}

export function createStore() {
	return new Vuex.Store({
		mutations: {
			// 加一个初始化
			init(state, count) {
				state.count = count;
			},
		},
		actions: {
			// 加一个异步请求count的action
			getCount({
				commit
			}) {
				return new Promise(resolve => {
					setTimeout(() => {
						commit("init", Math.random() * 100);
						resolve();
					}, 1000);
				});
			},
		},
	});
}

export default {
	asyncData({
		store,
		route
	}) { // 约定预取逻辑编写在预取钩子asyncData中
		// 触发action后，返回Promise以便确定请求结果 
		return store.dispatch("getCount");
	}
};

import {
	createApp
} from "./app";
export default context => {
	return new Promise((resolve, reject) => {
		// 拿出store和router实例
		const {
			app,
			router,
			store
		} = createApp(context);
		router.push(context.url);
		router.onReady(() => {
			// 获取匹配的路由组件数组
			const matchedComponents = router.getMatchedComponents();
			// 若无匹配则抛出异常
			if (!matchedComponents.length) {
				return reject({
					code: 404
				});
			}
			// 对所有匹配的路由组件调用可能存在的`asyncData()`
			Promise.all(
					matchedComponents.map(Component => {
						if (Component.asyncData) {
							return Component.asyncData({
								store,
								route: router.currentRoute,
							});
						}
					}),
				)
				.then(() => {
					// 所有预取钩子resolve后，
					// store已经填充入渲染应用所需状态
					// 将状态附加到上下文，且`template`选项用于renderer时，
					// 状态将自动序列化为`window.INITIAL_STATE `,并注入HTML
					context.state = store.state;
					resolve(app);
				})
				.catch(reject);
		}, reject);
	});
};

// 导出store
const {
	app,
	router,
	store
} = createApp();
// 当使用template时，context.state将作为window.INITIAL_STATE状态自动嵌入到最终的HTML
// 在客户端挂载到应用程序之前，store就应该获取到状态
if (window.__INITIAL_STATE__) {
	store.replaceState(window.__INITIAL_STATE__);
}

Vue.mixin({
	beforeMount() {
		const {
			asyncData
		} = this.$options;
		if (asyncData) {
			// 将获取数据操作分配给promise
			// 以便在组件中，我们可以在数据准备就绪后
			// 通过运行`this.dataPromise.then(...)` 来执行其他任务
			this.dataPromise = asyncData({
				store: this.$store,
				route: this.$route,
			});
		}
	},
});

// 获取文件路径
const resolve = dir => require('path').resolve(__dirname, dir)
// 第1步：开放dist/client目录，关闭默认下载index页的选项，不然到不了后面路由
app.use(express.static(resolve('../dist/client'), {
	index: false
}))
// 第2步：获得一个createBundleRenderer
const {
	createBundleRenderer
} = require("vue-server-renderer");
// 第3步：服务端打包文件地址 
const bundle = resolve("../dist/server/vue-ssr-server-bundle.json");
// 第4步：创建渲染器 
const renderer = createBundleRenderer(bundle, {
	runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext
	template: require('fs').readFileSync(resolve("../public/index.html"), "utf8"), // 宿主文件
	clientManifest: require(resolve("../dist/client/vue-ssr-clientmanifest.json")) // 客户端清单
});
app.get('*', async (req, res) => {
	// 设置url和title两个重要参数
	const context = {
		title: 'ssr test',
		url: req.url
	}
	const html = await renderer.renderToString(context);
	res.send(html)
})

<!-- Layout.vue -->
<template>
	<header>...</header>
	<main v-bind="$attrs">...</main>
	<footer>...</footer>
</template>

<button @click="showToast" class="btn"> toast</button>
<!-- to属性就是目标位置 -->
<teleport to="#teleport-target">
	<div v-if="visible" class="toast-wrap">
		<div class="toast-msg">我是一个Toast文案</div>
	</div>
</teleport>

import {
	createRenderer
} from '@vue/runtime-core'
const {
	render,
	createApp
} = createRenderer({
	patchProp,
	insert,
	remove,
	createElement,
	// ...
})
export {
	render,
	createApp
}
export * from '@vue/runtime-core'

export default {
	setup() {
		const count = ref(0)
		const double = computed(() => count.value * 2)

		function increment() {
			count.value++
		}
		onMounted(() => console.log('component mounted!'))
		return {
			count,
			double,
			increment
		}
	}
}