学习Vue的数据监视总结

今天学习了Vue的数据监视，它和我们前几节课学习到的watch监视不同，那个是我们手动给某一个属性绑定一个监视，当它发生变化时调用设置好的回调函数，而今天学习的数据监视虽然原理有共同点，但很多细节和底层原理不同。首先老师给我们演示了在对象中追加属性，发现页面没有自动刷新，通过分析得知Vue默认情况下是不会给我们在对象中追加的属性做响应式处理，这也就导致了我们更新了数据页面没刷新的问题，知道这个原因之后我们再给对象追加属性时就需要自己使用API给追加的属性做一个响应式来解决这个问题。第二个问题就是我们直接通过索引号去更改数组中的数据页面也是没有刷新的，这同样说明了该操作Vue也是没有赋予数组响应式，查看API文档才得知，Vue认为我们更改数组是要通过数组指定的方法去更改元素，而不能直接通过索引号去更改，这里Vue就对数组的监视做了一个加工，就是通过包裹数组更新元素方法去实现监视，一旦调用了这里面包裹好的方法，Vue不会去破坏原生的数组方法，而是先帮你调用，调用完对数据进行更新之后再重新解析模板更新到页面上，这也就解释清为什么通过索引号更新数据没法刷新页面的问题，这里虽然不能通过数组的索引号直接进行赋值，但可以通过索引号指定数组的对象中的某个属性再进行更改，因为数组元素是没有被监视的，但数组元素里面的对象属性是有被监视的，所以可以通过这种方法进行更改数组元素中的对象的属性数据。最后说到的就是数据劫持，这个比较好理解，就是通过前几节课学过的Object.defineProperty这个API，因为我们读或改数据时这个方法就会调用get或set方法，正是这两个方法实现了数据劫持，通俗易懂来说劫持就是在途中拦截了下来，然后在这里可以添加一些我们附加的操作，而不只是简单的读和写。