脚本宝典收集整理的这篇文章主要介绍了Vue数组的动态响应，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1.Vue动态响应

• ①数据动态响应式是Vue的核心思想之一，动态响应可以简单理解为：数据更新→视图更新；视图更新→数据更新，这里的数据分为对象和数组；
• ②对象：Vue处理对象的方式是通过Object.defineProperty劫持数据，通过getter和setter来处理；

• ③数组：通过劫持数组的原型方法；将所有可能使得数组产生变化的方法劫持，当数据调用这些方法的时候，dep.notify()，会通知依赖于此数据的视图update();但是这样做会产生2个问题，如下：

  ['push','pop','shift','unshift','splice','sort', 'reverse']
   .forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
  const result = original.apply(this, args)
       ……
  //通知变化
  ob.dep.notify()
  return result
  })
  })

2.看看几个案例

• ①通过this.arr[index] = newValue赋值的方式不能更新视图；

• ②通过this.arr.length = 0,通过改变数组长度去改变数组，视图也不能更新；
  ①②虽然没有更新视图但是需要明白的是this.arr的数据是改变了的，只是没有通知依赖的数据更新；这是由于Vue没有做相应的处理。

  <p v-for="(item,index) in arr" :key="index">{{item}}</p>
  <button v-on:click="change">Click Me</button>
  
  data: {arr: [1, 3, 4, 5, 6],},
         methods: {
             change: function () {
                 this.arr[1] = 0;
                 this.arr.length = 0;}}

• ③混合方式
  若是①②和数组劫持了的方法一起使用，前面两种方法是起作用的；下图方法一和方法二的结果是不一样的，如下图所示，这也说明了在①和②中，数据是改变了的，只是视图没有更新。

  //方式一
  change: function () {
               this.arr[1] =0;
               this.arr.reverse()}
  //方式二
  change: function () {
               this.arr.reverse()
               this.arr[1] =0;}          

  

  
  

  

脚本宝典总结

以上是脚本宝典为你收集整理的Vue数组的动态响应全部内容，希望文章能够帮你解决Vue数组的动态响应所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。