Добрый день. Есть такой экземпляр
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;
}
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<h1 v-once>{{ title }}</h1>
<p>{{ title }}</p>
<input type="text" v-on:input="changeTitle">
<p>{{ sayHello() }}</p>
<a v-bind:href="link_method()">Google</a>
</div>
И если запустить код на выполнение и в поле ввода что-то написать, то ни чего не поменяется. Хотя метод changeTitle наоборот способствует тому, чтоб текст изменялся везде, где это нужно. Но...
Если в методе sayHello удалить строку this.title = 'Andrey'; - то все работает так, как и планировалось. Вопрос - почему так происходит?
У меня есть такое объяснение, что изменение данной this.title влияет на все моменты её упоминания и т.к. она была упомянута в методе, который её возвращает, то и соответственно он пускается на выполнение каждый раз когда происходит изменение this.title. - Такое может быть полным бредом, но пока это единственное разумное для меня объяснение данного поведения.
С кодом можно тут поиграться клик