vue3与vue2使用差别

 1.ref&$refs快速获取dom节点

vue3：

dom节点上创建ref后，方法里不再自动创建$refs；而是在dom创建ref时使其指向一函数，将所有获取的节点对象传到函数中。

PS:（1）此处为  :ref

        （2）vue3中此时itemrefs为对象；vue2此时为数组

HTML
<div v-for="item in list" :ref="setItemRef"></div>
JS vue2.X Data
export default {
data() {
return {
itemRefs: []
}
},
methods: {
创建和ref同名的函数
setItemRef(el) {
if (el) {
this.itemRefs.push(el)
}
}
},
使用直接this.xxx即可
beforeUpdate() {
this.itemRefs = []
},
updated() {
console.log(this.itemRefs)
}
}
JS vue3.X Data Setup（）
import { onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
setItemRef
}
}
}

2.$children不再支持

在 3.x 中，$children property 已被移除，且不再支持。如果你需要访问子组件实例，我们建议使用 $refs。

3.插槽的使用

vue3.X不再支持以下写法

<template slot='t3' slot-scope='scope'>
<h4>具名插槽t3</h4>
<p>{{scope.data}}</p>
</template>

4.响应式系统

5.Composition API

只在vue3.X存在，vue2.X中不存在

如果使用，更多详情参考官方文档Composition API。

但vue2.X中的data（）{return{}}，即Optition API 写法仍可行

PS：setup生命周期在beforecreate之前

在setup内调用钩子加上onsetup内加钩子；

同时使用时请

import { ref ，onmount} from 'vue'

最后

以上就是执着八宝粥为你收集整理的vue3与vue2使用差别的全部内容，希望文章能够帮你解决vue3与vue2使用差别所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。