Зависимоть свойст компонента Vue

Андрей Зимин

Добрый день. Есть такой экземпляр

new Vue ({
  el: '#app',
  data: {
  	title: 'Hello World!',
    link: 'http://google.com'
  },
  methods: {
  	changeTitle: function(event) {
    	this.title = event.target.value;
    },
    sayHello: function() {
    	this.title = 'Andrey';
    	return this.title;
    },
    link_method: function() {
    	return this.link;
    }
  }
});
<div id="app">
  <h1 v-once="">{{ title }}</h1>
   <p>{{ title }}</p>
  
  <p>{{ sayHello() }}</p>
  <a v-bind:href="link_method()">Google</a>
</div>

И если запустить код на выполнение и в поле ввода что-то написать, то ни чего не поменяется. Хотя метод changeTitle наоборот способствует тому, чтоб текст изменялся везде, где это нужно. Но...

Если в методе sayHello удалить строку this.title = 'Andrey'; - то все работает так, как и планировалось. Вопрос - почему так происходит?

У меня есть такое объяснение, что изменение данной this.title влияет на все моменты её упоминания и т.к. она была упомянута в методе, который её возвращает, то и соответственно он пускается на выполнение каждый раз когда происходит изменение this.title. - Такое может быть полным бредом, но пока это единственное разумное для меня объяснение данного поведения.

С кодом можно тут поиграться клик

2 ответа

Андрей Зимин

Вся беда в том что вы в методе sayHello пишите:

this.title = 'Andrey';
return this.title;

И потом вызываете его на странице, и каждый раз когда вы работаете с инпутом отрабатывает метод sayHello который перебивает значение.

И советую лучше инпут переделать на модель:

И тогда метод changeTitle не нужен, v-model работает по таком же принципу.


Андрей Зимин

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

Это из оф.док-ции. Т.е. мое предположение было верным. При изменении свойств компонента - это циклически затрагивает все вещи связанные с этим компонентом.

Используем this.$set.title вместо this.title

licensed under cc by-sa 3.0 with attribution.