Разница и использование фильтра и вычисления в Vue

Vue.js

Недавно я встретил очень хорошего кандидата с богатым опытом и техническими особенностями, но он не очень хорошо отвечал на некоторые тривиальные вопросы, и в конце концов его отчислили. Во время собеседования у меня возник один вопрос:Разница между фильтром и вычисляемыми свойствами в Vue, к сожалению кандидат не ответил на месте, вот резюме:

Разница между фильтром и вычисляемым

1. Время триггера отличается

Логика обработки вычисляемого свойства сложна и зависит от Vue.Механизм уведомления об обновлении данных, вычисление будет запущено повторно только тогда, когда другие элементы данных, от которых зависит свойство, изменились. Преимущество в том, что частота вычислений относительно низкая, недостаток в том, что она зависит от компонентов и ее трудно выделить в независимую логику, то есть низкая возможность повторного использования.

Фильтр, очевидно, намного проще, оно срабатывает только тогда, когда он явно вызывается, и он обычно используется в рендеринге шаблона. Преимущество состоит в том, что он легко абстрактно вне компонента; недостатком состоит в том, что расчет должен быть повторно выполнен каждый раз, когда шаблон отображается. в состоянии пройтиПримерПочувствуйте разницу во времени вызова:

2. Различные приложения

вычисляется очень обширно и может применяться к другим вычисляемым методам, функциям жизненного цикла и шаблонам; фильтр обычно используется только для рендеринга шаблона. Если вы хотите повторно использовать его в других местах, вам нужно использоватьthis._fфункция:

Vue.component('HelloWorld', {
	filters: {
		hello() {
			return 'hello';
		}
	},
	methods: {
		ping() {
			return `${this._f('hello')()} world`;
		}
	}
})

Кроме того, filter поддерживает использование цепочек вызовов, что добавляет возможность комбинирования и конкатенации:

<span> {{ name | normalize | capitalize }} </span>

3. Как определить

Наконец, следует отметить, что вычисляемое свойство может быть определено только внутри компонента или через объект-миксин, а фильтр имеет два определения, одно — внутри компонента.filtersОпределение атрибута; один из них должен пройти за пределы компонентаVue.filterОпределение функции:

Vue.component('HelloWorld', {
	filters: {
		hello() {
			return 'hello';
		}
	}
});

Vue.filter('hello', ()=> 'hello');

Применить правила

Подводя итог, фильтр не может кэшироваться и вызывается часто, поэтому он особенно подходит для форматированных сценариев вывода, таких как форматирование даты. Фильтр имеет возможность вызывать комбинации, поэтому вы можете определить набор базовых и простых фильтров на уровне архитектуры проекта и комбинировать их в компонентах по мере необходимости.

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

Категории