vue 数据更改了,但是页面不更新原因

最近写项目是遇到一个问题,就是想要动态的给数组里的每个元素赋值。想通过动态的index来取数组里对象,并修改对应的对象的属性值。
写法如下:

	this.useList[index].plaintag = false;

这样写虽然是实现了数据的变化,但是页面却不更新。是由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:

	vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:

	vm.items.length = newLength

查阅了一些资料,总结vue数据更新,但是页面不更新的原因:
1、 Vue无法检测创建实例是不存在data中的属性。
原因:vue在初始化实例的时候对property属性进行get和set转换。所以property属性必须在data对象上存在才能让vue转换为响应式。

   // 问题
    var vm = new Vue({
        data: {},
        template: '<div>{{item}}</div>'
    })
    vm.item = 'hello world!!!'

    // 解决
    var vm = new Vue({
        data: {
            item: '', // 声明
        },
        template: '<div>{{item}}</div>'
    })
    vm.item = 'hello world!!!'

2、vue无法检测对象属性的添加和删除
原因:这是由于ECMAJavaScript 5 的限制,vue.js不能检测到对象属性的添加或者删除.

	//问题
	var vm =new Vue({
		data:{
			obj:{
				id:1
			}
		},
	    template: '<div>{{obj.item}}</div>' // 没有变化
	})
	vm.obj.item = 'hello world!!!'
	delete vm.obj.id 
	
	//解决办法
	//动态添加
	Vue.set(vm.obj, propertyName, newValue);
	Vue.$set(vm.obj, propertyName, newValue)
	//动态添加多个
	this.obj = Object.assign({}, this.obj, {a: 1, b: 2})
	//动态删除
	Vue.delete(vm.obj,propertyName);
	Vue.$delete(vm.obj,propertyName);
	

3、vue不能检测通过数组索引直接修改一个数组项,也不能直接修改数组的长度变化。
原因: 官方,由于js的限制,Vue不能检测数组和对象的变化,性能代价和获得用户体验不成正比

// 问题
    var vm = new Vue({
        data: {
            items: ['a', 'b', 'c']
        }
    })
    vm.items[1] = 'x' // 这不是响应性的
    vm.items.length = 4 // 不是响应的

    // 解决
    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    // vm.$set
    vm.$set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    // 解决长度
    vm.items.splice(newLength)
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值