vue的响应性原理探讨

在探讨vue的响应式的原理前我们思考一个下面代码

js逻辑代码

  methods: {
      addAttr() {
                this.user.age = 18;
            },
            changeName() {
                this.user.name = 'rose'
            }
  },

这个时候我们点击修改名字会改变吗？
点击给user赋值一个age会页面会显示吗？

---

这是运行的代码的结果（两个按钮都按了）

这里可以看到，数据是改变的，但是我们的age属性并没有显示到页面

查询vue文档

Vue 2 版本的响应性数据依赖

vue响应式数据是依赖 Object.defineProperty ，所以vue的响应性其实是要在ie8以上的浏览器才能适配，ie8以前的版本要做兼容处理，但是在组件渲染过程中，没有接触过的数据，并不会形成关联。
但是在vue 3.0 之后就解决了这个问题，因为vue3.0版本就使用代理对象的方式：new proxy 的方式，不会存在上面，没有默认字段，响应就失效的情况。

如何解决这个bug呢？

方法一：先声明一个默认字段。这是最直接的方法！！！

除了声明字段：
其实我们已经明白了，响应性不能响应新增加的属性，但是我们可以改变原来的整个数据
比如数组我们可以使用一些改变原来数组的api方法，也可以使用es6的展开运算符方式,重点是改变原来整个数据

解决方法二:

解决方案3:

官方给出方式:

对于对象

对于数组