关于Vue双向绑定出现的数据覆盖问题

Vue数据绑定的注意点

学过Vue的同学一点都知道 v-model指令在表单input、textarea及select元素上创建双向数据绑定。
简单示例

	<input v-model="message">
	<p>Message is: {{ message }}</p>
	new Vue({
		data:{
		return{
		message:''
		}}
	})

Vue会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-mode l会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：text 和 textarea 元素使用 value 属性和 input 事件； checkbox 和 radio 使用 checked 属性和 change 事件； select 字段将 value 作为 prop 并将 change 作为事件。

第一个问题

在我的项目开发过程中出现了数据绑定失败的问题

	<el-form-item label="难度">
         <el-input v-model="model.scores.difficult"></el-input>
      </el-form-item>
      
	data() {
	    return {
	      categories: [],
	      model: {
	        title: '',
	        titleName: '',
	        scores: {
	          difficult: ''
	        }
	      }
	    }
	  },

以上是我在data中定义的数据和绑定，其中model是通过异步请求过来的数据

 async fetch() {
      const res = await this.axios.get(`rest/heroes/${this.id}`)
      this.model = res.data
    },

而这样的书写会使页面上已经绑定的值被异步请求的数据覆盖，会发生数据在页面上不显示的问题
解决方法

async fetch() {
      const res = await this.axios.get(`rest/heroes/${this.id}`)
      this.model = Object.assign({},this.model,res.data)
      // 将请求回来的值一次的进行深拷贝，可以是完整的数据显示
    },

如果对Object.assign()不了解的可以参考MDN上的详解
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

第二个问题

受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。例如：

<el-form-item label="标题">
     <el-input v-model="model.title"></el-input>
</el-form-item>
      
	data() {
	    return {
	      model: {}
	    }
	  },
	this.model.title = '问题'

通过 obj.xxx = xxx;这种方法进行绑定； 经过测试发现双向绑定并没有实现。但有时会也会响应，这个作者一直头痛的问题。
在data中的model对象没有定义title的值，那么title就是动态添加，就是非响应的。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

 this.$set(this.model, 'title', '问题')

或者另一种简单的解决方式为在数据对象的model中对每个引用值都先赋值就不会出现上述问题。

欢迎指导文章错误。