相关文章推荐
低调的绿茶  ·  SQL ...·  1 年前    · 
不开心的夕阳  ·  在 Dynamics 365 ...·  2 年前    · 

建议读读 Vue官方文档深入响应式原理 的介绍,对这一块你的理解会加深很多
深入响应式原理

vue代码中,只要在data对象里定义的对象,赋值后, 任意一个属性值发生变化 视图都会实时变化

比如下面在data定义了obj对象,mounted里赋值后,(也可以在其他地方赋值)只要 obj.a 或者 obj.b 的值改变了,视图会跟着变化

data() {
	return {
		obj: {}
mounted: {
	this.obj = {a:1, b: 2} // 改变this.obj.a this.obj.c的值视图会更新
	this.obj.c = 3 // 改变this.obj.c的值  视图不会更新
	Object.assign(this.obj, {d: 4}) // 改变this.obj.c的值 视图不会更新
	this.$set(this.obj, 'e', 5) // 改百年this.obj.e时 视图会更新
	console.log('obj' + this.obj)

但是我们在obj对象上新增的属性变化时,值会变化,但是视图不会实时变化
比如obj.c或者obj.d变化时,值虽然会变,但是视图不会跟着变
在这里插入图片描述

Vue.$set()

Vue官方文档
在这里插入图片描述
使用Vue.$set()方法,既可以新增属性,又可以触发视图更新,比如obj.e改变时,视图会相应改变
在这里插入图片描述
打印出的obj,可以看出,新增的属性只有通过this.set()的obj.e属性getset方法的,而新增的obj.cobj.d没有

根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新

当我们把一个JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty把这些属性全部转为 getter/setter

Vue.$set()源码

Vue2.6.12版本的源码

* Set a property on an object. Adds the new property and * triggers change notification if the property doesn't * already exist. export function set (target: Array<any> | Object, key: any, val: any): any { if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target)) warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: 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 const ob = (target: any).__ob__ if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== 'production' && warn( 'Avoid adding reactive properties to a Vue instance or its root $data ' + 'at runtime - declare it upfront in the data option.' return val if (!ob) { target[key] = val return val defineReactive(ob.value, key, val) ob.dep.notify() return val * Define a reactive property on an Object. export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean const dep = new Dep() const property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return // cater for pre-defined getter/setters const getter = property && property.get const setter = property && property.set if ((!getter || setter) && arguments.length === 2) { val = obj[key] let childOb = !shallow && observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) return value set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return /* eslint-enable no-self-compare */ if (process.env.NODE_ENV !== 'production' && customSetter) { customSetter() // #7981: for accessor properties without setter if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal childOb = !shallow && observe(newVal) dep.notify()

Object.assign()

给data定义的对象新增属性,同时又要视图实时更新,除了用Vue.$set()方法,也可以通过Object.assign()实现

data() {
	return {
		obj: {}
mounted: {
	this.obj = { a: 1, b: 2 }
    this.obj.c = 3
    Object.assign(this.obj, { d: 4 })
    // this.$set(this.obj, 'e', 5)
	// 下面这一行代码才触发了视图更新
    this.obj = Object.assign({}, this.obj, {e: 5})
    console.log("obj", this.obj)

以上的代码等同于

data() {
	return {
		obj: {}
mounted: {
	this.obj = { a: 1, b: 2, c: 3, d: 4, e: 5 }

$set()方法不生效时,改用Object.assign()试试

今天一美女同事使用this.$set()去改变一个传入组件的对象(没有直接定义在data对象中,通过mixins选项做相关操作,能够通过this.去获取),没有触发视图更新

而改用Object.assign()去给对象重新赋值时,会触发视图更新

通过重新给对象赋值,来使视图更新;
使用Object.assign()新增,或者改变原有对象,

// 起作用的是给对象重新赋值
this.obj = Object.assign({}, this.obj, {e: 5})

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强

推荐阅读
Vue2.0 源码学习完整目录

Vue.$set给对象新增属性在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,不会更新视图。根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性... nodes里面的内容,左边是另一个数组中每个元素的id,右边是该元素另一个属性属性值。 如图所示,左边的值是图中array数组中的id的值,右边是对应的moneyNum的值,将这两个属性从这个数组中提取出来,然后添加到一个新的对象中,传给后端。 data() { return { // 定义一下这个对象
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象添加新的属性,如果更新此属性的值,是不会更新视图的。 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。 受现代 JavaScript
mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minData对象,遍历添加属性value和content(方便后续通过v-model设置绑定radio控件
this.$setVue.js 提供的一个方法,用于在 Vue 实例中动态添加响应式属性。它的用法如下: this.$set(object, key, value) 其中,object 是要添加属性对象,key 是属性名,value 是属性值。这个方法会将属性添加对象中,并且使其成为响应式的,这样当属性值发生变化时,Vue 会自动更新视图。 例如,如果我们有一个 data 对象: data: { message: 'Hello, Vue!' 如果我们想要动态添加一个属性,比如 count,我们可以这样做: this.$set(this.data, 'count', 1) 这样,我们就可以在模板中使用 {{ count }} 来显示 count 属性的值了。