Vue2缺陷整理

<template>
  <div>
    <h2>响应式的缺陷-数组</h2>
    <div>
      数组的操作有7个方法有响应式的效果：

      push() pop() shift() unshift() splice() sort() reverse()
      就这个7个api会修改原数组(vue2的内部它重写这7个API)

      其他的操作都不会有响应式：
      1. 通过下标给元素赋值。
      2. 修改数组的length
    </div>
    <p>{{Math.random()}}</p>
    <p v-for="item in arr" :key="item">{{item}}</p>
    <button @click="fn">数组push</button>
    <button @click="fn1">把第一个元素改成100</button>
    <button @click="fn2">length改成0</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr:[1,2,3]
    }
  },
  methods:{
    fn2(){
      this.arr.length = 0
    },
    fn1(){
      // 直接通过下标来修改，没有响应式
      // this.arr[0] = 100

       //有响应式的两种
      // 方法1： 先删除，再添加
      // this.arr.splice(0,1,100)

      // 方法2： $set(对象/数组,键,值)
      this.$set(this.arr, "0", 100) 局部方法 
      全局 方法  Vue.set() 
    },
    fn(){
      // push()，pop()，shift()，unshift()，splice()，sort()，reverse()
      // 数组push
      this.arr.push(4)
    }
  }
}
</script>

更多# Vue.set()和this.$set()介绍及源码分析juejin.cn/post/684490… vue2通过Object.defineProperty实现响应式，因此无法检测数组/对象的新增，因为直接改变原数组的元数据所以无法检测到详情juejin.cn/post/684490…