10 августа Youda объявила о выпуске Vue3.2 и оригинальной английской версии описания, выпущенной Youda.кликните сюда,гитхаб нажмите здесь
Согласно содержанию исходного текста, обновленный контент в основном включает следующие 5 частей:
-
SSR
: оптимизация рендеринга на стороне сервера.@vue/server-renderer
Пакет добавляет создание модуля ES, который отделен от Node.js, поэтому его можно использовать в среде, отличной от Node.@vue/serve-render
Возможен рендеринг на стороне сервера, например (Workers, Service Workers) -
New SFC Features
: Новая функция компонента с одним файлом -
Web Components
: Пользовательские веб-компоненты. Мы редко используем это, но мы должны знать -
Effect Scope API
: область эффекта, которая используется для непосредственного управления временем высвобождения реактивных побочных эффектов (вычисляемых и наблюдателей). Это обновление базовой библиотеки, вам не нужно заботиться о разработке, но вы должны знать -
Performance Improvements
: Улучшение производительности. Это внутреннее улучшение, не связанное с развитием
эмммм.... Исходный текст в принципе такой, не понятно, давайте эту часть попозже
Давайте сначала представим изменения, связанные с развитием
Новые функции и API
Новые свойства однофайлового компонента SFC
допустимыйstyle
использовать в тегахv-bind
,следующее
<template>
<div>{{ color }}</div>
<button @click="color = color === 'red' ? 'green' : 'red'">按钮</button>
</template>
<script setup>
import { ref } from "vue"
const color = ref("ref")
</script>
<style scoped>
div{
color: v-bind(color)
}
</style>
устаревший useContext
оригинальныйuseContext
Вот и все, теперь это не работает
import { useContext } from "vue"
const { expose, slots, emit, attrs } = useContext()
так какexpose
,slots
,emit
,attrs
не могу пройтиuseContext
Получено, за которым следуют следующие новые альтернативы
Добавлены useAttrs, useSlots
Его нельзя получить через useContext, как и следующее
import { useAttrs, useSlots } from "vue"
const attrs = useAttrs()
const slots = useSlots()
Добавлено определение Expose
Нет необходимости импортировать через импорт, используйте его напрямую, как показано ниже, функция та же, а свойства и методы открыты для внешнего мира.
defineExpose({
name:"沐华"
someMethod(){
console.log("这是子组件的方法")
}
})
определитьEmit переименовать
Оказывается, его можно получить через useContext(), как указано выше, или импортировать следующим образом.
import { defineEmit } from "vue"
После смены имени А.s
,и不需要通过 import 导入
, используйте его прямо так
// import { defineEmit } from "vue"
defineEmits(["getName","myClick"])
изменения defineProps
Изначально его нужно импортировать через импорт.После изменения его не нужно импортировать.Используйте его напрямую следующим образом
defineProps(["name"])
//或者
defineProps({
name: String
})
//或者
defineProps({
name: {
type: String,
default: "",
...
}
})
//或者
const props = defineProps({
... // 和上面一样
})
console.log(props.name)
топ жду
нет необходимости использоватьasync
можно использовать напрямуюawait
, который по умолчанию будет использовать компонентsetup
статьasync setup
, как показано ниже
<script setup lang="ts">
const post = await fetch(`/api/post/xxx`).then(res => res.json())
</script>
в конечном итоге преобразуется в следующее
<script lang="ts">
import { defineComponent, withAsyncContext } from "vue"
export default defineComponent({
async setup(){
const post = await withAsyncContext(
fetch(`/api/post/xxx`).then(res => res.json())
)
return {
post
}
}
})
</script>
Добавлено со значениями по умолчанию
существуетTS
, как определено нижеprops
значение по умолчанию не может быть установлено
interface Props{
name: string,
age: number
}
defineProps<Props>()
ПрисоединяйсяwithDefaults
Затем вы можете указать значения по умолчанию, например
import { withDefaults } from
interface Props{
name: string,
age: number
}
const props = withDefaults(defineProps<Props>(), {
name: "沐华"
age: 3
})
настраиваемый веб-компонент
пройти черезdefineCustomElement
метод для создания собственного пользовательского компонента. Таким же образом можно публиковать компонентыПродаватьиспользование другими
// main.js
import { defineCustomElement } from "vue"
const MyVueElement = defineCustomElement({
// 通用 vue 组件选项
props:["foo"],
render(){
return h("div", "my-vue-element:" + this.foo)
},
// 仅适用于 defineCustomElement, css将被注入到 shadow root
style: [`div { border: 1px solid red }`]
})
customElements.define("my-vue-element", MyVueElement)
затем вvite.config.js
настроить белый список
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
// vue 将跳过 my-vue-element 解析
isCustomElement: (tag) => tag === "my-vue-element"
}
}
})
]
})
затем используйте
<my-vue-element foo="foo" />
Добавлена команда v-memo
Официальная поговорка гласит, что мы пишем программы, которые редко используются в сценариях.Официальная документация нажмите здесь
оно можетчасть кэшированного шаблона, тем самым увеличивая скорость. Например, большое количество v-for списков создается только один раз и повторно обновляться не будет.Использование кэша напрямую — это обмен памяти на время.
Когда компонент повторно визуализируется, как показано ниже, если значения A и значение B не изменились, div пропустит все обновления для этого компонента и его дочерних элементов.
<div v-memo="[valueA, valueB]">
...
</div>
Есть также частичные кеши, как показано ниже. Следует отметить, что вv-memo 里面不能用 v-for
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
...
</div>
повышение производительности
Отзывчивая оптимизация
- более эффективным
ref
Реализовано, прирост чтения составляет ок.260%
, ускорение записи составляет ок.50%
- Скорость сбора зависимостей увеличена прибл.
40%
- Уменьшить потребление памяти прибл.
17%
Оптимизация компилятора шаблонов
- Создание элементов VNodes занимает прибл.
200%
Посмотрите на эти данные, это реально
Эпилог
Ставьте лайки и поддерживайте, оставляйте ненавязчивый аромат в своих руках и будьте почитаемы
Ваши лайки и комментарии - самая большая мотивация для меня двигаться вперед