【recommend! ! ! 】vue does not update the data modification page; vue cannot monitor data changes; vue prints value pages without data; this.$set; this.$nextTick; this.$forceUpdate

Scenario: Vue is two-way data binding, so when the data is modified, the page should also change, but occasionally
1. Vue modifies the data and the page does not update, even if the data changes, but the page rendering does not change.
2. Or vue cannot monitor the data change;
3. Vue prints the page with value but no data arrives

Scenario 1. The modified data is not declared before, so use this.$set

  data () {
    
    
    return {
    
    
      obj:{
    
    
      	a:1
	  }
    }
   }
this.obj.b = 2 // 原先就没有b这个属性 即使赋值 页面也不会渲染

只有使用this.$set(目标对象,属性,值) 数据才是动态双向绑定的

this.$set(this.obj , 'b',  2) 

Scenario 2: Use this.$nextTick . This situation is aimed at clearly printing console.log values. The page has no value, and the data viewed by vue does have no value. At this time use the following package

      this.$nextTick(() => {
    
    
      	this.obj.a = 'a'
      })

Scenario 3. Use this.$forceUpdate()to force the Vue instance to re-render

Scenario 4. If none of them are valid, then use the above blending and nesting

      this.$nextTick(() => {
    
    
      	this.obj.a = 'a'
      	this.obj.timeDate = + new Date() // 最好给原数据里就先声明个 timeDate 然后改值触发obj监听
		this.$forceUpdate()
      })

Guess you like

Origin blog.csdn.net/i_am_a_div/article/details/127888486