Day01-vue3

陈玄烛2025-09-132025-09-13

vue3

使用create-vue创建项目

前提环境条件

已经安装16.0或者更高的版本的Node.js
创建一个vue应用

npm init vue@lateset\
进入项目

cd vue3-project
初始化项目

npm install
项目运行

npm run dev

文件夹解析

关键文件：

vite.config.js - 项目的配置文件基于vite的配置
packge.json - 项目包文件核心依赖项变成了Vue3.x和Vite
main.js - 入口文件createApp函数创建实例
app.vue - 根组件SFC单文件组件script -template -style

变化一：脚本script和模板template顺序调整

变化二：模板template不再要求唯一根元素

变化三：脚本script添加setup标识支持组合API
index.hteml - 单页入口提供id为app的挂载点

组合式API - Setup选项

<!-- <script>
export default {
  setup() {
    console.log('setup')
    const message ="this is message"
    const logMessage = () =>{
      console.log(message);
      
    }
    return{
      message,
      logMessage
    }
  },beforeCreate() {
    console.log('beforeCreate')
  },
}
</script> -->
<script setup>
console.log('setup')
    const message ="this is message"
    const logMessage = () =>{
    console.log(message);
      
    }
</script>
<template>
  <div>
    {{message}}
    <button @click="logMessage">log</button>
  </div>
</template>

setup选择的执行时机？

beforeCreate钩子之前自动执行
setup写代码的特点是什么

定义数据+函数然后以对象方式return
< script setup >解决了什么问题？解决了什么问题？

经过语法糖的封装更简单的使用组合是API
setup中的this还指向组件实例么？

指向undefined

组合式API - reactive和ref函数

reactive()

*作用：*接受对象类型的数据参数*传入并返回一个响应式的对象*

核心步骤：

<script setup>
//导入
import {reactive} from 'vue'
//执行函数 传入参数 变量接受
const state =reactive(对象类型函数据)
</script>

1.从vue包中导入reactive函数

2.在< script setup >中 执行reactive函数并传入类型为对象的初始值，并使用变量接受返回值

<script setup>
// 1.导入函数
import { reactive } from 'vue'
// 2.执行函数 传入一个对象类型的参数 变量接受
const state = reactive({
  count:0
})
const setCount = () => {
  state.count++
}
</script>
<template>
  <div>
    <button @click='setCount'> {{state.count}}</button>
  </div>
</template>

ref()

<script setup>
// 1.导入ref函数
import { ref } from 'vue'
// 2.执行函数 传入参数[简单类型 + 对象类型] 变量接受
const state = ref(0)

const setCount = () => {
//脚本区域修改ref产生的响应对象数据 必须通过.value属性
  state.value++
}
</script>
<template>
  <div>
    <button @click='setCount'> {{state}}</button>
  </div>
</template>

总结

reactive和ref函数的共同作用是什么？
用函数调用的方式生成响应式数据
reactive VS ref ？
1. reactive 不能处理简单类型的数据
2. ref参数类型支持更好但是必须通过.value访问修改
3. ref函数的内部实现依赖于reactive函数
在实际工作中推荐使用那个？
推荐使用ref函数，更加灵活。

computed计算属性函数

计算苏醒基本思想和vue2的完全一致，组合式API的计算属性只是修改了写法

核心步骤：

导入computed函数
执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

<script setup>
//导入
import {computed } from 'vue'
//执行函数 变量接受 在回调参数中return计算智
const computedState = computed(() =>{
return 基于响应式数据做计算之后的值
})

Demo

<script setup>
// 1.导入函数
import { ref } from 'vue'
import {computed } from 'vue'
// 2.执行函数 传入一个对象类型的参数 变量接受
const list = ref([1,2,3,4,5,6,7,8])
// 3.执行函数 return 计算后的值 变量接受
const computedList = computed(()=>{
  return list.value.filter(item => item > 2)
})
setTimeout(()=>{
  list.value.push(9,10)
},3000)
</script>
<template>
  <div>
   原始响应数据数组 - {{list}}
  </div>
  <div>
  计算属性数组 -{{computedList}}  
  </div>
</template>

总结

计算属性中不应该有“副作用”

比如异步请求、修改dom
避免直接修改计算属性的值

计算属性应该是只读

watch函数

作用：监听一个或者多个数据的变化，数据变化时执行回调函数

两个额外参数：1.immediate(立即执行) 2.deep(深度监听)

基础使用 - 侦听单个数据

导入watch函数

执行watch函数传入要侦听的响应式数据（ref对象）和回调函数

<script setup>
// 1.导入wacth
import{ref,watch} from 'vue'
const count =ref
// 2.调用watch侦听变化
watch(counte,(newValue,oldValue)=>{
console.log('count发生了变化，老值为${oldValue}',新值为${newValue})
})