Недавно был выпущен Vue v2.5.Помимо лучшей поддержки TypeScript, есть некоторые функциональные и синтаксические настройки, которые вам нужно понять. В этой статье не рассказывается о TypeScript, а только объясняются некоторые основные настройки.Для получения более подробной информации об обновлении см. выпуск V2.5.
Читайте полный текст около 4 минут.
Статья одновременно публикуется в колонке Zhihu: Front-end Wechat. (нажмите "прочитать исходный текст")
Изначально я не был очень чувствителен к обновлению версии Vue, поэтому не обратил особого внимания на недавний выпуск v2.5. Сегодня при повторной загрузке проекта сборки Vue я обнаружил несколько предупреждений.
Глядя на предупреждение, я знаю, что это связано с тем, что используется v2.5 Vue, синтаксис слота с областью действия был скорректирован, а затем я иду на GitHub, чтобы проверить выпуск v2.5, чтобы узнать, что атрибут области действия больше не используется. рекомендуется в v2.5, рекомендуется использовать свойство slot-scope для установки контекста.
Измените в коде scope="scope" на slot-scope="scope". Как показано ниже.
Вступая в тему, перечислим основные обновления и корректировки в Vue v2.5.
Используйте хук errorCaptured для обработки внутрикомпонентных исключений.
До версии 2.5 можно было использовать глобальный параметр config.errorHandler, чтобы предоставить приложению функцию для обработки неизвестных исключений, или можно было настроить компонент renderError для обработки исключений внутри функции рендеринга. Однако ни один из них не обеспечивает полного механизма обработки исключений в рамках одного компонента.
В версии 2.5 в компоненте предусмотрена новая функция-ловушка errorCaptured, которая может перехватывать все исключения (включая исключения в асинхронных вызовах), сгенерированные во всех деревьях подкомпонентов (за исключением самого себя) в компоненте.Эта функция-ловушка получает параметры, как errorHandler, позволяют разработчикам более удобно обрабатывать исключения в компонентах.
Если вы знакомы с React, вы обнаружите, что эта функция очень похожа на концепцию «Границы ошибок», представленную в React v16, как для лучшей обработки, так и для отображения исключений в процессе рендеринга отдельных компонентов. В предыдущих статьях этой официальной учетной записи и в колонке Zhihu была специально представлена концепция границы исключения React, нажмитепорталсмотреть.
Чтобы использовать errorCaputerd, вы можете инкапсулировать общий компонент, чтобы включить другие бизнес-компоненты для захвата исключений в бизнес-компонентах и отображения их соответствующим образом. Ниже приведен официальный простой пример, который инкапсулирует общий компонент (ErrorBoundary) для содержания и обработки исключений из других бизнес-компонентов (другой компонент).
Vue.component('ErrorBoundary', {
data: () => ({ error: null }),
errorCaptured (err, vm, info) { this.error = `${err.stack}\n\nfound in ${info} of component` return false
},
render (h) { if (this.error) { return h('pre', { style: { color: 'red' }}, this.error)
} // ignoring edge cases for the sake of demonstration
return this.$slots.default[0]
}
})
<error-boundary>
<another-component />
</error-boundary>
Сквозное поведение errorCaputed
-
Если определен глобальный errorHandler, все исключения все равно будут переданы в errorHadnler, если errorHandler не определен, об этих исключениях по-прежнему можно сообщать в отдельную службу анализа.
-
Если несколько функций-ловушек errorCapured определены для компонента посредством наследования или родительских компонентов, эти функции-ловушки получат одинаковую информацию об исключении.
-
Вы можете вернуть false в хуке errorCapured, чтобы предотвратить распространение исключения, указывая, что исключение было обработано и может быть проигнорировано. Кроме того, другие обработчики errorCapured и глобальная функция errorHandler не могут вызвать это исключение.
Однофайловые компоненты поддерживают «функциональные компоненты».
С vue-loader v13.3.0 или выше он поддерживает определение «функционального компонента» внутри однофайлового компонента и поддерживает такие функции, как компиляция шаблона, CSS с ограниченной областью действия и горячее развертывание.
Определение функциональных компонентов должно быть объявлено путем определения функционального атрибута в теге шаблона. А контекст выполнения выражения в шаблоне — это контекст функциональной декларации, поэтому для доступа к свойствам компонента нужно использовать props.xxx для его получения. Простой пример выглядит следующим образом:
<template functional>
<div>{{ props.msg }}</div>
</template>
ССР среда
При использовании vue-server-renderer для создания приложений SSR по умолчанию требуется среда Node.js, что делает невозможным запуск некоторых сред выполнения JavaScript, таких как php-v8js или Nashorn. Это было улучшено в версии 2.5, так что приложения SSR могут нормально работать в вышеуказанных средах.
В php-v8js и Nashorn глобальные объекты и глобальные объекты процесса необходимо моделировать на этапе подготовки среды, а переменные среды процесса необходимо устанавливать отдельно. Необходимо установить для process.env.VUE_ENV значение «сервер», а для process.env.NODE_ENV значение «разработка» или «производство».
Кроме того, в Nashorn вам также необходимо предоставить полифилл для Promise и settimeout с собственными таймерами Java.
Официальный приводит пример использования в php-v8js следующим образом:
<?php$vue_source = file_get_contents('/path/to/vue.js');$renderer_source = file_get_contents('/path/to/vue-server-renderer/basic.js');$app_source = file_get_contents('/path/to/app.js');$v8 = new V8Js();$v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');$v8->executeString($vue_source);$v8->executeString($renderer_source);$v8->executeString($app_source);?>
// app.js
var vm = new Vue({
template: `<div>{{ msg }}</div>`,
data: {
msg: 'hello'
}
})
// exposed by vue-server-renderer/basic.js
renderVueComponentToString(vm, (err, res) => {
print(res)
})
модификатор v-on
автоматический модификатор ключа значения ключа
В версиях до Vue v2.5, если вы хотите использовать клавиши клавиатуры без встроенных псевдонимов в v-on, либо используйте keyCode непосредственно в качестве модификатора (@keyup.13="foo"), либо вам нужно использовать config .keyCodes для регистрации псевдонимов для пар "ключ-значение".
В версии 2.5 вы можете напрямую использовать действительный ключ-значение (см. KeyboardEvent.key в MDN) в качестве модификатора для его объединения. следующим образом:
<input @keyup.page-down="onPageDown">
В приведенном выше примере обработчик события будет вызываться только тогда, когда $event.key === 'PageDown'.
Примечание. Существующие модификаторы "ключ-значение" по-прежнему доступны. В IE9 некоторые значения клавиш (.esc и клавиши клавиш со стрелками) не являются согласованными значениями.Если вы хотите быть совместимым с IE9, вам нужно иметь дело со встроенными псевдонимами в IE9.
.точный модификатор
Добавлен модификатор .exact, который следует использовать в сочетании с другими системными модификаторами (.ctrl, .alt, .shift и .meta), который можно использовать для различения некоторых принудительных срабатываний нескольких модификаторов при их совместном нажатии. Обработчик событий функция. следующим образом:
<!-- 当 Alt 或 Shift 被按下也会触发处理函数 --><button @click.ctrl="onClick">A</button><!-- 只有当 Ctrl 被按下，才会触发处理函数 --><button @click.ctrl.exact="onCtrlClick">A</button>
Упростите использование слотов с ограниченной областью действия
Раньше, если вы хотели определить слот с областью действия с помощью атрибута области в теге шаблона, вы должны были определить его следующим образом:
<comp>
<template scope="props">
<div>{{ props.msg }}</div>
</template>
</comp>
В v2.5 свойство scope устарело (по-прежнему доступно, но с предупреждением, как в начале этой статьи), мы используем свойство slot-scope вместо свойства scope для представления слота с областью видимости, а слот - Атрибут области действия можно использовать не только в шаблонах, но и в элементах и компонентах меток. следующим образом:
<comp>
<div slot-scope="props">
{{ props.msg }}
</div>
</comp>
Примечание. Это изменение означает, что slot-scope уже является зарезервированным свойством и больше не может использоваться только для свойств компонента.
Внедрить новую опцию значения по умолчанию
В этой настройке Injections могут использоваться как дополнительная конфигурация, а также могут быть объявлены значения по умолчанию. Вы также можете использовать from для представления исходного свойства.
export default {
inject: {
foo: {
from: 'bar', default: 'foo'
}
}
}
Аналогично свойствам, значения по умолчанию для массивов и объектов нужно возвращать с помощью фабричной функции.
export default {
inject: {
foo: {
from: 'bar', default: () => [1, 2, 3]
}
}
}
(над)