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

251

02 мая 2017, 06:53

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

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. - Такое может быть полным бредом, но пока это единственное разумное для меня объяснение данного поведения.

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

Answer 1

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

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

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

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

<input type="text" v-model="title">

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

Answer 2

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

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Userscripts - подключение в качестве библиотеки

Возможно ли подключение одного Userscript из другого в качестве библиотеки? Не по ссылке на локальный/удалённый файл через @require, а "прозрачно",...

233

jQuery