动态组件&异步组件
动态组件
<component is = 'A'></component>//组件是A
- 实现动态切换
<button @click='type = type ==="A"?"A":"B"'>切换</buttton>
<component :is = 'type'></component>
new Vue({
data:{
type:"A"
},
component:{
"A":{
},
"B":{
}
}
})//v-if + 开关也能实现这个效果,但开销很大
动态组件在重复加载时开销很大,可以使用 keep-alive来实现缓存
<keep-alive>
<component is ="A"></component>
</keep-alive>
keep-alive 将组件的内容存在浏览器缓存中,当我们需要重复渲染的时候,就从浏览器缓存中去调用,可以减少性能消耗
is属性
我们html找那个有一些标签是规定它的直接子元素的,比如ul,li,ol,li,selector,option,table这类型标签
- 不能直接用常规的组件使用方式,必须在对应直接子元素上绑定is属性
<table>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr is ='my-table'></tr>
</table>
异步组件
- 异步组件也是一个函数,
var res = new Promise(function(resolve,reject){
resolve({
template:"<div>异步组件</div>"
})
}
Vue.component('AsyncCom',
async ()=>{
return await res.then(res=>res)//一定要return出去,不然无法渲染到页面上
}
))
不常用指令
v-text 与v-html
<p>{{ msg }}</p> = <p v-text = 'msg'></p>
v-html 的功能也大致一样,但v-text 不能解析标签,而v-html可以
v-pre
<p v-pre>{{ msg }}</p>//输出{{msg}}
- v-pre 使标签中的内容原样输出
v-cloak
{{ msg }}在比较大的项目的时候会短暂的显示 {{ msg }} 为了防止这种情况,引入了v-cloak
<style>
[v-cloak]{
display:none
}
</style>
<html>
<p v-cloak>
{{ msg }}
</p>
</html>
v-once
v-once 只渲染一次 (updated不会修改)