【浅谈下Vue项目视图不更新问题】

浅谈下Vue项目当中遇到的数据更改视图不更新问题。

在工作当中，有时我们会遇到vue项目里一些数据更改，但是视图不刷新的问题。

效果图：

代码如下：

<template>
  <div class="hello">
    输入的值inputValue：<input v-model="inputValue" @input="changeObjValue" />
    <div>绑定的值obj.a：{
   
   {obj.a}}</div>
    <div>绑定的值obj.o.m.n：{
   
   {obj.o.m.n}}</div>
    <div>绑定的值arr[2]：{
   
   {arr[2]}}</div>
    <button @click="setObjValue">set value</button><br />
    <button @click="setObjNValue">set obj.o.m.n value</button><br />
    <button @click="setArrValue">set arr[2]</button>
  </div>
</template>

<script>
export default {
      
      
  data(){
      
      
    return{
      
      
      inputValue: '',
      obj:{
      
      
        a:'',
        o:{
      
      
          m:{
      
      
            n: ''
          }
        }
      },
      arr: [1,2,3]
    }
  },
  created(){
      
      
    // this.obj = {}
  },
  methods:{
      
      
    changeObjValue(){
      
      
      this.obj.a = this.inputValue
      this.setObjValue()
    },
    setObjValue(){
      
      
      if(this.obj.a) this.obj.a += '1111->'
      if(!this.obj.a) this.obj.a = '1111->'
      // if(this.obj.o.m.n) this.obj.o.m.n += '2222->'
      // if(!this.obj.o.m.n) this.obj.o.m.n = '2222->'
      // if(this.arr[2]) this.arr[2] += '3333->'
      // if(!this.arr[2]) this.arr[2] = '3333->'
      //  this.arr[2] += '3333->'
      // this.$set(this.arr,2,'111')
      console.log('obj.a==== ',this.obj.a)
      console.log('obj.o.m.n==== ',this.obj.o.m.n)
      console.log('arr[2]==== ',this.arr[2])
    },
    setObjNValue(){
      
      
      // this.obj.o.m.n = '2222->'
      this.setObjValue()
    },
    setArrValue(){
      
      
      // this.obj.o.m.n = '2222->'
      this.arr[2] += '3333->'
      console.log('arr[2]==== ',this.arr[2])
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
      
      
  text-align: left;
  margin: 15% 20%;
  line-height: 40px;
}
</style>

情况分析：
什么时候会遇到视图不更新的情况（像Object,Arrary这些复杂数据类型）：

1. 当我们在data定义一个Arrary，更改相对应的元素时。
2. 当我们在data定义一个Object，未给数据里属性（如上面obj里的a）赋初值时。
3. 当我们在data定义一个Object，数据里属性已经赋初值，但是在对数据进行操作时，属性丢失或被删除时。
   

解决方案：
如何解决上面视图不更新的问题：

1. 最简单粗暴的方法，给定义的obj/arr数据进行整体赋值（但是要注意属性得一致，避免属性丢失，不推荐用于数据结构复杂的情况）。
2. vue提供了$set方法（但是在项目中也遇到使用了$set方法，但是视图不更新的情况，现阶段在查找问题后，发现要么是数据未赋初值，要么是在数据在操作过程中丢失了）。
3. 对于合同，表单之类的数据结构复杂的数据，建议进行数据拆分，传输数据时再组成后端想要的数据进行提交请求。

总结：
在我们工作或学习过程中，各种各样的数据处理一定得仔细，尽量提高数据可阅读性，方便问题查找。
ps：如之后项目遇到其他情况，会继续更新该文章！！！也欢迎各位大佬提出补充。