vue项目统一响应_vue中使用$set实现深入响应式原理

前言：其实使用vue的都知道，vue声明在data中的属性都是响应式的，也就是，我们在修改data中的属性时，一般页面都能实时更新。但是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。比如我们对data中的对象属性和数组属性进行一些修改时，无法响应式更新渲染到页面，因此vue提供了$set这个API来解决这个限制。

一 改变数组使用$set:

其实根据vue的官网，明确说明了下面两种改变数组的操作时无法做到响应式更新页面的

也许此时你还会不信，就偏偏用上边这两种试一下，看看是否真的无法更新页面信息，当然我也测过：

因为，之前第一次使用vue开发项目时碰到过一个奇葩的问题，我就是直接使用上边 '1' 的这种方法改变数组，奇怪的是本地浏览器竟然也更新了，刚开始以为是缓存什么的问题，但是重启项目，清空浏览器缓存，还是一样能更新。最后打了个包放到测试环境看了下，确实无法渲染使用这种方式改变数组，仔细看了下官网，还是按照它这规范操作数组，问题解决。

1. 改变数组的错误样式：

a.下边使用上面不提倡的 '1'这种方法改变数组：

结果：单单看打印出来的数组信息，list对应下标的元素是改变了，但是页面确实没有响应式更新。

b. 看下第 '2' 中不提倡的方式：

一样，打印出来的数组长度是变化了，但是页面显示的长度还是最初数组的长度

2. 使用vue约定的方式操作数组：

二 使用$set操作对象：

1. 使用vue约定的方式操作对象：

a. 往对象中新增一个属性

b. 往对象新增多个属性：

2. 不正确的方式操作对象：

看下无法更新对象的写法(以添加一个属性为例)：

到这里，因为javaScript的限制，Vue 不能检测数组和对象的变化的问题，通过提供的$setAPI得以解决了。

3. 非对象或数组的单个属性：

$set是vue专门针对对象和数组的问题的，关于单纯的属性，vue官方是建议在开始时根据需要直接声明在data中，不然直接把一个data中没声明的属性，在某个dom中渲染使用或者直接在某个想选中对它进行操作，控制台肯定会报：

Property or method "xxx" is not defined on the instance but referenced during render.