Vue3快速上手：create-vue与新特性概览,-CSDN博客

本文链接：https://blog.csdn.net/m0_73172034/article/details/132836465

本文介绍了如何使用create-vue创建Vue3项目，包括vite的新一代构建工具、配置文件、组件结构，以及Vue3的组合式API、响应式系统（reactive和ref）、计算属性、watch、父子组件通信和数据传递、模板引用、Pinia状态管理等内容。

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

create-vue创建vue3项目

create-vue是官方新的脚手架工具，底层切换到了vite（下一代构建工具），为开发提供急速响应

前提环境条件：控制面板输入node -v，显示的是安装了16.0或更高版本的Node.js
创建一个Vue应用：npm init vue@latest

vite.config.js --- 项目的配置文件基于vite的配置
package.json --- 项目包文件核心依赖项是vue3
main.js --- 入口文件createApp函数创建应用实例
app.vue --- 根组件SFC单文件组件script-template
1. 脚本script和模板template顺序调整
2. 模板template不再要求唯一根元素
3. 脚本script添加setup表示支持组合式API
index.html --- 单页入口，提供id为app的挂载点

创建项目和yun：

创建一个Vue应用：npm init vue@latest

接下来会需要输入项目名，此时输入的项目名是：vue_project

接下来输入执行下面的语句（之后如果要打开项目也是指令，终端要进入项目所在的目录）

cd vue_project

npm install

npm run dev（之后打开项目使用这条语句）

组合式API

setup

执行时，比beforeCreate还要早

setup函数中，获取不到this（this是underfined）

vue2的完整写法：

（定义数据+函数然后以对象方式return）

<script>
  export default {
    setup(){
      console.log('setup函数')
      const message='hello'
      const logMessage=()=>{
        console.log(message)
      }
      return{
        message,
        logMessage
      }
    },
    beforeCreate() {
      console.log('beforeCreate函数')
    }
  }
</script>
<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

vue3的语法糖可以简化return：

（使用组合式API）


<script setup>
//数据
const message='this is a message'
const logMessage=()=>{
  console.log(message)
}
</script>
<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
</template>

reactive()和ref()

reactive()

接收一个对象类型的数据，返回一个响应式的对象

<script setup>
  import {reactive} from "vue";
  const state=reactive({
    count:100
  })
  const setCount=()=>{
    state.count++
  }
</script>

<template>
  <div>{{state.count}}</div>
  <button @click="setCount">++</button>
</template>

ref()

接收简单类型或复杂类型，返回一个响应式对象

本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型

底层：保存复杂类型之后，再借助reactive实现的响应式

注意：

脚本中访问数据，需要通过.value
在template中，.value不需要加（帮我们扒了一层）

<script setup>
  import {ref} from 'vue'
  const count =ref(简单类型或者复杂类型数据)
</script>

<script setup>
  // import {reactive} from "vue";
  // const state=reactive({
  //   count:100
  // })
  // const setCount=()=>{
  //   state.count++
  // }
  import {ref} from "vue";
  const count=ref(0)
  const setCount=()=>[
      count.value++
  ]
</script>

<template>
  <div>{{count}}</div>
  <button @click="setCount">++</button>
</template>