Тема номера - слушатели часов .
Когда мы на самом деле разрабатываем динамические веб-страницы , большинство значений постоянно меняются.Если нам нужно прислушиваться к некоторым изменениям значений для соответствующей обработки , лучшим выбором будет наблюдение за слушателями.
<div id="app">
<input type="text" v-model='msg'>
<h3>{
{msg}}</h3>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:''
},
watch:{
'msg':function(newV,oldV){
console.log('newV',newV);
console.log('oldV',oldV);
if(newV === '100')
{
alert('Hello!');
}
},
}
});
Как обычно, мы написали поле ввода, а тег h3 используется для привязки значения поля ввода.
Затем в экземпляре Vue мы написали атрибут watch на том же уровне, что и данные , а затем написали некоторую обработку поведения в виде пар ключ-значение .
«msg» - это имя атрибута объекта в данных, а именно ключ.
Последняя функция - это значение, которое представляет собой процесс обработки после того, как мы услышим изменение значения.
Два параметра: newV - это последнее значение на данный момент, а oldV - это старое значение до изменения.
Затем открываем F12 и смотрим.
Начальное значение равно 1. После того, как мы введем 10 в поле ввода, консоль выдаст новое и старое значение соответственно. Таким образом, мы завершили мониторинг значений и можем также выполнить соответствующую обработку. Например, мы вводим 100
потому что мы находимся в функции Если newV равно 100, мы выдадим окно подсказки.
Это просто прослушивание базового типа данных, если это сложный тип данных, такой как Object / Array.
Соответственно, Vue также предоставляет нам возможность всестороннего прослушивания .
<div id="app">
<h3>{
{obj[0].name}}</h3>
<button @click='obj[0].name = "CreatorRay" '>改变</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
obj:[{
name:'Ray'}]
},
watch:{
'obj':{
deep:true,
handler(newV,oldV){
console.log('newV',newV);
console.log('oldV',oldV);
},
}
}
});
Формат синтаксиса очень похож: на этот раз мы написали тег h3, начальным значением которого является объектный атрибут obj в данных, и кнопку для изменения значения атрибута, привязанного к h3.
В атрибуте watch мы видим, что форма по-прежнему является парой ключ-значение, но мы заключаем в значение фигурную скобку и в дополнение к функции обработки также добавляем предложение deep: true, которое является знаком глубокого слушания.
Давайте попробуем эффект:
Перед нажатием кнопки:
После нажатия кнопки: Мы
слышали изменение значения объекта, но мы видим, что значения newV и oldV совпадают. Что случилось?
Собственно, официальный сайт Vue уже упоминал об этом.
Примечание. При изменении (не замене) объекта или массива старое значение будет таким же, как новое значение, поскольку их ссылки указывают на тот же объект / массив. Vue не будет хранить копию значения до мутации.
Эта проблема более глубокая. На самом деле, есть решения этой ситуации, которые можно решить , вычислив атрибуты . Я выскажу отдельное решение позже.
На самом деле здесь есть еще один важный момент.Также есть атрибут при углубленном прослушивании, немедленный , который можно настроить на немедленный возврат .
Если мы не напишем это свойство, событие глубокого прослушивания будет запущено только после того, как мы нажмем кнопку.После записи этого свойства return и присвоения значения true, даже если мы не нажали кнопку, оно будет прослушивать один раз. В некоторых бизнес-сценариях этот атрибут очень практичен.
Я не буду делать здесь демонстрацию, вы можете попробовать сами.
Есть дизайн мини-программы WeChat, все потребности в дизайне, контактный вопрос: 505417246
Обратите внимание на следующую общедоступную учетную запись WeChat, вы можете получать апплет WeChat, Vue, TypeScript, интерфейс, uni-app, полный стек, Nodejs, Python и другие практические учебные материалы. Самый
последний и наиболее полный обзор знаний и исходный код проекта будет опубликован в WeChat как можно скорее. Нет, обратите внимание, спасибо!
