vue2：数据更新，视图不响应

1.关于数据更新，视图没有变化的原因总结：

请直接参考这篇文章

javascript - Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结_个人文章 - SegmentFault 思否

如果侵权请联系我删除

注意一点，这篇文章开头就说了：

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

所以，请慎用强制更新（vm.$forceUpdate）

2.本文主要内容：

以下是vue2的情况。本文主要想说引起视图没有响应式其中一种情况：Vue 无法检测对象 property 的添加。

这个问题是很常见的，我也是知道这个注意点，但我还是犯了这个错误。

结论：慎用this.variableName直接声明变量（如果你想视图是响应式的话）。

2.1 例子1

代码：

 视图：可以看到obj.name = 'jyj',但是视图没有显示

原因：

点击按钮，视图并没有发生更新，因为在这个组件初始化的时候，data里的obj对象并没有name这个属性，所以之后添加的obj.name不是响应式的

2.2 例子2

下面就是我遇到的问题了：复选框点击了却不勾选上，也是同样的原因，就不赘述了

 

 所以，当你想要视图响应式，一定要在初始化的时候定义好你需要的变量，而不是之后再去定义（暂不讨论$set）