vue高级知识点

1.nextTick 在vue的data改变时，dom其实是不会马上渲染的,在没有用nextTick的时候打印的ul的子节点的长度是不会及时更新的，可以看出原本是9个节点但是只更新了6个

addItem(){
            this.items.push("a")
            this.items.push("b")
            this.items.push("c")
            // this.$nextTick(()=>{
            const ul1 = this.$refs.ul1
            console.log(ul1.childNodes.length)
            // })
            
        }

如果使用nextTick把他们包裹起来,这时候，异步渲染，nextTick待他们渲染完在回调

addItem(){
            this.items.push("a")
            this.items.push("b")
            this.items.push("c")
            this.$nextTick(()=>{
            const ul1 = this.$refs.ul1
            console.log(ul1.childNodes.length)
            })
            
        }

实现v-model,这时候要注意的是value等于的context必须与model.prop和props的值相同，然后$emit触发的事件必须与model.event相同

//父组件
{{context}}
<!-- <input type="text" :value="context" @input="context=$event.target.value" > -->
<Input v-model="context"/>

//子组件
template>
    <input type="text" :value ="context" @input="$emit('change',$event.target.value)">
</template>
<script>
export default {
    props:{
        context:String,
        default:""
    },
    model:{
        prop:"context",
        event:'change'
    }
}
</script>

3.作用域插槽

让父组件获取从子组件的内容

//父组件
<parent>
<template v-slot="slotProps">
{{slotProps.slotData.title}}
</template>
</parent>

//子组件
<template>
    <div>
        <a :href="url">
            <slot :slotData ="website">
                这是一段补充内容
            </slot>
        </a>
    </div>
</template>
<script>
export default {
    props:{
        url:String
    },
    data(){
        return {
            website:{
                title:'aaaaa'
            }
        }
    }
}
</script>

4.动态组件 <component :is="xxx"/>

异步加载用组件名:()=>import('地址')相当于 组件名:()=>{ retrun import('地址')}

<template>
 <SlotP v-if="show" :url="website.url" >
            <template v-slot="slotProps">
                {{slotProps.slotData.title}}
            </template>
            <template v-slot:header/>
        </SlotP>
        <button @click="show=true">点击</button>
</template>
<script>
export default {
    data(){
        return {
            show:false
        }
    },
    components:{
        SlotP:()=>import("./slot")
    }
</script>

keep-alive 把js对象存在vue层级进行缓存，若是如tab切换这种组件结构，可以使用keep-alive,若是不太复杂的，使用v-show
mixins

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

缺点： 1. 变量来源不明确，不利于阅读 2.多个mixins合并，可能会引起命名冲突 3. mixins和组件可能会出现多对多的关系，复杂度比较高