【vue】特殊的attribute

特殊的attribute

1. key
2. ref
3. is

key

预期：Number|Stirng|Boolean|Symbol
主要用在Vue的虚拟DOM的diff算法，对比新旧nodes来辨识Vnodes

不使用key时，Vue会使用一种最大限度减少动态元素且尽可能的尝试就地修复/复用相同类型元素的算法
使用key时，会基于key的变化重新排列元素顺序，并且会移除key不存在的元素

常见与v-for组合使用
v-for
单独使用时可以强制替换元素，变化的key值，虚拟DOM的diff算法会优先比较key，不存在则会整体替换，而不是部分的替换

2 ref

给元素或子组件注册引用信息。
引用信息会注册在父组件的$refs对象上
普通的DOM元素：该DOM元素
子组件：组件实例
$refs是非响应式的

3 is

预期：String|Object
绑定需要渲染的动态组件
例如在详情页中，不确定使用哪一类型的组件，可以根据数据来使用动态组件

数据文件

export default [
    {
        id: 1,
        type: 'video'
    },
    {
        id: 2,
        type: 'text'
    },
    {
        id: 3,
        type: 'image'
    },
    {
        id: 4,
        type: 'text'
    }
]

父组件

component组件中的is的值时引入的子组件，通过计算属性遍历原数据，根据每条数据生成对应组件的type，这样就可以使用v-for进行列表渲染

动态引入

如果组件子组件较多，并且并不是所有组件都用到，可以使用动态引入的方式

components:{
    newsImage:()=>import('./components/newsImage.vue')
}

传值

在列表渲染时，可以将每条数据逐个绑定到对应组件上，相同类型的数据进行统一处理

//父组件

     

//子组件
props:['newsItem']