Vue 更新Data数据页面无反应问题

问题描述

• 更新了data里的数据，页面无同步变化

原因分析

• 原因1：存在this指向问题，没有真正更新到data
• 原因2：Vue不能检测对象属性的添加或删除
• 原因3：更新的层级太深

解决方法

• 处理原因1：存储外部环境this指针，在异步回调函数中使用

var self = this;
$.get({
  url: '/api',
  success: function(res){
    self.list = res.data;
  }
})

• 处理原因2：可以使用Vue.set()函数

var self = this;
Vue.set(self.template, 'name', 'Kevin');

• 处理原因3：建议对象层级设计时尽量扁平化

  • 方法一：使用强制刷新

  var self = this;
  self.tempalte.hobby.games.football.color = 'blue';
  self.$forceUpdate();
  

  • 方法二：创建一个指向深层级的变量，然后直接更新该变量

  data: {
      tempalte: {
          hobby: {
              games: {
                  football:{
                      color: ''
                  }
              }
          }
      }
  },
  mounted: {
      var self = this;
      self.footballColor = self.tempalte.hobby.games.football.color;
  },
  methods: {
      setFootballColor: function(color){
          var self = this;
          self.footballColor = color;
      }
  }