vue3使用教程，一次性讲明白

最新推荐文章于 2025-05-20 17:19:00 发布

原创最新推荐文章于 2025-05-20 17:19:00 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

178 篇文章

订阅专栏

Vue.js3.0是一个完全重写的版本，带来了更好的编程体验和新特性，如CompositionAPI、Teleport等，同时提高了性能和减少了体积。文章涵盖了Vue.js3.0的安装、配置、组件使用及新属性的介绍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js 3.0 是一个完全重写的版本，采用了更好的编程体验和一些重要的新特性，同时也让整个库更小、更快、更易于维护和使用。下面是关于 Vue.js 3.0 的详细教程，包括安装、配置和使用，以及一些新属性的说明：

安装 Vue.js

要使用 Vue.js 3.0，你需要在本地安装 Node.js 和 npm，然后在命令行中输入以下命令安装 Vue.js：

npm install vue@next

安装完成后，你可以在你的项目中引入 Vue.js：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

Vue.js 3.0 的配置

Vue.js 3.0 的配置相对简单，你只需要在 index.html 文件中添加一个 div 元素，并在 JavaScript 文件中使用 createApp 函数来创建 Vue 应用程序。你可以使用 Vue.js 3.0 的编译器模式或运行时模式，在模板中使用 Vue 组件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js 3.0</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./main.js"></script>
  </body>
</html>

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Vue.js 3.0 的使用

在使用 Vue.js 3.0 时，你需要熟悉一些新的概念和 API。下面是一些核心概念和 API 的说明。

组件

Vue.js 3.0 支持组合式 API，允许使用 JavaScript 函数来定义组件和制定其属性、事件和内部状态。下面是一个使用组合式 API 定义的简单组件的例子：

import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props) {
    const count = ref(0)

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

    return {
      count,
      increment
    }
  },
  template: `
    <div>
      <h1>{{ props.msg }}</h1>
      <p>You clicked {{ count }} times.</p>
      <button @click="increment">Increment</button>
    </div>
  `
})

全局 API

Vue.js 3.0 通过一些新的全局 API 来提供更好的应用程序结构和生命周期管理。下面是一些常用的全局 API。

createApp

createApp 函数是创建一个新的 Vue 实例的工厂函数，它返回一个应用对象，可以使用 mount 方法将应用挂载到 DOM 元素上。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

ref

ref 函数是一个响应式的引用，可以将其存储在组件实例中，并在模板和 JavaScript 中使用。

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const name = ref('张三')

    return {
      name
    }
  },
  template: `
    <div>
      <p>{{ name }}</p>
      <input v-model="name" />
    </div>
  `
})

reactive

reactive 函数是一个响应式数据对象，可以通过它来代理任何 JavaScript 对象，从而使其能够在模板和 JavaScript 中响应式更新。

import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const person = reactive({
      name: '张三',
      age: 18
    })

    return {
      person
    }
  },
  template: `
    <div>
      <p>姓名：{{ person.name }}</p>
      <p>年龄：{{ person.age }}</p>
      <input v-model="person.name" />
      <input v-model="person.age" />
    </div>
  `
})

watchEffect

watchEffect 函数是一个由函数返回的响应式副作用，会在其依赖的任何响应式数据变化时被重新运行。

import { defineComponent, ref, watchEffect } from 'vue'

export default defineComponent({
  setup() {
    const name = ref('张三')
    const age = ref(18)
 
    watchEffect(() => {
      console.log(`姓名：${name.value}，年龄：${age.value}`)
    })
 
    return {
      name,
      age
    }
  },
  template: `
    <div>
      <input v-model="name" />
      <input v-model="age" />
    </div>
  `
})

provide/inject

provide 和 inject 函数是用来在父组件和子组件之间共享数据的，可以用来代替 $emit 和 $on。

// 父组件
import { defineComponent, provide } from 'vue'

export default defineComponent({
  setup() {
    const city = '北京'

    provide('city', city)

    return {
      city
    }
  }
})

// 子组件
import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    const city = inject('city', '上海')

    return {
      city
    }
  },
  template: `
    <div>
      <p>城市：{{ city }}</p>
    </div>
  `
})