[Technology Frontier] Что было обновлено в последней версии Vue3.2?

интервью внешний интерфейс Vue.js
[Technology Frontier] Что было обновлено в последней версии Vue3.2?

image.png

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%

Посмотрите на эти данные, это реально

Эпилог

Ставьте лайки и поддерживайте, оставляйте ненавязчивый аромат в своих руках и будьте почитаемы

Ваши лайки и комментарии - самая большая мотивация для меня двигаться вперед

Ссылаться на

blog.v UE JS.org/posts/v UE-3…

GitHub.com/vUEJS/RFCs/…