vue使用key实现组件刷新(渲染重置)

vue使用key实现组件刷新(渲染重置)笔记

关于这个问题,大佬们提供了很多种组件重置的方法,比如 v-for、key、以及this.$forceUpdate()等。

如这位大佬将 v-for和key的方法讲的很详细,额 我猜了一个原创链接:https://www.cnblogs.com/zyulike/p/12036456.html

参考原文(转载):https://blog.csdn.net/zyx1303031629/article/details/86656785

v-if 的方法类似于dom操作,如

v-if="flag === true"
or
v-if="flag === false"

this.flag = false;
this.$nextTick(() => {
    this.flag = true
})

小编由于之前用过v-if的方法,所以这次试了试数据驱动的味道,即传说中的key方法。步骤如下:

  1. 组件模板中数据绑定
<template>
    <sa :ids="ids" :key="randerKey" />
</template>

其中:

ids是需要子组件渲染的内容

randerKey是,是什么呢,类似于timestemp吧,其实小编也没去搞搞清楚,只是用timestemp说服了自己。

  1. 数据监听
watch:{
    ids() {
        ++this.randerKey
    }
},

这里在读大佬文章时开始没看明白,折腾了一会,所以特地做个笔记。所谓万般折腾只为卿。

watch在Vue官网文档中 计算属性-vs-侦听属性 是这个样子:

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子:

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

这会了解了,原来在watch 的管辖范围,每个函数对应data区域的一个变量。

  1. 数据更新事件

这里小编的做法未必是正确的,但代码跑的时候出了效果。

随便写了一个method,做了++操作。

methods: {
    superMan() {
        ++this.randerKey;
    }
}

貌似看到组件刷新了~

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!