Простое понимание Vue3.0

Vue.js

Цели дизайна Vue3.0

  • меньше
  • Быстрее (*)
  • Укрепление поддержки TeampStry (*)
  • Повышение согласованности дизайна API
  • Улучшить их ремонтопригодность
  • Открыть больше низкоуровневых функций

Быстрее

  • Object.defineProperty -> Прокси (более детально)
  • Реконструкция виртуального дома

Реконструкция виртуального дома

Гранулярность является компонентом.

Хотя Vue может гарантировать, что компонент, запускающий обновление, сведен к минимуму, все же необходимо пройти все дерево Virtual DOM компонента внутри одного компонента.

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

Vue3.0 Virtual DOM

Тактильное сочетание

  • Структура узла не изменится вообще
  • только один динамический узел
Изменение структуры узла v-if

  • v-if external: только v-if является динамическим узлом
  • Внутри v-if: только {{ message }} являются динамическими узлами
Изменение структуры узла v-for

  • V-для внешнего: V-для только динамического узла (фрагмент)
  • Внутри каждого цикла v-for: только {{ item.message }} являются динамическими узлами

Дерево блоков

  • Разделить шаблон на вложенные блоки на основе директив динамического узла
  • Структура узлов внутри каждого блока фиксирована

Обновить

TypeScript (опущен)

Дизайн API

Fuction-based API

const App = {
    setup() {
        // data
        const count = value(0)
        // computed
        const plusOne = computed(() => count.value + 1)
        // method
        const increment = () => { count.value++ }
        // watch
        watch(() => count.value * 2, v => console.log(v))
        // lifecycle
        onMounted(() => console.log('mounted!'))
        // 暴露给模板或渲染函数
        return { count }
    }
}

преимущество

  • отсутствие конфликтов пространств имен
  • Источники данных понятны
  • Отсутствие дополнительного потребления производительности компонентов

Сравнить API классов

  • Улучшенная поддержка вывода типа TypeScript
  • Более гибкая возможность логического мультиплексирования
  • Дружелюбный к деревьям
  • Код легче сжимать

Более гибкая возможность повторного использования логики

Прослушивание положения мыши:

определение

function useMousePosition() {
    const x = value(0)
    const y = value(0)
    
    const update = e => {
        x.value = e.pageX
        y.value = e.pageY
    }
    
    onMounted(() => {
        window.addEventListener('mousemove', update)
    })
    
    onUnmounted(() => {
        window.removeEventListener('mousemove', update)
    })
    
    return { x, y }   
}

использовать

new Vue({
    template: `
		<div>
			Mouse position: x {{ x }} / y {{ y }}
		</div>
	`,
    setup() {
        const { x, y } = useMousePosition()
        return { x, y }
    }
})

Контрастные хуки React

Категории