关于vue组件注销的小坑

背景：

今天在工作中，手机端写到一个评价功能的界面。其中评价内容有用户选择和输入，从用户使用角度考虑，当用户没有提交评价的时候，退出当前页面，下次在进入评价页面，要保留上次用户输入的内容，避免用户误触返回按键或系统返回键导致之前写的评价内容都被清空了。而当用户提交评价后，提交成功的时候，对组件的输入相关字段进行还原。（暂且不论id变化导致的页面数据重新拉取）

相关知识点

1.组件缓存路由

2.vue生命周期

3.vm.$destory()注销组件

4.vm.$options实例初始化选项

5.Object.assgin对象变更检测注意事项

↑↑以下内容我就当你已经对上述知识点已经有一定的了解，如果还不了解，点击送飞机票直达~

2020-01-09 00:41:06更新：以上的链接好像在手机上支持不是很好，不能正常跳转到对应锚点，pc端正常。

---

具体demo代码如下：

//data
data(){
    return{
        isSubmitSuccess:false,//是否已经提交成功，默认未提交成功，用于判断是否可以重新初始化页面数据
    }
},
//生命周期函数
activated(){
    this.isSubmitSuccess = false;
    console.log('页面激活时触发的：this.isSubmitSuccess',this.isSubmitSuccess);
},
deactivated(){
    console.log('执行注销操作，当前是否已经成功提交：isSubmitSuccess:',this.isSubmitSuccess);
    if(this.isSubmitSuccess){
        console.log('现在成功触发了，注销页面组件');
        // this.$destroy(); //尝试1
        // this.$data = this.$options.data();   //尝试2
        Object.assign(this.$data,this.$options.data());  //尝试3
    }else{
        console.log('没有触发，不应该触发页面重载');
    }
},

---

尝试一

为了方便，第一次想法是当用户评价提交成功后，直接将组件给注销掉。

结果：

1.模拟用户在提交成功和为提交的情况下退出评价页面。在未提交前，不管切换多少次，组件都没注销（正常）

2.当模拟触发提交传成功后，之后无论如何切换，组件都会重新刷新（不满足需求）

原因：根据官方文档和Google，终于让我得知，当触发实例的$destory()方法后即使时用了，在组件被注销后就不会再被缓存了，于是就有了第二点，触发后，每次切换进入都重新加载组件。

尝试二

Tips：$options还可以有别的作用，比如初始化某个特定的值，详情上面有飞机票~不做赘述。

通过多方查找（Google）、请教前辈，也怪我看文档不够认真（手动跪键盘），终于看到了$options这个属性。

于是就有了第二个尝试，然鹅...

image.png

嗯，没错，报错了。秉承着错误嘛，谁都会犯的原则，先谷歌翻译一下，大概意思就是说根

image.png

因此，就有了第五个知识点，Object.assign.也就是最后的那次尝试，如愿以偿。

总结

感觉手册这东西，不认真看吧，都不知道什么时候被自己坑的不要不要的，但是在没用到的时候，去看手册又和天书一样。Orz...把坑记录下来，避免下次再踩的时候，就能马上想起来了，同时分享给大家，不要踩和我一样的坑，或者踩到之后能快速有效的解决。

现在是2020-01-09 00:33:56，工作完了，遇到的坑当然要记下，不管多晚。

晚安~ ，欢迎留言交流~共勉。