Vue 2/3

有时候我们希望每次组件被调用时,初始化data中的数据
要是我们把初始化数据复制一遍来进行“重置”就有点不太好看了,例如:

export default {
	data(){
		return {
			product: {
				id: -1,
				title: '',
			}
		}
	},
	created() {
	    this._initializeData();
	},
	methods: {
		_initializeData()
		{
			let that = this;
			let _data = {
				product: {
					id: -1,
					title: '',
				}
			}
			for (var keyName in _data)  {
		        that[keyName] = _data[keyName]
		    }
		}
	}
}

这里介绍另一种方式,vue实例属性$options
官方文档:https://cn.vuejs.org/api/component-instance.html#options

$options是一个对象,对象暴露了当前组件的已解析选项,
并且会是以下几种可能来源的合并结果:

  • 全局 mixin
  • 组件 extends 的基组件
  • 组件级 mixin

有了个简单认识后,我们优化下上面的代码:

export default {
	// 以下是改变部分
	methods: {
		_initializeData()
		{
			// 整个data重置
			Object.assign(this.$data, this.$options.data.call(this))
			// 针对product重置
			this.$data.product = this.$options.data.call(this).product
		}
	}
}
Logo

前往低代码交流专区

更多推荐