问题:
添加和编辑功能同用一个模态框,并且反写数据时候,form表单里的数据并没有回显
原因:
当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
底层原因:
受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
this.$set(that.consultForm, 'max_minute1', row.price_info[0].max_minute);
Vue.set()和this.$set()实现原理
//Vue.set()
import { set } from '../observer/index'
...
Vue.set = set
...
import { set } from '../observer/index'
...
Vue.prototype.$set = set
...
底层代码逻辑原理
function set (target: Array<any> | Object, key: any, val: any): any {
...
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
if (!ob) {
target[key] = val
return val
}
//重要,重新触发getter和set
defineReactive(ob.value, key, val)
//通知更新到dom
ob.dep.notify()
return val
}
源码结论:
两者的底层原理都是一样的,
区别是Vue.set是绑定在构造函数上,
this.$set是绑定在vue的原型上