Vue高级特性

未经同意 禁止转载

自定义v-model

//父组件
<p>{{val}}</p>
<component v-model='val' />

//子组件
//
    1.input使用:value而不是v-model;
    2.$emit里的change1要和model的event名对应起来;
    3.:value的变量要和props、model的prop对应起来;
//    
<input type='text' :value='text1' @input="$emit('change',$e.target.value)" />

export default{
    model:{
        prop: 'text1',
        event: 'change'
    },
    props:{
        text1:{
            type: String,
            default: ''
        }
    }
}

---

$nextTick

1. vue是异步渲染

2. data改变后，DOM不会立刻渲染

3. $nextTick会在DOM被渲染后触发，以获取最新DOM节点

在vue中常用获取DOM节点的方法是在标签中ref='xx',js中通过this.$refs.xx即可获取到该DOM

<!-- html -->
<div ref = 'con'>
    <p v-for="(item,index) in list" :key='index'>{{item}}</p>
</div>
<button @click='add'></button>

//js
export default{
    data(){
        return {
            list:['a','b','c']
        }
    },
    methods:{
        add(){
            //点击按钮，添加3个当前时间戳
            this.list.push(new Date().getTime())
            this.list.push(new Date().getTime())
            this.list.push(new Date().getTime())

            //下面按$nextTick使用与否分2种情况
            //1. 不使用$nextTick
            let a = this.$refs.con
            console.log(a.childNodes.length)
            
            //2.使用$nextTick
            this.$nextTick(()=>{
                let a = this.$refs.con
                console.log(a.childNodes.length)
            })

        }
    }
}

以上代码片段中不使用$nextTick时，由于list本身长度为3，期望结果是点击按钮添加3个数组长度，打印a的总长度为6，但由于vue是异步渲染，data改变后DOM不会立刻渲染，打印的结果为点击之前的实际长度3

而使用this.$nextTick(()=>{})后会再DOM被渲染后回调，获取到最新的DOM节点，点击按钮打印6，符合预期

使用$nextTick，页面渲染时会将data的修改做整合，多次data修改只会渲染一次

---

slot插槽

slot基本用法

//父组件
<component :src=info.src>{{info.desc}}</component>

export default{
    data(){
        return {
            info:{
                src: 'xxxxx',
                desc: '123'
            }
        }
    }
}

//子组件
<a :href='src'>
    <slot>如果父组件中info.desc为空，此处文字显示</slot>
</a>

export default{
    props:{
        src:{
            type: String,
            default: ''
        }
    }
}

slot基本用法就是在父组件中放子组件的标签内插入字内容，子组件用slot标签接收子内容，如果父组件传的字内容为空，则显示子组件slot标签内的默认内容

scopedSlot 作用域插槽

//父组件
<component :src>
    <template v-slot='slotProps'>
        {{slotProps.slotData.a}}
    </template>
</component>


//子组件
<a :href='src'>
    <slot :slotData='info'></slot>
</a>

export default{
    props:{
        src:{
            type: String,
            default: ''
        }
    },
    data(){
        return{
            info:{
                a: 1
            }
        }
    }
}

作用域插槽是把子组件内data内容通过slot传递给父组件，父组件在子组件的标签内添加template标签，并给template添加v-slot属性，通过${v-slot属性名.自杜建slot标签动态属性key值}获取到子组件内data内容

具名插槽

当子组件有多个slot，通过给slot添加name属性，父组件给子组件内容template标签添加v-slot:${子组件slot的name}来命名，也可以通过给template添加#子组件slot的name来简写

---

动态组件

当不确定组件类型时使用动态组件

<component :is='dynamicCom' />


import xxx from './xx'
export default{
    components:{
        dynamicCon
    },
    data(){
        return{
            dynamicCon: 'xxx'
        }
    }
}

照常引用、注册组件，使用component标签并添加:is属性，属性值为组件名

---

组件动态加载

普通组件采用import xx from xx的方式加载，为同步加载，当项目需要引入很大的组件时，同步加载性能会十分差，体验也很不理想，所以此时需要采用异步加载组件的方法。

该知识点会出现在vue性能优化面试题中

方法：直接在components里定义组件名，使用import()方法

export default{
    components:{
        ${组件名}:()=>import(${组件路径})
    }
}

---

keep-alive 组件缓存

使用场景：频繁切换，不需要重复渲染的组件

该知识点会出现在vue性能优化面试题中

用法：需要频繁切换的组件外层添加keep-alive标签，添加后组件切换时不会被销毁，会缓存起来，大幅提高渲染性能。

keep-alive控制js对象，v-show控制css的display样式属性

---

minxin

组件抽离公共逻辑

import 'myMixin' from './myMixin.js'
export default{
    mixins: [myMixin],
}

在myMixin.js里抽离公共逻辑,在需要使用的组件里引用该mixin