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: {}
}, "我的老哥")
}
})
- 整个生命周期流程 自己去官网看图好不
我还是贴一张官网的图吧