предисловие
Некоторых новичков могут смутить сценарии использования вычисляемых свойств и свойств прослушивания.Эта статья в основном знакомит с использованием, сценариями использования и различиями между ними. Пожалуйста, нажмите на код этой статьиблог на гитхабе, это мелко на бумаге, давайте начнем вводить больше кода!
вычисляемое свойство
1. Введение
Вычисляемые свойства автоматически отслеживают изменения в зависимых значениях, тем самым динамически возвращая содержимое. Мониторинг — это процесс. Когда отслеживаемое значение изменяется, можно инициировать обратный вызов и что-то сделать. Он имеет следующие особенности:
- Данные можно логически обрабатывать, уменьшая логику вычислений в шаблоне.
- Мониторинг данных в вычисляемых свойствах
- Положитесь на фиксированные типы данных (реактивные данные)
Вычисляемое свойство состоит из двух частей: get и set, которые используются для получения вычисляемых свойств и установки вычисляемых свойств соответственно. По-умолчанию есть только get.Если нужно установить, то нужно добавить самому. Кроме того, set устанавливает свойства, не изменяя напрямую вычисляемые свойства, а изменяя их зависимости.
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
//this.fullName = newValue 这种写法会报错
var names = newValue.split(' ')
this.firstName = names[0]//对它的依赖进行赋值
this.lastName = names[names.length - 1]
}
}
}
Теперь при повторном запуске vm.fullName = 'John Doe' будет вызван сеттер, и vm.firstName и vm.lastName будут соответственно обновлены.
2. Вычисленные свойства против обычных свойств
Вычисляемые свойства могут быть привязаны к шаблонам точно так же, как и обычные свойства, с разницей в определении: значение свойства вычисляемого свойства должно быть функцией.
data:{ //普通属性
msg:'浪里行舟',
},
computed:{ //计算属性
msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数
return '浪里行舟';
},
reverseMsg:function(){
//可以包含逻辑处理操作，同时reverseMsg依赖于msg,一旦msg发生变化，reverseMsg也会跟着变化
return this.msg.split(' ').reverse().join(' ');
}
}
3. Вычисляемые свойства и методы
Основное различие между ними состоит в том, что вычисляемое свойство может кэшироваться, но методы не могут быть кэшированы; ** Пока соответствующие зависимости не изменились, значение, полученное при многократном доступе к вычисляемому свойству, является ранее кэшированным результатом вычисления и не будет выполняться многократно. **В Интернете есть поговорка, что методы могут передавать параметры, а вычисляемые свойства - нет. На самом деле это неверно. Вычисляемые свойства могут передавать параметры через замыкания:
:data="closure(item, itemName, blablaParams)"
computed: {
closure () {
return function (a, b, c) {
/** do something */
return data
}
}
}
слушать свойство
Vue предоставляет более общий способ наблюдения за изменениями данных в экземплярах Vue и реагирования на них: прослушивание свойств watch.В часах может выполняться любая логика, например регулирование функции, асинхронная выборка данных Ajax или даже манипуляция с DOM (не рекомендуется).
1. Общее использование
<template>
<div class="attr">
<h1>watch属性</h1>
<h2>{{ $data }}</h2>
<button @click="() => (a += 1)">修改a的值</button>
</div>
</template>
<script>
export default {
data() {
return {
a: 1,
b: { c: 2, d: 3 },
e: {
f: {
g: 4
}
},
h: []
};
},
watch: {
a: function(val, oldVal) {
this.b.c += 1;
},
"b.c": function(val, oldVal) {
this.b.d += 1;
},
"b.d": function(val, oldVal) {
this.e.f.g += 1;
},
e: {
handler: function(val, oldVal) {
this.h.push("浪里行舟");
},
deep: true //用于监听e对象内部值的变化
}
}
};
</script>
2. Используйте глубокий обход часов и функцию немедленного вызова
При использовании watch для мониторинга изменений данных, в дополнение к обычно используемому обратному вызову обработчика, он фактически имеет два параметра, а именно:
- Для deep задано значение true, чтобы прослушивать изменения внутреннего значения объекта.
- Немедленная установка в true вызовет обратный вызов немедленно с текущим значением выражения
<template>
<button @click="obj.a = 2">修改</button>
</template>
<script>
export default {
data() {
return {
obj: {
a: 1,
}
}
},
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log(newVal);
},
deep: true,
immediate: true
}
}
}
</script>
В приведенном выше коде мы изменили значение свойства a в объекте obj, и мы можем вызвать обратный вызов обработчика в его часах для вывода нового объекта.Если deep: true не добавлено, мы можем только отслеживать изменение obj и не запускать обратный вызов. Мы также добавили конфигурацию немедленно: true, которая немедленно вызовет обратный вызов с текущим значением obj. Давайте рассмотрим еще один сценарий, который часто встречается в реальной работе: при создании компонента мы получаем данные списка один раз, и при этом мониторим поле ввода, и заново получаем отфильтрованный список каждый раз, когда возникает изменять.
created(){
this.fetchPostList()
},
watch: {
searchInputValue(){
this.fetchPostList()
}
}
Есть ли способ оптимизировать его?
watch: {
searchInputValue:{
handler: 'fetchPostList',
immediate: true
}
}
Во-первых, в наблюдателях вы можете использовать буквальное имя функции напрямую; во-вторых, объявление немедленного: true означает, что оно будет выполнено один раз при создании компонента.
сравнение между двумя
Из приведенной выше блок-схемы мы можем увидеть разницу между ними:
- watch: значение свойства отслеживается. Пока значение свойства изменяется, оно инициирует выполнение функции обратного вызова для выполнения ряда операций.
- вычисленный: он отслеживает значение зависимости.Если значение зависимости остается неизменным, он будет напрямую считывать кеш для повторного использования и будет пересчитывать только в случае его изменения.
Помимо этого, несколько важным отличием является:Вычисляемые свойства не могут выполнять асинхронные задачи, вычисляемые свойства должны выполняться синхронно. Это означает, что вычисляемые свойства не могут запрашивать или выполнять асинхронные задачи с сервера. Если встречается асинхронная задача, она передается свойству прослушивания. watch также может обнаруживать вычисляемые свойства.
Далее давайте рассмотрим пример использования часов для обеспечения защиты от сотрясений: представление не обновляется до тех пор, пока пользователь не перестанет печатать более 1 секунды.
<template>
<div>
{{ fullName }}
<div>firstName: <input v-model="firstName" /></div>
<div>lastName: <input v-model="lastName" /></div>
</div>
</template>
<script>
import { setTimeout } from "timers";
export default {
data: function() {
return {
firstName: "浪里行舟",
lastName: "前端工匠",
fullName: "浪里行舟 前端工匠"
};
},
watch: {
firstName: function(val) {
clearTimeout(this.firstTimeout);
this.firstTimeOut = setTimeout(() => {
this.fullName = val + " " + this.lastName;
}, 1000);
},
lastName: function(val) {
clearTimeout(this.lastTimeout);
this.lastTimeOut = setTimeout(() => {
this.fullName = this.firstName + " " + val;
}, 1000);
}
}
};
Суммировать
Вычисляемые свойства подходят для рендеринга шаблонов, когда значение вычисляется на основе других реагирующих объектов или даже вычисляемых свойств, в то время как прослушивающие свойства подходят для наблюдения за изменениями определенного значения для выполнения сложной бизнес-логики.
- То, что могут вычислить, могут сделать часы, но не наоборот
- Используйте вычисляемый как можно больше
Добро пожаловать в публичный аккаунт:Мастер по фронтенду, мы будем свидетелями вашего роста вместе!