vue组件不更新的解决方式

在工作中共碰到了el-dialog中的aduio的路径没有按照我的代码即时更新

在每次点开时src路径还是上一次点击的链接，存在组件不刷新/刷新延迟的问题

解决方法记录

在不刷新的aduio标签上添加 :key值 等于一个变量

<audio controls :key="timeAduio">
        <source :src="aduioSrc">
</audio>

之后在触发的方法里，每次给变量赋值时间戳，改变每次的key值，以达到更新的目的

this.timeAduio = new Date().getTime()

另外两种更新组件的方式

1.v-if

当等于false时，v-if会将元素从Dom树移除，等于false时添加回来，每次状态的变化，都会让组件重新渲染

2.this.$forceUpdate()

this.$forceUpdate()是一个Vue组件实例的方法，调用它会强制组件及其子组件重新渲染，即便数据并未发生变化。