Vue3+TS+Vite开发技巧：如何优化Vue3应用的性能

// 错误示例
const user = { name: 'Alice', age: 20 }
Object.freeze(user)

// 正确示例
import { reactive } from 'vue'
const user = reactive({ name: 'Alice', age: 20 })

import { ref, computed } from 'vue'

// 计算属性示例
const user = ref({ name: 'Alice', age: 20 })
const userName = computed(() => user.value.name)

// 使用 ref 示例
const userName = ref('Alice')

import { ref, watch, WatchSource } from 'vue'

// 监听一个 ref 对象
const userName = ref('Alice')
watch(userName, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

// 监听一个 reactive 对象，且立即执行一次回调函数
const user = reactive({ name: 'Alice', age: 20 })
watch(() => user.name, (newValue, oldValue) => {
  console.log(newValue, oldValue)
}, { immediate: true })

// 异步组件示例
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

// 懒加载示例
const LazyComponent = () => import('./LazyComponent.vue')

<!-- Vue2 -->
<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<!-- Vue3 -->
<template>
  <div>
    <ul>
      <li v-for="item in list">{{ item.title }}</li>
    </ul>
  </div>
</template>