【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 【【vue】特殊的attribute】给元素或子组件注册引用信息
引用信息会注册在父组件的$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']

    推荐阅读