动态组件、异步组件以及一些不常用指令

本文链接：https://blog.csdn.net/m0_37716271/article/details/89491374

动态组件&异步组件

动态组件

<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不会修改）