Vant Rules this 指向问题

在使用 Vant 过程，Form 表单组件，自定义 Rules 无法获取当前作用域 this。

          <van-cell class="my-cell">
            <span class="my-cell-title" slot="title">提现地址</span>
            <van-field class="my-cell-value value-color input-placeholder" clearable :rules="validAddress"  input-align="right" error-message-align="right"  name='address' type="textarea" autosize rows="1" v-model="address">
            </van-field>
          </van-cell>

  validAddress: [
        { required: true, message: '必填项' },
        {
          validator: (value, rule) => {
            console.log(this) // 无法获取当前 data 信息
          },
          message: '地址有误，请重新输入'
        }
      ],

通过排查，发现是 Keep-alive 缓存页面导致。 我在 activated 调用了 Object.assign(this.$data, this.$options.data())初始化数据，这其实是不正确的清空数据方式。正确是在 deactivated 生命周期函数调用 this.$destroy()

  async activated () {
      // 初始化数据,导致 this 问题
     Object.assign(this.$data, this.$options.data())
  }

deactivated () {
    this.$destroy()
  }

总结下，原因是因为使用缓存 keep-alive ，但是又想初始化页面，使用了 Object.assign(this.$data, this.$options.data()) 导致组件出现异常，使用 this.$destroy() 解决了这个问题。