【VUE】重置data中的数据

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
		}
	}
}