Разговор о наблюдателе в vue

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

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

watch: {
  someProp () {
    // do something
  }
}

// 或者
watch: {
  someProp: {
    deep: true,
    handler () {
      // do something
    }
  }
}

Приведенный выше текст говорит vue, что мне нужно отслеживать изменения свойства someProp, поэтому vue создаст для нас объект-наблюдатель внутри. (Ограничено местом, мы не будем говорить о конкретной реализации watcher, если вам интересно, вы можете непосредственно посмотреть исходный кодwatcher)

Однако в vue функция наблюдателя не такая уж и единственная, сначала код выше:

<template>
  <div>
    <p>a: {{ a }}</p>
    <p>b: {{ b }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    	a: 1
    }
  },
  computed: {
    b () {
    	return this.a * 2
    }
  },
  watch: {
    a () {
        console.log('a is changed')
    }
  },
  methods: {
    increment () {
    	this.a += 1
    }
  },
  created () {
    console.log(this._watchers)
  }
}
</script>

онлайн демо

Приведенный выше код очень прост, сейчас мы сосредоточимся наcreatedПечать на крючкеthis._watchers,следующим образом:

Разверните три наблюдателя соответственно и наблюдайте за каждым выражением сверху вниз:

  • b() {↵ вернуть this.a * 2;↵ }
  • "a"
  • function () {↵ vm._update(vm._render(), гидратация);↵ }

Вышеупомянутые три наблюдателя представляют наблюдателей с тремя различными функциями, и мы делим их на три категории в соответствии с их функциями:

  • Наблюдатель (второй), определенный в часах для прослушивания изменений свойств
  • наблюдатель за вычисляемыми свойствами (первый)
  • наблюдатель за обновлениями страницы (третий)

normal-watcher

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

computed-watcher

Каждое вычисляемое свойство в конечном итоге сгенерирует соответствующий объект-наблюдатель, но у этого типа наблюдателя есть характеристика, которую мы берем выше.bПример:

Атрибутыbполагатьсяa,когдаaпри смене,bОн не будет пересчитан сразу, только позже будет прочитан в другом месте.bОн будет действительно вычислять только тогда, когдаленивая функция

render-watcher

Каждый компонент будет иметь наблюдатель за рендерингом,function () {↵ vm._update(vm._render(), hydrating);↵ }, когда данные/вычисления Рендер-наблюдатель вызывается для обновления представления компонента при изменении свойств в нем.

Порядок исполнения трех наблюдателей

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

computed-render -> normal-watcher -> render-watcher

Причина такого расположения заключается в том, чтобы гарантировать, насколько это возможно, что при обновлении представления компонента вычисляемое свойство уже имеет самое последнее значение. вызывать вычисляемое значение при обновлении страницы для старых данных

резюме

Эта статья не является статьей об анализе исходного кода, а просто для того, чтобы поговорить об этом с точки зрения.Эти, казалось бы, несвязанные вещи (вычисление/просмотр/обновление страницы) тесно связаны внутри.

Категории