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说服了自己。

2. 数据监听

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区域的一个变量。

3. 数据更新事件

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

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

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

貌似看到组件刷新了~