Vue3.0学习md

最新推荐文章于 2025-06-19 14:54:01 发布
最新推荐文章于 2025-06-19 14:54:01 发布
阅读量1.2k 收藏 9
点赞数 16
CC 4.0 BY-SA版权
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HumanAwake/article/details/142284354

Vue3学习笔记

1.环境配置

node.js version 21.7.1

nodejs版本更新方式

下载nvm windows系统下载nvm-setup.zip安装包 使用nvm可以管理node版本并切换

nvm off // 禁用node.js版本管理(不卸载任何东西) nvm on // 启用node.js版本管理 nvm install <version> // 安装node.js的命名 version是版本号 例如：nvm install 8.12.0 nvm uninstall <version> // 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用 nvm ls // 显示所有安装的node.js版本 nvm list available // 显示可以安装的所有node.js的版本 nvm use <version> // 切换到使用指定的nodejs版本 nvm v // 显示nvm版本 nvm install stable // 安装最新稳定版

2.创建Vue3工程

(1)基于vue-cli创建

vue-cli——脚手架——基于webpack

在这里插入图片描述

(2)基于vite创建(推荐)

vite——新一代前端构建工具，与webpack一样也是用来构建前端的

在这里插入图片描述

  • vite是先server ready，告诉你我已就位，你从入口文件进来，你看啥，我加载啥

  • webpack是不管你看啥，我先全部加载，然后再server ready

npm类似于maven:执行npm i安装全部依赖，相当于根据Maven的清单安装全部jar包

创建代码

直接 npm create vue@latest

image-20240404113009970

文件解析

image-20240404121118808

  • vite：入口文件是index.html

  • webpack：入口文件是main.js/main.ts

在实践中，main.js 或 main.ts 通常被用作入口文件的命名约定，特别是在使用某些框架或构建工具时（如 Vue CLI、Create React App 等），它们默认使用这些文件名作为起点。

src解析

image-20240404121632692

 import './assets/main.css'         样式表
 ​
 import { createApp } from 'vue'    把 写应用 比喻成种花，createAPP就是造花盆，其实是创建应用
                                     从vue这个库中导入一个名为createApp的函数。
 import App from './App.vue'        组件  相当于种花的根  以后你可以创建 A.VUE  B.VUE  C.VUE
                                     这些组件都要安装到APP根上
                        导入一个Vue组件，该组件通常包含HTML模板、JavaScript代码和CSS样式。                          App.vue文件通常是Vue项目的入口组件，包含了整个应用的根组件。
 ​
 createApp(App).mount('#app')        把花插进花盆  app在HTML里
     createApp(App): 使用createApp函数创建一个新的Vue应用，并传入App组件作为这个应用的根组件。  
     .mount('#app'): 将这个Vue应用挂载到HTML文档中的一个元素上。具体来说，它会查找HTML文档中的ID为app的元素，并将Vue应用的内容渲染到这个元素中。这样，当你在浏览器中打开网页时，你就可以看到由Vue应用渲染的内容了。
     
     创建应用    制造组件    把组件放进应用里(createApp)   应用放在哪里(mount)

image-20240404124658138

(3)项目运行与结束

npm run dev 运行

npm run serve---->cli创建的工程

Ctrl + C 退出当前执行

3.vue3核心语法

(1) OptionsAPI 与 CompositionAPI

  • 选项式：Vue2的API设计是Options（配置）风格的。

  • 组合式：Vue3的API设计是Composition（组合）风格的。

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

(2) setup 与 Options API 的关系

两句话：

  1. vue2里选项式的语法可以和vue3里的setup（）语法共存

  2. 旧的语法里边可以读取setup里的东西，但是setup

不可以读出旧写法的东西，且没有this

理解：

  • Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法。

  • 但在setup中不能访问到Vue2的配置（data、methos…）。

    setup执行后会把数据挂到vm上，data里的this指向的就是vm，所以能读到

  • 如果与Vue2冲突，则setup优先。

本质上就是Java中static和非static的原理。setup先执行，这个时候setup中的值初始化完成，但是data还没有初始化，这个时候data里内容一定读不到

(3) setup 语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

     <template>
       <div class="person">
         <h2>姓名：{{name}}</h2>
         <h2>年龄：{{age}}</h2>
         <button @click="changName">修改名字</button>
         <button @click="changAge">年龄+1</button>
         <button @click="showTel">点我查看联系方式</button>
       </div>
     </template>
 ​
     <script lang="ts">
       export default {
         name:'Person',
       }
     </script>
 ​
     <!-- 下面的写法是setup语法糖 -->
     <script setup lang="ts">
       console.log(this) //undefined
 ​
       // 数据（注意：此时的name、age、tel都不是响应式数据）
       let name = '张三'
       let age = 18
       let tel = '13888888888'
 ​
       // 方法
       function changName(){
         name = '李四'//注意：此时这么修改name页面是不变化的
       }
       function changAge(){
         console.log(age)
         age += 1 //注意：此时这么修改age页面是不变化的
       }
       function showTel(){
         alert(tel)
       }
     </script>
