vue-知识点

1.keep-alive,component 标签

// html代码
<keep-alive>
	<component :is = "type"></component>
<keep-alive>
// js代码
// component 是动态, 根据is绑定的名称渲染组件
// keep-alive  保证切换组件的时候，切换的上一个组件，而不是重新实例化出来的一个新的组件

2.slot 插槽

1.普通插槽

// html 代码
<comp-one>
	<span slot="head">这是一个头部的插槽</span>
</comp-one>

// js 代码
const compOne = {
	props: ['list'],
	template: `<div>
					<slot name= "head"></slot>
					<span>这是组件1</span>
					<slot name = foot></slot>
			  </div>`
}

2.作用域插槽

// html 代码
<comp-one :list="list">  
     // 作用域插槽必须用template标签
	<template slot-scope="comOneInfo">   
		<span slot="head">插槽传的item:{{comOneInfo.item}}, 插槽的index: {{comOneInfo.index}}</span>
	</template>
</comp-one>

// js 代码
const compOne = {
	props: ["list"],
	template: `<div>
					<slot name= "head" v-for=(item, index) in list :key="item" :item="item" :index="index"> </slot>
					<span>这是组件1</span>
					<slot name = foot></slot>
			  </div>`  // 是在这里把slot绑定的值，都打包发送到template 的slot-scope 的comOneInfo 上了
}

3.生命周期

1.vm.$mount("#app") , 挂载到#app上，相当于在vue实例上的 el："#app"
2.template: 与data 和methods同级。接收一个字符串，直接放到#app里。
vue执行顺序：

   初始化==> el ==> y ==> template ⇒ y ⇒ Ast()抽象语法树 ==> render  ⇒ VNode 虚拟dom ⇒ 真实dom
			   ==> n ⇒ $mount  ==> y ==> template  ==⇒ y  ==> Ast()抽象语法树 ==> render  ⇒ VNode 虚拟dom ⇒ 真实dom
								⇒ n ⇒ vue实例凉凉		n  ===> #app.outHTML 变成template 	   							 

3.render函数

const vm = new Vue({
	data: {},
	template: '<div></div>',
	render: (h) {
		return h("div", {
			style: {},
			class: ["red", "green"],  
			class: {
				red: true,
				green: false
			}, // 两个class方式二选一， 后面是动态的，根据true决定是否有这个class
			domProps: {
				innerHTML: 'ssss'   // 设置这个dom的innerHTML
			},
			props: {},
			attrs: {}
		}, "我的老哥")
	}
})

4. 整个生命周期流程 自己去官网看图好不
   我还是贴一张官网的图吧