Яма вью, на которую я лично наступил

внешний интерфейс JavaScript Vue.js

1. Vue не может обнаружить добавление или удаление свойств объекта:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{obj.a}}</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      obj: {},
    },
    mounted() {
      this.obj.a = 1111
    }
  })
</script>
</body>
</html>

Результатом операции является то, что браузер ничего не отображает.

Потому что свойства obj динамически добавляются мной! !


В документации vue говорится:Тем не менее из-за ограничений JavaScript Vue не может обнаружить добавление или удаление свойств объекта:

Таким образом, для динамического добавления свойств объекта и обновления страницы вы можете использовать следующий метод:

this.$set(this.obj,'a',1) // 方法一

this.obj = Object.assign({}, this.obj,{a:1})  //方法二 可以添加多个属性

два,Обнаружение обновления массива

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-for="item in arr"  :key="item.id">{{item}}</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      arr: [],
    },
    mounted() {
      this.arr.push(1)
    }
  })
</script>
</body>
</html>

Почему мы можем поместить его в массив и отобразить на странице? ? ? Я не думал об этом раньше! ! ! Я не знал этого, пока не набрал vm, не нажал Enter на панели консоли и не увидел следующее:


Методы мутации для набора наблюдаемых массивов, которые включает Vue! ! ! Не оригинальный метод толчка больше! ! !

Я пробую console.log(this.arr.push)

Что распечатывает:

function mutator() {
  var args = [], len = arguments.length;
  while (len--) args[len] = arguments[len];
  var result = original.apply(this, args);
  var ob = this.__ob__;
  var inserted;
  switch (method) {
    case 'push':
    case 'unshift':
      inserted = args;
      break
    case 'splice':
      inserted = args.slice(2);
      break
  }
  if (inserted) {
    ob.observeArray(inserted);
  } 
    // notify change 
    ob.dep.notify();
     return result 
}

После того, как метод push обернут vueob.dep.notify() уведомит страницу обновления!


#Меры предосторожности

Из-за ограничений JavaScript Vue не может обнаружить следующие изменяющиеся массивы:

  1. Когда вы используете индекс для прямой установки элемента, например:vm.items[indexOfItem] = newValue
  2. Когда вы изменяете длину массива, например:vm.items.length = newLength

Чтобы решить первый тип проблемы, можно достичь следующих двух способов:vm.items[indexOfItem] = newValueТот же эффект также вызовет обновление состояния:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

Для решения второго типа задач можно использоватьsplice:

example1.items.splice(newLength)


Категории