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-ifv-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 的版本号;
请添加图片描述

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值