在vue中,data里面的数据改变了,试图却没有更新,常见的情况是

  1. 直接通过数组下标来修改数据,如:this.arr[2] =‘testStr’
  2. 当你修改数组的长度时,如 this.arr.length = 0
  3. 对象的删除和添加如:源对象时obj:{aa:‘aa’} 然后直接 obj.test 或者 delete obj.aa
    原因是Vue2.+ 中data数据对象是通过Object.defineProerty来进行数据的双向数据绑定,而数组则是监听数组的push和pop等操作数组的方法进行双向绑定的,因此当是通过下标来修改时便不能更新视图
  4. 异步队列更新dom导致的视图不更新,因为默认情况下,vuejs 是异步执行 dom 更新操作的。在下一个 tick 来临之前,vuejs 会收集数据变化,置于一个队列之中,下个 tick 来临之时,批量执行这些更新,并清空队列。虽然大部分情况下我们不需要关心这个更新 dom 机制,但是当下一步操作与之有关联时,我们就只能使用 nextTick 来解决了。即下一个数据的页面更新,依赖与上一个数据的页面更新完成时,才需要使用this.nextTick()来解决

此时我们该怎么办呢?有三种办法
1、 通过 s e t ( ) 方 法 如 : t h i s . set()方法 如:this. set()this.set(this.arr,‘2’,’‘testStr’’) 即this.$set(obj,key,val)

2、通过forceUpdate 如:在修改完数据后,直接 this.$forceUpdate()

3、修改另一个data里面的值主动更新触发渲染

代码例子

<template>
  <div class="demo" ref="refDemo">
  	方法一:{{arr[2]}}
	
	<button @click="Add">+</button>
		方法二:obj:{{obj.test[0].testStr}}
		方法三:
		<div  >{{test}}</div>
		<div v-if="test"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
	  return{
		  arr:[1,2,3,4,5,6],
		  obj:{
			  test:[{testStr:3}]
		  },
		  test:false
	  }
  },
  mounted() {
  	 
	
  },
  methods:{
	  Add(){
		  // 第一种方法  this.$forceUpdate()
		 
		  // this.arr[2]+=this.arr[2]
	 
		  // console.log('this.arr[2]:'+this.arr[2])
		  // this.$forceUpdate()
		   //=============================================
		  //第二种方法 $set()
		  
		  // this.$set(this.obj.test[0],'testStr',this.obj.test[0].testStr+3)
		  
		   //=============================================
		    // 方法三修改另一个data里面的值主动更新触发渲染
		  
		  //this.arr[2]+=this.arr[2]
		  // this.test =!this.test
		   //=============================================
		  //方法三优化版
		  this.arr[2]+=this.arr[2]
		  this.test=true
		  
		 this.$nextTick(() => {
		   this.test = false
		 })
		  
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

如有不解,请加群897149839

Logo

前往低代码交流专区

更多推荐