Vue自定义组件强制销毁 刷新【重新渲染】

tianya • 2023-04-11 • VUE
Vue的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处；在特定的情况下，还真的要手工触发“刷新”操作，目前有四种方案可以选择：
刷新整个页面（最low的，可以借助route机制）
使用v-if标记（比较low的）
使用内置的forceUpdate方法（较好的）
使用key-changing优化组件（最好的）
## v-if
这个例子，相同使用`dialogVisible`，关闭dialog正好`false`会销毁自定义组件，打开又true重新渲染
```typescript
<el-dialog
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :show-close="true"
      title="请使用手机QQ扫描二维码"
      width="30%"
    >
      <get-skey v-if="dialogVisible" />
    </el-dialog>
```
## key-changing
原理很简单，vue使用 `key` 标记组件身份，当`key`改变时就是释放原始组件，重新加载新的组件。
```typescript
<template>
  <div>
    <span :key="key"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        key: 0
      }
    },
    methods: {
      handleUpdateClick() {
        this.key += 1
      }
    }
  }
</script>
```

版权声明：
作者：tianya
链接：https://tya.zone/p/67.html
来源：天涯博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
Vue自定义组件强制销毁 刷新【重新渲染】
Vue的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处；在特定的情况下，还真的要手工触发“刷新”操作，目前有四种方案可以选择： 刷新整个页面（……
<<上一篇
下一篇>>