方法一：添加插件

扩展：上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化

  1. 第一步：npm i vite-plugin-vue-setup-extend -D

  2. 第二步：vite.config.ts

     import { defineConfig } from 'vite'
     import VueSetupExtend from 'vite-plugin-vue-setup-extend'//加这一行
            这个名字可以随便取
     export default defineConfig({
       plugins: [ VueSetupExtend() ]
     })

  1. 第三步：<script setup lang="ts" >

image-20240405115716458

方法二：直接宏定义
 defineOptions({ name: 'persossn1sss11' })

image-20240405120258868

(4) ref创建

基本类型的响应式数据

  • 作用： 定义响应式变量。

  • 语法：let xxx = ref(初始值)。

  • 返回值： 一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

  • 注意点：

    • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。

    •  // 模版中直接写，不用.value
 <template>
   <div class="person">
     <h2>姓名：{{name}}</h2>
     <h2>年龄：{{age}}</h2>
   </div>
 </template>

    • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

    •  <script setup lang="ts" >
   import {ref} from 'vue'
     
   // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
   let name = ref('张三')
   let age = ref(18)
     
   // tel就是一个普通的字符串，不是响应式的
   let tel = '13888888888'
 ​
   function changeName(){
     // JS中操作ref对象时候需要.value
     name.value = '李四'
     console.log(name.value)
     // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
     // name = ref('zhang-san')
   }
   function changeAge(){
     // JS中操作ref对象时候需要.value
     age.value += 1 
     console.log(age.value)
   }
   function showTel(){
     alert(tel)
   }
 </script>
对象类型的响应式数据

  • 其实ref接收的数据可以是：基本类型、对象类型。

  • 若ref接收的是对象类型，内部其实也是调用了reactive函数。

 <template>
   <div class="person">
     <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
     <h2>游戏列表：</h2>
     <ul>
       <li v-for="g in games" :key="g.id">{{ g.name }}</li>
     </ul>
     <h2>测试：{{obj.a.b.c.d}}</h2>
     <button @click="changeCarPrice">修改汽车价格</button>
     <button @click="changeFirstGame">修改第一游戏</button>
     <button @click="test">测试</button>
   </div>
 </template>
 ​
 <script lang="ts" setup >
 import { ref } from 'vue'
 ​
 // 数据
 let car = ref({ brand: '奔驰', price: 100 })
 let games = ref([
   { id: 'ahsgdyfa01', name: '英雄联盟' },
   { id: 'ahsgdyfa02', name: '王者荣耀' },
   { id: 'ahsgdyfa03', name: '原神' }
 ])
 let obj = ref({
   a:{
     b:{
       c:{
         d:666
       }
     }
   }
 })
 ​
 console.log(car)
 ​
 function changeCarPrice() {
   car.value.price += 10
 }
 function changeFirstGame() {
   games.value[0].name = '流星蝴蝶剑'
 }
 function test(){
   obj.value.a.b.c.d = 999
 }
 </script>

(5) reactive创建

  • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）

  • 语法：let 响应式对象= reactive(源对象)。

  • 返回值： 一个Proxy的实例对象，简称：响应式对象。

  • 注意点：reactive定义的响应式数据是 “深层次” 的。

 <template>
   <div class="person">
     <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
     <h2>游戏列表：</h2>
     <ul>
       <li v-for="g in games" :key="g.id">{{ g.name }}</li>
     </ul>
     <h2>测试：{{obj.a.b.c.d}}</h2>
     <button @click="changeCarPrice">修改汽车价格</button>
     <button @click="changeFirstGame">修改第一游戏</button>
     <button @click="test">测试</button>
   </div>
 </template>
 ​
 <script lang="ts" setup >
 import { reactive } from 'vue'
 ​
 // 数据
 let car = reactive({ brand: '奔驰', price: 100 })
 let games = reactive([
   { id: 'ahsgdyfa01', name: '英雄联盟' },
   { id: 'ahsgdyfa02', name: '王者荣耀' },
   { id: 'ahsgdyfa03', name: '原神' }
 ])
 let obj = reactive({
   a:{
     b:{
       c:{
         d:666
       }
     }
   }
 })
 ​
 function changeCarPrice() {
   car.price += 10
 }
 function changeFirstGame() {
   games[0].name = '流星蝴蝶剑'
 }
 function test(){
   obj.a.b.c.d = 999
 }
 </script>

