Vue3.0的新特性（11）v-for和key，v-bind，v-for中ref,v-for和v-if优先级,全局API

v-for和key

在Vue2.x中，我们都知道v-for每次循环都需要给每个子节点一个唯一的key，还不能绑定在template标签上

<template v-for="item in list">
  <div :key="item.id">...</div>
  <span :key="item.id">...</span>
</template>

...

... 而在Vue3中，key值应该被放置在template标签上，这样我们就不用为每个子节点设一遍：

<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

v-bind

在vue2.x中，如果一个元素同时定义了v-bind="object"和一个相同的单独的属性，那么这个单独的属性会覆盖object中的绑定：

<div id="red" v-bind="{ id: 'blue' }"></div>
<div v-bind="{ id: 'blue' }" id="red"></div>

<div id="red"></div>

然而在vue3中，如果一个元素同时定义了v-bind="object"和一个相同的单独的属性，那么声明绑定的顺序决定了最后的结果（后者覆盖前者）：

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="blue"></div>

<!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- result -->
<div id="red"></div>

v-for中ref

vue2.x中，在v-for上使用ref属性，通过this.$refs会得到一个数组：

<template
  <div v-for="(item,index) in list" :key='index' :ref="ItemRef"></div>
</template>
<script>
export default {
  data(){
    list: [1, 2]
  },
  mounted () {
    // [div, div]
    console.log(this.$refs.ItemRef) 
  }
}
</script>

但是这样可能不是我们想要的结果；因此vue3不再自动创建数组，而是将ref的处理方式变为了函数，该函数默认传入该节点：

<template
  <div v-for="item in 3" :ref="setItemRef"></div>
</template>
<script>
import { reactive, onUpdated } from 'vue'
export default {
  setup() {
    let itemRefs = reactive([])

    const setItemRef = el => {
      itemRefs.push(el)
    }

    onUpdated(() => {
      console.log(itemRefs)
    })

    return {
      itemRefs,
      setItemRef
    }
  }
}
</script>

v-for和v-if优先级

在vue2.x中，在一个元素上同时使用v-for和v-if，v-for有更高的优先级，因此在vue2.x中做性能优化，有一个重要的点就是v-for和v-if不能放在同一个元素上。

而在vue3中，v-if比v-for有更高的优先级。因此下面的代码，在vue2.x中能正常运行，但是在vue3中v-if生效时并没有item变量，因此会报错：

<template>
  <div v-for="item in list" v-if="item % 2 === 0" :key="item">{{ item }}</div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5],
    };
  },
};
</script>

全局API

全局API是直接在Vue上挂载方法，在Vue中，全局API一共有13个。分别是:
● createapp 返回一个提供应用上下文的应用实例；
● h 返回一个”虚拟节点；
● definecomponent 返回options的对象，在TS下，会给予组件正确的参数类型推断；
● defineasynccomponent 创建一个只有在需要时才会加载的异步组件；
● resolvecomponent 按传入的组件名称解析 component；
● resolvedynamiccomponent 返回已解析的Component或新建的VNode；
● resolvedirective 通过其名称解析一个 directive;
● withdirectives 返回一个包含应用指令的 VNode;
● createrenderer 跨平台自定义渲染;
● nexttick 是将回调函数延迟在下一次dom更新数据后调用;
● mergeprops 将包含 VNode prop 的多个对象合并为一个单独的对象;
● usecssmodule 访问 CSS 模块;
● version 查看已安装的 Vue 的版本号;