Vue中的set方法

Vue的set方法

通过set方法添加对象属性

var vm = new Vue({
	el:"#app",
	data:{
		userInfo:{
			name:"Dell",
			age:28,
			gender:"male",
			salary:"secret"
		}
	}
})

Vue.set(vm.userInfo,"address","beijing")
// 或者通过Vue实例
vm.$set(vm.userInfo,"address","beijing")

数组中的使用

var vm = new Vue({
	el:"#app",
	data:{
		userInfo:[1,2,3,4]
	}
})

平时操作数组主要是使用数组的变异方法

• unshift：头插
• shift：头弹
• push：尾插
• pop：尾弹
• splice：删除或替换
• sort：按特定规律排序
• reverse：反转

非变异方法

• filter：过滤数组中某些元素，返回符合条件的元素组成的新数组

• concat：合并两个或两个以上的数组，可以链式调用，返回合并后的数组

• slice：切割数组中某一段元素，返回一个切割出来的数组

• map：使用map方法会产生一个新的数组，数组的每一项就是我们return出去的值（所以map方法必须有返回值，如果没有return，那么新数组的每一项都为undefined），数组的个数与原数组一样

• some：会遍历数组中的每个元素，让每个值都执行一遍callback函数,如果有一个元素满足条件，返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

• forEach：遍历数组

• every：检测数组所有元素是否满足条件
  由于js的限制，vue不能检测数组和对象的某些变化

直接通过数组下标修改是无法触发响应式的，所以使用set

// 下表为1的数改成5
Vue.set(vm.userInfo,1,5)

官方用法

Vue.set( target, propertyName/index, value )

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

• 返回值：设置的值

• 用法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

注：对象不能是Vue实例或Vue实例的根元素