Vue3 快速入门

Vue3 新特性

Composition API
更好的 TypeScript 支持
更快的性能
Tree-shaking 支持
Teleport 组件
Fragments 支持
Suspense 组件

环境搭建

使用 Vite

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn
yarn dev

使用 Vue CLI

yarn global add @vue/cli
vue create my-project
cd my-project
yarn serve

第一个 Vue3 应用

<div id="app"></div>

<script type="module">
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
})

app.mount('#app')
</script>

单文件组件

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello Vue 3!')
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    return {
      message,
      count,
      increment
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

script setup 语法

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue 3!')
const count = ref(0)

const increment = () => {
  count.value++
}
</script>

响应式基础

ref

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

reactive

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

console.log(state.count) // 0
state.count++

计算属性

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)
</script>

侦听器

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})
</script>