Vue о реактивности в глубине, почему Vue может обнаруживать добавление свойств, как это？

Question

Я тестирую пример! Посмотри как это.

<el-button type="primary" @click="onAdd">add</el-button>
<div>{{arr[3]}}</div>
<div>{{obj.text}}</div>
<div v-show="obj.text2">{{obj.text2}}</div>

data() {
        return {
            arr: [1, 2, 3, 4],
            obj: {
                text: 1
            }
        };
    },

при таком использовании представление не может обновляться.

    methods: {
        onAdd() {
            // this.$set(this.arr, 3, 0);
            this.arr[3] = 0;
            this.obj.text2 = 'text2';
        }
    },

но view может обновлять все, я не знаю, почему view зависит от obj, который можно обновить?

methods: {
        onAdd() {
            this.$set(this.arr, 3, 0);
            this.obj.text2 = 'text2';
        }
    },

Answer 1

демо:

let obj = {}
Reflect.defineProperty(obj, 'text', {
  get() {
    return 'text of obj'
  },
  set(v) {
    console.log('you are changing the text property to ' + v)
  },
  enumerable: true
})
obj.text = 1;

Мы можем определить свойство объекта, когда вы захотите изменить его. Так работает демонстрация выше и код ниже.

        this.obj.text2 = 'text2';

Тем не менее, мы можем обнаруживать только такие операции, как приведенный ниже код:

        this.arr[3] = 0;

потому что ваш код может быть:

        this.arr[100] = 0;

, который добавляет новое свойство к массиву. Так что в этом случае мы не можем и не должны обнаруживать такие операции, как:

        this.arr[num] = 0;

потому что обнаружение не завершено и поэтому проблема.