Vue3和Vue2的一些写法区别

发表于 更新于 分类于 阅读次数：

摘要

本篇记录 vue3 和 vue2 在实现相同的逻辑上的一些语法差异，持续更新。

事件绑定

在开发过程中会遇到需要定制一些 video 或者 audio 播放组件，需要用到一些原生的事件。但是 vue3 和 vue2 原生事件的绑定是不一样的。
例如下面的音频播放组件
vue2 中只需要在 mounted(组件渲染完成的时候)在获取 dom 元素上直接绑定事件就可以

1
2
3
4
5
6
mounted(){
    this.$refs.audioRef.onloadedmetadata = (evt)=>{
        // 编写自己的逻辑
        xxxxx
    }
}

但是在 vue3 中，如果你也按照这样的逻辑编写

1
2
3
4
5
6
7
8
let audioRef = ref()
onMounted(()=>{
    audioRef.value.onloadedmetadata = (evt)=>{
        // 编写自己的逻辑
        xxxxx
    }
})
// 上面这种事件不会触发，根本就像没有绑定一样

所以需要改成如下写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<audio
  ref="wechatVoice"
  :src="audioSrc"
  v-bind="{ onloadedmetadata, onended }"
>
  Your browser does not support the
  <code>audio</code>
  element.
</audio>

<script lang="ts" setup>
    const onloadedmetadata = (evt) => {
        // 编写加载完成之后的逻辑
    }
    const onended = (evt) =>{
        // 编写播放完成之后的逻辑
    }
</script>