(二)vue3之v |
您所在的位置：网站首页 › 动态refs › (二)vue3之v |
(二)vue3之v
|
1.简介
在vue2中，v-for绑定$refs将会自动生成一个refs的数组，但是在v-for中这种行为将会变得有歧义和不高效。 而在vue3中，这种用法就不会生效，因为vue3不会自动生成refs的数组。如果我们需要拿到多个的refs组成的数组，那么就需要使用函数的方式手动去绑定。 2.vue2中的用法 {{ item }} export default { name: "App", data() { return { list: [1, 2, 3], }; }, components: {}, mounted() { console.log("ref:", this.$refs.liRef); }, };打印出来的结果如下：
我们可以看到，在vue2中会自动生成refs数组。 3.vue3中的用法如果我们还是使用vue2中的用法，将会得到如下结果：
这时我们可以看到，vue3并不会自动帮我们生成refs数组，只能得到最后一个元素的ref。如果我们需要在v-for中绑定ref并生成refs数组，则需要使用函数的方式手动绑定，用法如下： {{ item }} export default { name: "App", data() { return { list: [1, 2, 3], itemRefs: [], }; }, methods: { setItemRef(el) { this.itemRefs.push(el); }, }, beforeUpdate() { this.itemRefs = []; }, mounted() { console.log("ref:", this.itemRefs); }, updated() { // console.log(this.itemRefs); }, };从代码中我们可以看到，ref绑定的是一个setItemRef函数，而setItemRef做的事情就是el push到itemRefs数组中，打印的结果如下： 现在的到的结果和vue2中的是相似的。 4.vue3 Array Refs的新特性现在的itemRefs不一定是一个数组，它也可以是一个对象。 setItemRef(el) { // this.itemRefs.push(el); // data中的itemRefs需要定义为对象 let index = parseInt(Math.random(1) * 1000); this.itemRefs[index] = el; },通过这样简单的实例改写方式，可以将itemRefs定义为一个对象。 |
【本文地址】