image-20240406113312484

(6) ref 对比 reactive】

宏观角度看：

  1. ref用来定义：基本类型数据、对象类型数据；

  2. reactive用来定义：对象类型数据。

  • 区别：

  1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value，这样就不用一直想着哪个是ref创建的变量，要加.value）。

  1. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

     <template>
   <div class="car">
     <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
     <button @click="changeCar">修改汽车</button>
   </div>
 </template>
 ​
 <script>
     import {reactive} from 'vue'
     let car=reactive({brand:'奔驰',price:100})
 ​
     // 以下为reactive重新分配一个新对象，使之失去了响应式
     function changeCar(){
         car={brand:'cc',price:90}
     }
 ​
     //应该这么写  下面写法 页面可以更新
     function changeCar(){
         Object.assign(car,{brand:'奥拓',price:90})
     }
 </script>    

  • 使用原则：

  1. 若需要一个基本类型的响应式数据，必须使用ref。

  2. 若需要一个响应式对象，层级不深，ref、reactive都可以。

  3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

(7) toRefs 与 toRef

  • 作用：将一个响应式对象中的每一个属性，转换为ref对象。

  • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。

  • 语法如下：

 <template>
   <div class="person">
     <h2>姓名：{{person.name}}</h2>
     <h2>年龄：{{person.age}}</h2>
     <h2>性别：{{person.gender}}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
     <button @click="changeGender">修改性别</button>
   </div>
 </template>
 ​
 <script lang="ts" setup >
   import {ref,reactive,toRefs,toRef} from 'vue'
 ​
   // 数据
   let person = reactive({name:'张三', age:18, gender:'男'})
     
   // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
   let {name,gender} =  toRefs(person)
     
   // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
   let age = toRef(person,'age')
 ​
   // 方法
   function changeName(){
     name.value += '~'
   }
   function changeAge(){
     age.value += 1
   }
   function changeGender(){
     gender.value = '女'
   }
 </script>

(8) computed

computed属性是 Vue3 中的一个响应式计算属性

作用

  • 可以根据其他响应式数据的变化而自动更新其自身的值。

  • 可以接收一个计算函数，在计算函数中使用其他响应式数据的值进行计算，并返回一个响应式的ref对象。

当任何一个参与计算的响应式数据发生变化时，computed属性会自动重新计算其值，并触发相应的依赖更新。

原理

在 Vue3 中，computed属性的原理是使用了一个getter函数和一个setter函数来实现。

  • getter：当我们访问计算属性的值时，会调用getter函数进行计算，并将计算结果缓存起来。当参与计算的响应式数据发生变化时，会触发依赖更新，并自动调用getter函数重新计算计算属性的值。

  • setter：当我们修改计算属性的值时，会调用setter函数进行更新。

：value单向绑定； v-model双向绑定

 <template>
   <div class="person">
     姓：<input type="text" v-model="firstName"> <br>
     名：<input type="text" v-model="lastName"> <br>
     全名：<span>{{fullName}}</span> <br>
     <button @click="changeFullName">全名改为：li-si</button>
   </div>
 </template>
 ​
 <script setup lang="ts" >
   import {ref,computed} from 'vue'
 ​
   let firstName = ref('zhang')
   let lastName = ref('san')
 ​
   // 计算属性——只读取，不修改
   /* let fullName = computed(()=>{
     return firstName.value + '-' + lastName.value
   }) */
 ​
 ​
   // 计算属性——既读取又修改
   let fullName = computed({
     // 读取
     get(){
       return firstName.value + '-' + lastName.value
     },
     // 修改
     set(val){
       console.log('有人修改了fullName',val)
         // split函数，根据-进行分割，形成字符串数组
       firstName.value = val.split('-')[0]
       lastName.value = val.split('-')[1]
     }
   })
 ​
   function changeFullName(){
     fullName.value = 'li-si'
   } 
 </script>

(9) watch

  • 作用：监视数据的变化（和Vue2中的watch作用一致）

  • 特点：Vue3中的watch只能监视以下四种数据：

  1. ref定义的数据。

  2. reactive定义的数据。

  3. 函数返回一个值（getter函数）。

  4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

情况一
 <template>
   <div class="person">
     <h2>第一种情况</h2>
     <h2>sum:{{ sum }}</h2>
     <button @click="add">加一</button>
   </div>
 </template>
 ​
 <script setup lang="ts" >
  import {ref,watch} from 'vue'
 ​
  let sum=ref(0)
 ​
  function add(){
   sum.value++
  }
 ​
  let stopWatch=watch(sum,(newValue,oldValue)=>{
   console.log('sum变化了',newValue,oldValue)
   console.log(stopWatch)
   if(newValue>=10){
     stopWatch()
   }
  })
 </script>
