Предположим, у вас есть следующий код:
<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>
new Vue({
el: '#root',
data: {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
})
Эффект приведенного выше кода заключается в том, что когда мы вводимfirstNameназад,wacthСлушайте новое значение каждого изменения модификации, а затем вычисляйте выходные данные.fullName.
метод обработчика и непосредственное свойство
Одной из особенностей watch здесь является то, что она не будет выполняться при первоначальной привязке, а будет ждать, покаfirstNameРасчеты прослушивателя выполняются только при наличии изменений. Так что же нам делать, если мы хотим выполнить изменение, когда он изначально связан? Нам нужно изменить запись часов. Модифицированный код часов выглядит следующим образом:
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
}
УведомлениеhandlerТем не менее, мы связаны с первым знакомhandlerметод, метод watch, который мы написали ранее, на самом деле написан по умолчаниюhandler, Vue.js будет обрабатывать эту логику, и окончательная компиляция на самом деле такова.handler.
а такжеimmediate:trueЭто означает, что если firstName объявлено в wacth, он немедленно выполнит метод обработчика внутри.falseКак и наш предыдущий эффект, он не будет выполнен при связывании.
глубокий атрибут
Существует также свойство в часахdeep, значение по умолчаниюfalse, который представляет, следует ли отслеживать глубоко, например, у нас есть один в данныхobjАтрибуты:
<div>
<p>obj.a: {{obj.a}}</p>
<p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
new Vue({
el: '#root',
data: {
obj: {
a: 123
}
},
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true
}
}
})
Когда мы вводим данные в поле ввода, представление меняетсяobj.aКогда значение, которое мы обнаружили, является недопустимым. Современный JavaScript по ограничениям (а также отходам)Object.observe)，Vue 不能检测到对象属性的添加或删除。 Поскольку Vue будет выполнять свойства свойств при инициализации экземпляраgetter/setterпроцесс преобразования, поэтому атрибут должен быть вdataОбъект существует для того, чтобы Vue преобразовывал его так, чтобы он реагировал.
По умолчанию обработчик только слушаетobjЭтот атрибут меняет свою ссылку, мы только даемobjОн будет прослушиваться только при назначении, например, в смонтированной функции обработчика событий.objПереназначить:
mounted: {
this.obj = {
a: '456'
}
}
Чтобы наш обработчик выполнился, напечатайтеobj.a changed.
Вместо этого, если нам нужно слушатьobjсвойства вaстоимость? В этот моментdeepАтрибуты пригодятся!
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
deep: true
}
}
deepСмысл в том, чтобы наблюдать глубоко, слушатель будет проходить слой за слоем и добавлять этот слушатель ко всем свойствам объекта, но накладные расходы на производительность будут очень большими, любая модификацияobjЛюбая из этих свойств будет вызвать обработчик в этом слушателю.
Для оптимизации мы можем использовать прослушиватель строковой формы.
watch: {
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
// deep: true
}
}
Таким образом, Vue.js будет анализировать слой за слоем, пока не встретит атрибуты.a, а затем датьaУстановите функцию прослушивания.
выйти из системы смотреть
Зачем выходить из системыwatch?因为我们的组件是经常要被销毁的，比如我们跳一个路由，从一个页面跳到另外一个页面，那么原来的页面的 watch 其实就没用了，这时候我们应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。
const app = new Vue({
template: '<div id="root">{{text}}</div>',
data: {
text: 0
},
watch: {
text(newVal, oldVal){
console.log(`${newVal} : ${oldVal}`);
}
}
});
Однако, если мы напишем watch следующим образом, то нам нужно выйти из системы вручную, что на самом деле очень просто
const unWatch = app.$watch('text', (newVal, oldVal) => {
console.log(`${newVal} : ${oldVal}`);
})
unWatch(); // 手动注销watch
app.$watchПосле вызова он вернет значение, котороеunWatchметод, вы хотите отменить регистрацию, просто позвонитеunWatchметод подойдет.
над.
Эта статья была впервые опубликована на официальном аккаунте «Front-end Full-Stack Developer» ID: by-zhangbing-dev, прочитайте последние статьи как можно скорее и отдайте приоритет публикации новых статей через два дня. Обратив внимание, ответьте, пожалуйста, личным письмом: Большая подарочная упаковка, отправка по сети качественных видеокурсов онлайн с информацией о дисках, безусловно, сэкономит вам много денег!