Vue中data数据响应问题
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。也就是说创建过后，data中不允许添加根数据
1. 对对象处理
Vue可以检测到对象属性的修改，不能检测到对象属性的添加和删除，也就是说这种⽅式处理后，vue不能检察到数据变化，不能进⾏渲染更新，Vue可以使⽤Vue.set 和 Vue.delete实现
1. Vue.set
Vue.set ⽅法⽤于设置对象的属性，它可以解决 Vue ⽆法检测添加属性的限制，语法格式如下：
Vue.set( target, key, value )
2. Vue.delete
Vue.delete ⽤于删除动态添加的属性语法格式：
Vue.delete( target, key )
2. 对数组的处理
vue中的被包装的观察数组能够触发视图更新
有push(),pop(),shift(),unshift(),splice(),sort(),reverse()
不能检测到下⾯数组变化：
1）直接⽤索引设置属性，如 vm.item[0] = { }
2）修改数组长度，如vm.items.length = 0
⽤$set
Vue 包含⼀组观察数组的变异⽅法，它们将会触发视图更新，包含以下⽅法：
push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop() 从数组末尾移除最后⼀项，减少数组的length值，然后返回移除的项
shift() 移除数组中的第⼀个项并返回该项，同时数组的长度减1
unshift() 在数组前端添加任意个项并返回新数组长度
splice() 删除原数组的⼀部分成员，并可以在被删除的位置添加⼊新的数组成员
sort() 调⽤每个数组项的toString()⽅法，然后⽐较得到的字符串排序，返回经过排序之后的数组
reverse() ⽤于反转数组的顺序，返回经过排序之后的数组
<script>
var app = new Vue({
el: '#app',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' },
{message: 'Baz' }
],
addValue:{message:'zyb'}
},
methods:{
push(){
this.items.push(this.addValue)
},
pop(){
this.items.pop()
},
shift(){
this.items.shift()
},
unshift(){
this.items.unshift(this.addValue)
},
splice(){
this.items.splice(0,1)
vue逗号分割的字符串转数组},
sort(){
this.items.sort()
},
reverse(){
verse()
},
}
})
变异⽅法与⾮变异⽅法
变异⽅法(mutation method)，顾名思义，会改变被这些⽅法调⽤的原始数组。相⽐之下，也有⾮变异(non-mutating method)⽅法，例如：map(), filter(), concat(), slice() 。这些不会改变原始数组，但总是返回⼀个新数组。当使⽤⾮变异⽅法时，可以⽤新数组替换旧数组。同样页⾯会重新渲染
以下两种⽅式都可以实现和vm.items[indexOfItem]=newValue相同的效果，同时也将触发状态更新
concat() 先创建当前数组⼀个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数
组。
slice() 基于当前数组中⼀个或多个项创建⼀个新数组，接受⼀个或两个参数，即要返回项的起始和结束位置，最后返回新数组。
map() 对数组的每⼀项运⾏给定函数，返回每次函数调⽤的结果组成的数组、
filter() 对数组中的每⼀项运⾏给定函数，该函数会返回true的项组成的数组
3.注意
$set()⽅法更新时，页⾯会全部更新⼀遍，包括其他数据
某个数据更新，会更新渲染所有数据

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。