【报Bug】页面和组件均销毁后，再次进入props内的值依然存在

详细问题描述

1、页面index跳转到页面detail，detail内使用组件test，test通过props接收页面的参数。

2、触发返回按钮，返回到index页面，detail页面被销毁（组件也被销毁了）。

3、再次进入detail页面，页面数据为空，组件里props内的数据依然存在。

IDE运行环境说明

mac笔记本
vscode进行开发

代码片段

<template>  
  <view class="content">  
    index  
    <button @click="toDetail">跳转detail</button>  
  </view>  
</template>  

<script>  
export default {  
  name: 'index',  
  data() {  
    return {}  
  },  
  methods: {  
    toDetail() {  
      uni.navigateTo({  
        url: `/pages/index/detail`  
      })  
    }  
  },  
  onLoad() {  
    console.log('index onload')  
  },  
  onUnload() {  
    console.log('index onUnload')  
  }  
}  
</script>  

<style lang="less">  
</style>  

<template>  
  <view>  
    detail  
    <test :valueList.sync="testData"></test>  
  </view>  
</template>  
<script>  
import test from '@/common/test.vue'  
export default {  
  name: 'detail',  
  components: { test },  
  data() {  
    return {  
      testData: []  
    }  
  },  
  onLoad(options) {  
    console.log('detail onload', this.testData)  
  },  
  onUnload() {  
    console.log('detail onunload')  
  }  
}  
</script>  
<style lang="less">  
</style>  

<template>  
  <!-- 组件test -->  
  <view>  
    <input v-model="name" />  
    <button @tap="add">添加</button>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      name: '',  
      list: []  
    }  
  },  
  props: ['valueList'],  
  mounted() {  
    this.list = this.valueList  
    console.log('组件test mounted valueList', this.valueList)  
  },  
  destroyed() {  
    this.$emit('update:valueList', [])  
    console.log('组件test destroyed', this.valueList)  
  },  
  methods: {  
    add() {  
      this.list.push(this.name)  
      console.log('test list', this.list)  
      this.$emit('update:valueList', this.list)  
    }  
  }  
}  
</script>  

<style>  
input {  
  border: 1px solid red;  
}  
</style>

联系方式

[QQ] 1040237162