0

Пожалуйста, объясните почему вызывается метод fullName когда нажимаешь на кнопку?

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

let sample = new Vue({
  el: '.sample',
  data: {
    firstName: '',
    lastName: '',
    showText: false
  },
  methods: {
    fullName() {
      console.log('render fullname');
      return this.firstName + ' ' + this.lastName;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="wrapper">
  <div class="sample">
    <input type="text" v-model="firstName">
    <hr>
    <input type="text" v-model="lastName">
    <hr>
    <h2>Hello, {{ fullName() }}</h2>
    <hr>
    <button class="btn btn-success" @click="showText = !showText">
      ToggleText
    </button>
    <hr>
    <div v-show="showText">Some text</div>
  </div>
</div>

https://codepen.io/anon/pen/voGPNq?editors=1010

Я знаю, что нужно этот метод запихнуть в свойство computed, но я не понимаю почему и как оно работает, так как не понимаю почему вызывается метод fullName в свойстве methods.

Когда нажимаешь на кнопку, заново отрисовывается весь sample с дочерними элементами или что?

10
  • {{ fullName() }} - такая запись как бы намекает, что при рендеринге нужно вызвать метод fullName
    – Dmytro
    24 июл 2019 в 14:50
  • @Дмытрык рендеринг в данном случае это что?Отрисовка всего дива, со всеми вложенными элементами при нажатии кнопки?А если просто в поле ввода, которое связано с заголовком вводить по одному символу, то тоже весь родительский блок РЕНДЕРИТСЯ ?
    – Lyy
    24 июл 2019 в 14:59
  • Ответьте хоть кто-нибудь, ну поооооожааааааааааалуйста, я уже не знаю где искать/читать/смотреть....
    – Lyy
    24 июл 2019 в 18:23
  • Кликая на кнопку, вы изменяет состояние, при этом, VUE проверяет и остальные значения. Но так как у вас в шаблоне идет вызов метода, вот он и отрабатывает
    – Dmytro
    24 июл 2019 в 19:19
  • @Дмытрык Состояние чего?Дива в котором лежит Some text?Почему vue проверяет и остальные значения?И как с этим всем связано ваше следующее предложение?
    – Lyy
    24 июл 2019 в 19:37

1 ответ 1

2

Упрощенная и несколько измененная HTML разметка кода из вашего вопроса:

<div id="app">
  <h2>Hello, </h2>
  <input type="text">
  <button type="button">ToggleText</button>
  <p>Some text</p>
</div>

Примерно так можно схематически представить DOM дерево данного фрагмента:

div id="app"
--h2
  --Hello
--input type="text"
--button type="button"
  --ToggleText
--p
  --Some text

Так же схематически представим виртуальный DOM Vue (VNode) в виде абстрактной структуры данных:

{
  data: {
    attrs: {id: 'app'}
  }
  tag: 'div'
  text: undefined
  children: [{
    data: undefined
    tag: 'h2'
    text: undefined
    children: [{
      data: undefined
      tag: undefined
      text: 'Hello,  '
    }]
  }, {
    // ... другие дочерние узлы
  }]
}

VueJS использует виртуальный DOM и если нужно внести изменения, то они вносятся прежде всего в виртуальный DOM, потом сравниваются с исходным DOM. Окончательные изменения вносятся в реальный DOM.

Как по вашему можно определить, что результат функции (метода) отличается от первоначального? А если в этой функции выполнялись какие-либо асинхронные операции? Наверное, при таком раскладе нужно выполнить функцию. И выполняться она будет всегда, в отличии от вычисляемого свойства (computed), результаты которого кэшируются и повторное вычисления выполняются только при изменении реактивной зависимости (данных из полей props, data, других полей из computed и т. д.).


Вспомним, что компоненты — это переиспользуемые экземпляры Vue со своим именем, и имеют такие же опции, что и корневой экземпляр, такие как data, computed, watch, methods и т. д.

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

Каждый компонент имеет зону ответственности в пределах корневого элемента:

<template>
  <!-- Зона ответственности компонента в пределах блока DIV -->
  <div>
    <!-- ... остальная разметка. -->
  </div>
</template>

А экземпляр приложения не имеет прямого доступа за пределы элемента, селектор которого вы указываете в поле el, например: el: '#app', el: '.sample' и т. д.


В вашем случае: при изменении поля showText происходит повторная отрисовка DOM внутри блока с классом sample. А при отрисовки всегда будет выполняться fullName().

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

const app = new Vue({
  el: '#app',

  data: {
    firstName: '',
    lastName: '',
    showText: false,
  },

  computed: {
    simple: function() {
      console.log('simple');
      return 'Mr. ' + this.firstName;
    },
  },

  methods: {
    fullName: function() {
      console.log('render fullname');
      return this.firstName + ' ' + this.lastName;
    },
    toggle(event) {
      this.showText = !this.showText;
    }
  }
});

// document.querySelector('h1').classList.add('new');
<div id="app">
  <h1>Hello, {{ simple }}</h1>
  <h2>Hello, {{ fullName() }}</h2>

  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
  <button type="button" @click="toggle">ToggleText</button>

  <p v-show="showText">Some text</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


Полезные ссылки: Что такое Virtual DOM? (оригинал).

3
  • Поправьте пожалуйста, если я неправильно понял.При малейшем изменении внутри компонента - происходит отрисовка абсолютно всего компонента?А если там ,скажем, миллион дочерних элементов?
    – Lyy
    26 июл 2019 в 14:41
  • Попробую ещё раз...все изменение сначала записываются в виртуальный dom, этот виртуальный dom сопоставляет себя с реальным и если есть различия, он точечно их исправляет... при этом ВЫЗЫВАЯ ФУНКЦИИ,КОТОРЫЕ НИКАК НЕ СВЯЗАНЫ С ЭТИМИ РАЗЛИЧИЯМИ...что?В моем понимании это может произойти, только если пошагово перерисовывается весь компонент, что вы и написали: "При изменении поля showText происходит повторная отрисовка DOM внутри блока с классом sample"
    – Lyy
    26 июл 2019 в 15:39
  • @Lyy, читайте внимательнее. Добавил код с вычисляемым свойством, которое не пересчитывается при нажатии на кнопку в отличии от метода. Если вам удобно считать, весь DOM перерисовывается - считайте, как хотите. Мне добавить нечего к ответу.
    – user256824
    26 июл 2019 в 16:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.