非凡的 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，不存在则会整体替换，而不是局部的替换

<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']