Vue中的this.$options.data()和this.$data_this.$options.data()触发表单校验-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45414633/article/details/118516434

本文讲述了在Vue中，当使用new Vue时从对象选项中设置data并重置时遇到的问题，如何理解this指向变化，并提供了正确使用call方法避免undefined的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继上一篇文章，在页面关闭是调用

Object.assign(this.$data, this.$options.data);

再次打开页面rules校验报错原因及解决办法

和Vue实例的初始化相关。(源码version2.6.10)

1、new Vue的时候传了一个对象，把该对象记为options，Vue将options中自定义的属性和Vue构造函数中定义的属性合并为vm.$options，vm.$options.data()中的this指向vm.$options，而methodA和B并没有直接挂在vm.$options下，所以this.methodA和this.B为undefined。

export default {
    props: {
        P: Object
    },
    data () {
        return {
            A: {
                a: this.methodA
            },
            B: this.P
        };
    },
    methods: {
        resetData () { // 更新时调用
            Object.assign(this.$data, this.$options.data()); // 有问题！！！
        },
        methodA () {
            // do sth.
        },
        methodB () { // 通过用户操作调用
            this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined！！！
        }
    }
}

解决办法：

data()中若使用了this来访问props或methods，在重置$data时，注意this.$options.data()的this指向，最好使用this.$options.data.call(this)。


		closed() {
			this.visible = false;
			this.isPassShow = false;
			this.$refs["detailForm"].resetFields();
			this.$parent.listenChild(true);
			Object.assign(this.$data, this.$options.data.call(this));
		},