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'