本节说明介绍vue3中的特殊属性：key、is、ref；
其中key、is用法vue2、vue3基本一致，而ref在vue3 中与vue2中出入较大
1、key作用与用途
vue3与vue2的diff虚拟算法不相同，后续章节会专门介绍
vue使用虚拟算法时，用于标识DOM元素，比较新旧节点识别虚拟节点；
若没有key的时候vue会使用一种最小化元素移动算法，尽可能的就地复用更新原则；
有key时，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素；
切记： key是number | string | symbol 类型，不能是object类型；
并且一定不要使用 new Date() 的结果作为 key 值，因为每次创建 Date 对象都会创建一个新的key值，导致 key 值变化，从而导致 DOM 元素被不停地销毁和创建，从而会导致页面内存溢出，特别是对于大型列表数据，一定要绑定唯一的key值；
<ul><li v-for="itm in lists" :key="itm.id">{{itm.name}}</li>
</ul>
2、模板中的：ref
在vue2中，ref是给组件或者元素添加一个标识，方便我们后续获取到该组件或者元素，进而调用该组件或元素的方法属性，
但是vue3中，模板中的ref 需要与 ref() 创建的属性名称保持一致
如下：
<template><div class="home-container"><About ref="about"></About></div>
</template>
<script setup>
import { ref } from 'vue'
const about = ref() // 必须与模板dom 中ref 同名，需要等组件挂载完成之后才能使用
</script>
注意：在vue3中，<script setup>组件模式是私有的， 一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：
详情请查看：第十三节组件之间通讯
3、is用途
用于绑定动态组件；
比如：
<template><component :is="comName"></component><el-button @click="handleChangeCom">切换组件</el-button>
</template>
// comName 为动态组件名称
<script setup>import { ref, markRaw } from 'vue'import Work from './work.vue' // 组件内容： The job is GeYou's live.import UserInfo from './userInfo.vue' // 组件内容：用户信息const workRaw = markRaw(Work) // 注意这里需要使用markRaw 将组件标记为静态的，或者shallowRef 将组件标记为只有浅层代理的，否则会警告导致渲染失败const userInfoRaw = markRaw(UserInfo)let comName = ref(workRaw)const handleChangeCom = () => {console.log('===', comName)if (comName.value === workRaw) {comName.value = userInfoRaw} else {comName.value = workRaw}}
</script>
还有一种特殊情况使用is：
有时需要 Vue 用其组件来替换原生元素，如 DOM 内模板解析注意事项所述。你可以在 is attribute 的值中加上 vue: 前缀，这样 Vue 就会把该元素渲染为 Vue 组件：
<template><ul><li is="vue:my-lists-component"></li> // 这里会被渲染为 my-lists-component 组件</ul>
</template>
仅代表个人见解，如有错误，欢迎批评指正
)