vue响应式小问

Question

vue用了一段时间了，对他的响应式不是很懂。vue响应式有一个限制，就是

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

然后我自己在平时做项目的时候发现还是有点不懂。

1. 第一种情况

这种情况就不放效果图了，因为浏览器空空如也，和官网描述情况一致，直接在现有对象上添加根级属性不会有响应式变化。

1. 第二种情况

如果是整个替换对象，那么页面是有相应式变化的

3.第三种情况

如果是先整个替换掉对象，然后再添加根级属性，照理添加根级属性页面应该不会有反应呀，但是实际效果是页面还是会有响应式变化

请问这要怎么解释呀？

Answer 1

先整个替换掉对象（这个时候是需要更新页面的，但还没有开始更新页面），然后再添加根级属性（还没有开始更新页面，user上多了个hobby）...开始更新页面（user 上有hobby，把hobby一起渲染到页面）