非凡的attribute
- key
- ref
- is
key
预期：Number|Stirng|Boolean|Symbol
次要用在Vue的虚构DOM的diff算法，比照新旧nodes来辨识Vnodes
不应用key时，Vue会应用一种最大限度缩小动静元素且尽可能的尝试就地修复/复用雷同类型元素的算法
应用key时，会基于key的变动重新排列元素程序，并且会移除key不存在的元素
常见与v-for组合应用
v-for
独自应用时能够强制替换元素，变动的key值，虚构DOM的diff算法会优先比拟key，不存在则会整体替换，而不是局部的替换
<template> <div id="app"> <input type="text" v-model="msg" /> <div :key="msg">{{ msg }}</div> </div></template><script>export default { name: "App", data() { return { msg: "hello", }; },};</script>2 ref
给元素或子组件注册援用信息。
援用信息会注册在父组件的$refs对象上
一般的DOM元素：该DOM元素
子组件：组件实例$refs是非响应式的
<template> <div id="app"> <span ref="span">{{ msg }}</span> <Child ref="child" /> <button @click="showRefs()">获取refs</button> </div></template><script>import Child from "./components/Child.vue";export default { name: "App", data() { return { msg: "hello", }; }, components: { Child, }, methods: { showRefs() { console.log(this.$refs); }, },};</script>3 is
预期：String|Object
绑定须要渲染的动静组件
例如在详情页中，不确定应用哪一类型的组件，能够依据数据来应用动静组件
数据文件
export default [ { id: 1, type: 'video' }, { id: 2, type: 'text' }, { id: 3, type: 'image' }, { id: 4, type: 'text' }]父组件
<template> <div id="app"> <div v-for="item in newsCompType" :key="item.id"> <component :is="item.type"></component> </div> </div></template><script>import newsData from "./news";import newsImage from "./components/newsImage.vue";import newsText from "./components/newsText.vue";import newsVideo from "./components/newsVideo.vue";export default { name: "App", data() { return { newsData, }; }, computed: { newsCompType() { return this.newsData.map((item) => { return { ...item, type: "news-" + item.type, }; }); }, }, components: { newsImage, newsText, newsVideo, },};</script>component组件中的is的值时引入的子组件，通过计算属性遍历原数据，依据每条数据生成对应组件的type，这样就能够应用v-for进行列表渲染
动静引入
如果组件子组件较多，并且并不是所有组件都用到，能够应用
动静引入的形式components:{ newsImage:()=>import('./components/newsImage.vue')}
传值
在列表渲染时，能够将每条
数据一一绑定到对应组件上，雷同类型的数据进行对立解决//父组件<div v-for="item in newsCompType" :key="item.id"> <component :is="item.type" :newsItem="item"></component></div>//子组件props:['newsItem']