vue3学习教程第十七节（特殊属性key，is，ref）

本节说明介绍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>

仅代表个人见解，如有错误，欢迎批评指正