背景

由于项目代码实现的特殊性，在单选列表中，我需要手动给已有的对象添加一个新的属性selected。当选择该项的时候，新增且置为true，同时其他项置为false。代码实现如下。

 <div
    v-for="(item, index) in itemList"
           :key="item.nameCn" 
  >
     <el-radio
         v-model="item.selected"
         :label="true"
         @change="handleChangeAttr(item)"
      >
          {{ item.nameCn }}
      </el-radio>
  </div>

//handleChangeAttr()里面的处理逻辑
itemList.forEach((data) => {
  data.selected = false;
})
item.selected = true;

但是，出事儿了！会发现一个现象，点击第3个选项的时候，视图没有更新成选中状态，但是其对应的selected是true呢。并且，鼠标点击其他对象的时候，原来的对象视图才会刷新成正确状态。

我知道这个大概原因就是vue中的视图没有实时刷新！所以去了解了下详细原因和解决办法。

视图不更新的三种常见场景

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器划重点！！！！

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

1. 数组数据变动

可以被Vue检测到的数组变化方法：

push() pop() shift() unshift()
splice() sort() reverse() filter() concat(), slice()
这些不会改变原始数组，但总是返回一个新数组。

不可以被Vue检测到的数组变动：

当利用索引直接设置一个项时，vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如： vm.items.length = newLength

举个例子：

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

为了解决@1，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新.

// Vue.set 
Vue.set(vm.items, indexOfItem, newValue) 
// Array.prototype.splice 
vm.items.splice(indexOfItem, 1, newValue)

也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决@2，可以使用 splice：

vm.items.splice(newLength)

2.对象属性的添加或删除

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在data对象上存在才能让 Vue 转换它，这样才能让它是响应的。

解决办法

使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

Vue.set(vm.someObject, 'b', 2) 
or
this.$set(this.someObject,'b',2) （这也是全局 Vue.set 方法的别名）

如果需要向一个已有对象添加多个属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，这样添加到对象上的新属性不会触发更新。
在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` 
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })  // 深拷贝

3.异步更新队列

渲染的数据是你上一次选择的数据，并不是本次选择的数据，俗称“慢一拍”。

原因：

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
Vue在内部对异步队列尝试使用原生的 Promise.then MutationObserver setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

举个例子：

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 页面没有变化

解决办法：

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
//使用 Vue.nextTick(callback) callback 将在 DOM 更新完成后被调用
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
  vm.$el.style.color = 'red' // 文字颜色变成红色
})

视图不更新的拓展场景

1.数据更新层级太深

有些人说数据更新的层级太深，导致数据不更新或者更新缓慢从而导致试图不更新。

给出的解决方案是使用强制更新：

vm.$forceUpdate()

但是如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况是你在某个地方做错了事。

2.路由参数变化时，页面不更新（数据不更新）

拓展一个因为路由参数变化，而导致页面不更新的问题，页面不更新本质上就是数据没有更新。

原因：

路由视图组件引用了相同组件时，当路由参会变化时，会导致该组件无法更新，也就是我们常说中的页面无法更新的问题。

举个例子：

<div id="app">
  <ul>
    <li><router-link to="/home/foo">To Foo</router-link></li>    
    <li><router-link to="/home/baz">To Baz</router-link></li>    
    <li><router-link to="/home/bar">To Bar</router-link></li>    
  </ul>    
  <router-view></router-view>
</div>

const Home = {
  template: `<div>{{message}}</div>`,
  data() {
    return {
      message: this.$route.params.name
    }
  }
}

const router = new VueRouter({
  mode:'history',
    routes: [
    {path: '/home', component: Home },
    {path: '/home/:name', component: Home }
  ]
})

new Vue({
  el: '#app',
  router
})

上段代码中，我们在路由构建选项 routes 中配置了一个动态路由 '/home/:name'，它们共用一个路由组件 Home，这代表他们复用 RouterView 。

当进行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再进行路由切换时，message 是没有变化的。

解决办法：

解决的办法有很多种，这里只列举常用到的2种。

通过 watch 监听 $route 的变化。

const Home = {
  template: `<div>{{message}}</div>`,
  data() {
    return {
      message: this.$route.params.name
    }
  },
  watch: {
       '$route': function() {
       this.message = this.$route.params.name
    }
    }
}
...
new Vue({
  el: '#app',
  router
})

给 <router-view> 绑定 key 属性，这样 Vue 就会认为这是不同的 <router-view>。

弊端：如果从 /home 跳转到 /user 等其他路由下，我们是不用担心组件更新问题的，所以这个时候 key 属性是多余的。
```
<div id="app">
  ...
  <router-view :key="key"></router-view>
</div>
```

参考文章：

Vue数据更新了，视图层没有更新数据
 Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

我的Vue项目里视图为什么不能实时更新呢？

背景