【Vue3.xx】基础讲解
m0_57135756的博客
04-20 759
Vue3基础 1. Vue3的介绍 Vue设计的初衷就包括可以被渐进式地采用 ，所以Vue3支持2中的大部分特性 (迁移指南)。 Vue3新增特性: 性能 虚拟DOM的重写 打包大小减少( tree shaking) 初次渲染快 内存使用减少(compositionAPI) 新增语法(compositionAPI) ref和reactive computed和watch 新的生命周期函数 自定义函数-Hooks函数(像React Hooks) … 其它
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
07-08
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
vue3快速上手教学笔记.md
12-03
vue3快速上手教学笔记.md
Vue3的md笔记
Y27896的博客
07-11 349
把setup的组合式API进行封装，实现代码复用。–创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。–不指明监视哪个属性。监视的回调中用到哪个属性就监视哪个属性。–在异步组件加载完成之前，展示一些占位符内容，避免页面空白。学习vue3过程中的一些笔记，记录自己对知识点的理解。–将组件html结构移动到指定位置。–能让代码易读和易写。–将对象中的属性单独提供给外部使用。–一个函数，是vue3新的配置项。–定义一个对象类型的响应式数据。–浅响应式，针对对象。–是vuex的替代品。
配置Vue3环境
最新发布
m0_73992303的博客
06-19 214
本文介绍了如何安装和配置Vue3开发环境
vue3项目需要切换node版本
CSSAJBQ_的博客
04-12 1839
Node.js 安装包及源码下载地址为：https://nodejs.org/en/download。打开nvm文件夹，修改settings.txt文件，重新配置。vue3项目需要的node，18以上版本支持。nvm选择刚下载的node版本。复制18以上的版本号。查看本地node版本。
vue3.0环境安装--nvm切换Node版本
weixin_38687522的博客
05-28 2544
在不同的项目中我们往往需要使用不同的node版本，所以要有一个软件来帮助我们管理Node的版本，方便我们随时切换。 使用nvm我们不需要卸载之前的Node版本，直接安装nvm就可以。（主要环境变量和覆盖之前的node的安装文件夹，一般是默认的） node切换版本 下载nvm并安装 (推荐使用nvm-setup.zip) https://github.com/coreybutler/nvm-windows/releases 安装注意事项 nvm安装的目录要覆盖你之前安装的node的目录，否则你要在环境变量中
VUE3.0 一.安装node.js、vue3.0脚手架
Harry的博客
02-09 9298
VUE3.0 一.安装node.js、vue3.0脚手架 1.安装nodejs 首先去官网下载nodejs 查看npm和node版本，出现版本号即安装成功。 npm -v # 6.13.4 node -v # cv10.16.0 2.全局安装vue-cli3.0脚手架 1.全局安装 如果之前安装过 卸载之前的 没有安装过 直接执行下一步 npm uninstall -g vue-cli...
Vue3.0配置多页面应用
03-17
Vue3.0是一个备受瞩目的前端框架更新，它引入了许多新特性和性能优化，使得开发者在构建复杂Web应用时更加高效。"Vue3.0配置多页面应用"是指利用Vue3.0框架来开发包含多个独立入口的Web应用程序，每个入口对应一个...
vue面试题2020(25道)+vue3.0详解.md
12-12
vue面试题2020(25道)+vue3.0详解.md
Vue2.0+Vue3.0.md
11-13
Vue2.0+Vue3.0.md
Node.js-vue3.0expressmysql基础开发环境搭建
08-10
vue3.0 express mysql 基础开发环境搭建
vue3.0初学语法.md
08-04
vue3.0初学语法.md
Vue3 核心技术
杭城小刘
04-02 450
写这篇文章是之前看到了尤大的微博，Vue3 发布了新版本，其在声明中写到对于之前的 Object.defineProperty 用 Proxy 改写了。 The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumerati...
Vue3核心笔记
猿特佳
08-09 536
2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交30+个RFC600+次PR99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
vue3【2024版】开发环境搭建（含官网和nvm下载切换最新版node，修改node下载源，创建项目，启动项目，安装vscode插件Vue - Official）
朝阳39的博客
04-17 1110
按安装导航，一直 next 即可。node -v。
vue3 nvm配置多个版本node
秋秋小事
06-21 2559
nvm安装多个node版本
Vue3初学者详细教程之zip安装Node.js版本v16.6.0、vue/cli版本4.5.13、element-ui版本2.15.6、axios版本0.25.0
Meta39的博客
03-21 2746
Vue3初学者详细教程之zip安装Node.js版本v16.6.0、vue/cli版本4.5.13、element-ui版本2.15.6、axios版本0.25.0
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值