vue通过下标修改数组里面内容,同时通过下标修改数组对象里面的内容,然后页面数组更新了。。。

vue通过下标修改数组里面内容,同时通过下标修改数组对象里面的内容,然后页面数组更新了???

项目里面一直都是知道vue通过下标修改数组里面内容是触发不了页面的更新的,需要用其他方式,当我写其他内容的时候,发现如果在更新其他能触发页面更新的时候,神奇的来了,之前的数组没触发更新的,居然也跟着页面更新了。。。

原来是我孤陋寡闻了,vue的响应式还是没有深入去探讨和了解

<template>
  <div>
    首页
    <div>{{ arr }}</div>
    <div>{{ objarr }}</div>
    <div @click="btn">按钮</div>
    <div @click="btn1">按钮</div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      arr: [1, 2, 3],
      objarr: [
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        }
      ]
    }
  },
  components: {},
  created() {},
  computed: {},
  methods: {
    btn() {
      // this.arr[0] = 100
      this.objarr[0].num = 100
      // this.$set(this.arr, 0, this.arr[0])
      console.log(this.arr)
    },
    btn1() {
      this.arr[0] = 100
      console.log(this.arr)
      // this.objarr[0].num = 100
      // console.log(this.arr)
    }
  }
}
</script>

<style scoped lang="scss"></style>

过程是这样的:
1、先触发btn事件,objarr 在页面的数据更新了;
2、再触发btn1事件,arr 没有更新,因为修改下标不会触发页面更新;

接下来换个顺序:
1、先触发btn1事件,arr 没有更新;
2、再触发btn事件,objarr ,arr 都更新,怀疑是不是vue响应式把data里面的数据更新到页面;

你可能感兴趣的:(Vue,vue.js,javascript,前端)