目录
组件注册
全局注册
局部注册
全局导入
按需载入
Vue组件的生命周期
动态组件
keep-alive【使用的是LRU淘汰算法】
组件注册
全局注册
全局注册的组件可以在任何地方使用
Vue.component("custom-a", {
render() {
return <div>custom-a</div>;
}
});全局注册会在最后打包时，打包进去，如后来弃用，要记得删掉，全局注册，不然会打包进去多余的废代码
局部注册
局部注册的组件只能在当前组件中使用
<template>
<div>
<prop-child parent-name="2" />
</div>
</template>
<script>
import PropChild from "./PropChild";
export default {
components: {
PropChild
}
}
</script>全局导入
按需载入
babel-plugin-import
babel-plugin-component(Element)【饿了么组件魔改上面的组件】
Vue组件的生命周期
各种生命周期通常可进行下面的操作
// 父组件
<template>
<div>
<h1>LifeCycle</h1>
<button @click="a = !a">切换A</button>
<l-a v-if="a"></l-a>
<br>
<h1>LifeCycle & KeepAlive</h1>
<button @click="ab = !ab">切换A</button>
<keep-alive>
<l-a v-if="ab"></l-a>
</keep-alive>
<p>⺌丨请打开console, 观察log丨⺌</p>
</div>
</template>
<script>
import LifeCycle from "./components/LifeCycle";
export default {
data() {
return {
a: true,
ab: true
};
},
components: {
"l-a": LifeCycle
}
};
</script>// 组件生命周期
<template>
<div>
LifeCycle A {{ test }}
<input type="number" v-model="test" ref="input">
</div>
</template>
<script>
/* eslint-disable no-console */
export default {
data() {
return {
test: 1
};
},
computed: {
bontest() {
return this.test * 2;
}
},
methods: {
getOne() {}
},
beforeCreate() {
console.group("=== 初始化 ===");
console.log("--- beforeCreate ---");
console.log(` [data:test] ${this.test} `);
console.log(` [compute:bontest] ${this.bontest} `);
console.log(` [method:getOne] ${this.getOne} `);
console.log(` [ref:input] ${this.$refs.input} `);
console.log(` [root] ${this.$root} `);
console.log(` [parent] ${this.$parent} `);
console.log(``);
},
created() {
console.log("--- created ---");
console.log(` [data:test] ${this.test} `);
console.log(` [compute:bontest] ${this.bontest} `);
console.log(` [method:getOne] ${this.getOne} `);
console.log(` [ref:input] ${this.$refs.input} `);
console.log(` [root] ${this.$root} `);
console.log(` [parent] ${this.$parent} `);
console.groupEnd();
},
beforeMount() {
console.group("=== 挂载 ===");
console.log("--- beforeMount ---");
console.log(` [ref:input] ${this.$refs.input} `);
console.log(` [root] ${this.$root} `);
console.log(` [parent] ${this.$parent} `);
},
mounted() {
console.log("--- mounted ---");
console.log(` [ref:input] ${this.$refs.input} `);
console.log(` [root] ${this.$root} `);
console.log(` [parent] ${this.$parent} `);
console.groupEnd();
},
beforeUpdate() {
console.group("=== 模板更新 ===");
console.log("--- beforeUpdate ---");
console.log(` test: ${this.test} `);
},
updated() {
console.log("--- updated ---");
console.log(` test: ${this.test} `);
console.groupEnd();
},
activated() {
console.group("=== keepAlive 激活 ===");
console.log("--- activated ---");
},
deactivated() {
console.log("--- deactivated ---");
console.groupEnd();
},
beforeDestroy() {
console.group("=== 销毁 ===");
console.log("--- beforeDestory ---");
},
destroyed() {
console.log("--- destoryed ---");
console.groupEnd();
}
};
</script>动态组件
<keep-alive>//保存状态，保持缓存
<component :is="currentComponent" />
</keep-alive>
computed: {
currentComponent() {
// 组件名, 组件LifeCycleA或者组件FOR
return this.isA ? LifeCycleA : FOR
}
}keep-alive【使用的是LRU淘汰算法】
最常见的淘汰策略有 FIFO（先进先出）、LFU（最少使用）、LRU（最近最少使用）。
<keep-alive>// 缓存组件实例，通过vm.$el获得先前DOM元素
<component :is="currentComponent" />
</keep-alive>Props：keep-alive的用于判断子组件是否需要缓存的属性：
include：字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max：数字。最多可以缓存多少组件实例。
子组件Life Hook:
activated：Keep-alive内组件加载成功后调用
deactivated：Keep-alive内组件缓存成功后调用
