data的数据在页面销毁时候不会初始化

[lessthanno]

[在vue文件中，data的数据参数是true & false，页面销毁后无法进行初始化]

data() {
    return {
      index:1,
      isShowModal: false,
      isScroll: true
    };
  },

当把this.isShowModal = true 之后，返回上一页面后再回来，isShowModa 还是true

[lessthanno]

目前暂时的解决方案是：
调用onUnload()方法来重制

 onUnload() {
    this.isScroll = true;
    this.isShowModal = false;
 }

希望能过改进 的问题：
1.能解决页面销毁后，data能初始化isShow:false&true 这种bool类型
2.vue的生命周期"beforeDestroy"，"destroyed" 在页面被销毁的时候能执行，并不太想用小程序自带的生命周期（不优雅）

[BeiXiao]

同遇到了这个坑，页面卸载后vue组件没有destroyed，似乎每个page都是用的同一个vue实例，这样页面如果很多的情况下，会太耗内存吧？

[rchunping]

期待尽快解决这个问题， onUnload里处理只能解决这个页面不重复进入的情况。
同一个页面同时打开多个的话还需要解决维护多份data数据堆栈的问题
希望框架能自动处理这块逻辑

[sharkdong]

复议

[scutcl]

复议

[charmingzuo]

复议
我用小程序的生命周期回调，不会有这个问题

[CXY037]

这个问题不是wepy的问题，是小程序自己的问题，wepy有同样的问题，可以取检索相关问题

[whapply]

我怎么没遇到，我在created中把isShowModal改成false啦，没有闪动啊...

[JasonDRZ]

这是JS的对象存储问题造成的，之前在写个人基于小程序框架时遇到过同样的问题。小程序在使用初始化数据时进行了深度Copy，因此我们在页面生命周期内对原生小程序上的data字段的任何操作，都是不会修改源数据的。而mpvue对小程序的管理过程中，其实是与小程序进行了JS对象数据共享，但是mpVue并没有进行初始化数据的深度copy，而是直接操作源数据。小程序页面在销毁后，mpvue没有做到数据还原，这就造成了两方初始数据异同的问题。页面在下一次初始化时所调用的初始化数据对象是来自mpvue的，而mpvue的数据对象是在上一次使用更新后遗留下来，这就让小程序使用了已更新后的数据进行页面初始化，导致我们看到的关闭后再次打开页面数据还是上一次的问题。如果mpvue能及时响应小程序的页面初始和结束生命周期，对初始数据进行备份和恢复，那就perfect了。

[JasonDRZ]

这个问题有个简单的处理方法，将data(){}数据函数独立于mpvue实例之外，然后在mounted钩子中加入Object.assign(this,data());这段代码来让小程序页面的数据进行初始化还原。帖段代码出来：

亲测有效！

[JasonDRZ]

注意，不要将数据初始化放到created钩子下，created钩子只会执行一次，页面重开是不会执行它滴。

[F-loat]

@JasonDRZ 不需要另外存一份，vue2 开始通过 this.$options.data() 就可以拿到 data 的初始值了

[rchunping]

@JasonDRZ 对一个page需要同时打开多次的情况还是不行的，比如从一个A用户详情页打开另一个B用户详情页，从B 回退的到A的时候就有问题了，因为这时A并不会再次mounted

这种情况我们是暂时这样处理

const dataStack = []
export default {
  onLoad() {
      dataStack.push({...this.$data}) // 备份

     // 其他初始化.....
  },
  onUnload() {
     // 其他清理....

     Object.assign(this.$data, dataStack.pop()) //恢复
  }
}

[JasonDRZ]

@F-loat 恩恩，是的，突然忘记了。

[JasonDRZ]

@rchunping 针对这个问题我这边用了一个全局的mixin方法来处理，这样就不需要每个页面都进行数据备份和恢复的处理了，不需要进行处理的页面标识一下就OK，代码如下：

然后就是你给出的数据备份方案是有点问题的，直接备份$data对象可能导致后续的数据更新污染备份数据，如果你要采用这种数据备份方式的话，建议stringingfy一次，存成字符串，或存parse后的对象，这样备份的数据才不会被污染。但是何必这么麻烦呢，直接用数据初始化函数data()不就搞定了嘛，哈哈哈。

[rchunping]

如果我没理解错的话 data()里只有"初始"数据吧，那些异步加载过来后来塞进去的怎么处理呢？

[JasonDRZ]

@rchunping 如果你是要保存异步数据的话，就另当别论了，这个方法只是为了将页面数据重置到初始状态。

[hopperhuang]

长期跟踪这个issue

[comkis]

感觉小程序有返回的页面都是属于不销毁的那种，不仅仅是数据，在返回到该页面的时候：created因为是小程序的整合变成一次性执行，mounted也只执行一遍，所以页面是保留下来的啊。。所以这个问题怎么解决呢？vue是返回也会重新渲染的呢，起码created和mounted都会再执行

[lemonpigpig]

复议

[lemonpigpig]

@rchunping Cannot set property $data of #<Vue$3> which has only a getter

[lostinfo]

复议

[yy007668]

复议

[hughfenghen]

@JasonDRZ 不要截图哇，```js 贴源码多好。。

[zWingz]

同页面的不同数据栈求解决

[cytle]

综上，可以在onLoad钩子里加入一句，如下

export default {
    data() {
        return {
            index: 1,
            isShowModal: false,
            isScroll: true,
        };
    },
    onLoad() {
        Object.assign(this, this.$options.data());
    },
};

[limichange]

因为页面根本没有销毁

[Rem486]

关注

[lessthanno]

onLoad() {
Object.assign(this, this.$options.data());
},
这个方案也是临时，mpvue应该就默认得销毁

[xian107]

这样会不会更好
onUnload() {
Object.assign(this, this.$options.data());
}

[hgt803]

这样会不会更好
onUnload() {
Object.assign(this, this.$options.data());
}

如我所想

[khejing]

参见#140，在官方解决以前，用@HelloZJW 的mpvue-loader分支搭配mpvue-page-factory 可解决这个问题

[immafrady]

Vue.mixin({
  onUnload () {
    this.$destroy()
  }
})

在unload时强行销毁，目前看来没大问题……