问题描述
data里定义的变量值已经更新了，但是视图层没有及时响应，仍然保持上一下次修改的值。
原因
vue在创建页面时，会先遍历 data 中的数据，并为它们设置 getter 和 setter 方法，以此作为实现数据双向绑定的基础。但是如果在实例创建之后新添加到实例上的属性，它是不会触发视图更新的。因为新增的属性，并没有通过object.defineProperty设置成响应式数据。
解决办法
-
方法1：
// 对象
Vue.set(obj,propertyName,value);
// 数组
Vue.set(arr,index,value);
-
方法2：
Object.assign()；
// 例子
let newObj = Object.assign({}, newObj, {newProp1: 1, newProp2: 2, ...});
-
方法3（不推荐使用)
$forceUpdate()
// 需要强制更新的地方使用
this.$forceUpdate();
注意：如果发现需要在 vue 中做一次强制更新，99.9% 的情况，是因为在某个地方没有写对，$forceUpdate迫使 Vue 的页面实例重新渲染。
以上为个人开发中遇到的问题及解法，如有更好的方案，欢迎一起探讨。 👏🏻👏🏻👏🏻
希望对你有帮助，感谢你的阅读。
每篇一点毒鸡汤
有人说，人生就像一场马拉松。但我觉得，人生更像一场障碍赛，你不仅要跑，还要随时准备跳坑、爬墙、滚泥潭。
