vue3中这几个变化你要注意了

ref

在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。

在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，通过将 ref 绑定到一个更灵活的函数上 (这是一个新特性)：

<div v-for="item in list" :ref="setItemRef">{{item}}</div>

options API:

export default {data() {return {itemRefs: [],list: [1, 2, 3]}},methods: {// ref指定的函数setItemRef(el) {this.itemRefs.push(el)}},mounted () {console.log(this.itemRefs)}
}

如果需要，itemRef 也可以是响应式的且可以被监听。

v-if 和 v-for

Vue.js 中使用最多的两个指令就是 v-if 和 v-for，因此开发者们可能会想要同时使用它们。虽然不建议这样做，但有时确实是必须的。

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。

3.x 版本中 v-if 总是优先于 v-for 生效。

// v-if中的index不是list的索引，而是在外层作用域中，你可以写在data中
<div v-for="(item, index) in list" :key="index" v-if="index > 1">{{item}}</div>

类名

过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。

.v-enter-from,
.v-leave-to {opacity: 0;
}.v-leave-from,
.v-enter-to {opacity: 1;
}

为了更加明确易读

vue3中这几个变化你要注意了相关推荐

中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...
vue3中的ref 和 reactive 定义数组
在vue3中,定义响应式数据一般有两种方式:ref 和 reactive 一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型但是也可以使用 ref 来定义数组 ...
Vue3中Vuex的使用
Vuex是做什么的? Vue官方:状态管理工具状态管理是什么? 需要在多个组件中共享的状态.且是响应式的.一个变,全都改变. 例如一些全局要用的的状态信息:用户登录状态.用户名称.地理位置信息.购物 ...
深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再来一层层揭开 Diff 算法的面纱,深入浅出,助你彻底弄懂 Diff 算法原理认识虚拟 DOM ...
13个Vue3中的全局API的源码浅析汇总整理
前言不知不觉vue-next的版本已经来到了3.1.2,最近对照着源码学习vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官方定义.用法.源码浅析三个维度来一起看看它们.下 ...
【Vue3中的响应式原理】
Vue3响应式原理在Vue2的响应式中,存在着新增属性,删除属性以及直接通过下标修改数组,但页面不会自动更新的问题.但是在Vue3中,这些问题都得以解决. Vue2中的响应式原理首先我们先看一下V ...
如何在vue3中优雅地使用v-model？
文章目录 ps:vue3中推荐使用的是reactive写法,文中这种格式只是为了和vue2做对照,只是为了凸显vue3中对v-model的改进,仅供参考. Vue中的数据绑定 v-bind v-bin ...

vue3中这几个变化你要注意了

ref

v-if 和 v-for

类名

vue3中这几个变化你要注意了相关推荐

最新文章

热门文章