[vue3]极速上手

news2024/11/28 13:36:22

介绍

vue3官网: Vue.js - 渐进式 JavaScript 框架 | Vue.js

1.0更容易维护

支持组合式API 可以减少代码量, 并且分散式维护转为集中式维护, 更容易封装复用

友好的TS支持

vue3的源码都被TS重写, 所以对TS的支持更友好

2.0更快的速度

新的diff算法, 模版编译优化, 更高效的组件初始化, 是vue3项目的运行速度更快

3.0更小的体积

良好的TreeShaking和按需引入, 可以是vue3项目打包后的体积更小

4.0更优的响应式

使用ES7新增的Proxy API实现数据响应式, 优势是针对整个对象进行监听, 无论对象新增还是减少属性, 都不会失去响应式特点, vue2中对象的修改是监听不到的, 所以vue3的响应式方案更强大

Vite脚手架

create-vue是Vue官方的脚手架工具, 底层切换到了vite(下一代构建工具)

  1. 前提条件: node版本>= 16.0
  2. 安装执行: npm init vue @latest
  3. 该指令会安装并执行 create-vue
  4. 创建项目: npm create vue@latest
  5. 右侧是创建项目的可选项->_->

  1. 项目名称

  2. 可选TS (No)

  3. 可选JSX (No)

  4. 路由 (Yes)

  5. 仓库(Yes)

  6. 单元测试 (No)

  7. 端到端测试 (No)

  1. EsLint (Yes)

  2. 格式化工具 (No)

组件替换

目录结构

关键文件

  1. vite.config.js 项目配置文件
  2. package.json 项目包文件
  3. main.js 入口文件
  4. app.vue 根组件
  5. index.html 入口文件

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.scss'

// createApp(App)的作用: 创建应用实例
// vue2创建应用实例: new Vue()
// vue3创建应用实例: createApp()
// 对创建实例的方法进行封装, 保证每个实例的独立封闭性
// 在微前段或大型项目中有作用
// createRouter()  createStore()
// mount('#app')的作用: 设置挂载点
// 把应用实例挂载到#app的盒子
// 简单理解: 把App根组件渲染到#app盒子中
createApp(App).mount('#app')
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <!-- 单页入口, 提供app挂载点 -->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<script setup>
  // 脚本script和模版templates顺序调整
  // 写结构,再写样式, 不用跨越脚本, 更合理
  // 模版templates不再要求唯一根元素
  // 脚本script通过添加setup标识, 支持组合式API
</script>

<template>
</template>

<style scoped>
</style>

辅助工具

vue3调试工具: VUE3 vue-devtools 调试工具下载安装_vue3 devtools下载-CSDN博客

组合式API

setup选项

Vue3提供了setup选项, 在该选项中可以书写组合式API

  1. setup选项的执行时机在 beforeCreate钩子之前, 自动执行
  2. setup选项中定义的数据和函数, 要以对象方式return之后, 才能在模版中使用
  3. setup选项中,获取不到this, this指向undefiend
setup语法糖

setup选项中组合式API, 还要return, 比较麻烦, 所以vue3支持 setup 语法糖, 简化组合式API的代码

写法

原理

  • 语法糖代码, 还是要被编译成原始写法, 通过returen的方式, 让模版中拿到数据
  • 语法糖, 自动帮我们完成了retuen操作, 更简单的编写组合式API代码
  • 组件只需引入, 自动完成注册, 更方便

响应式变量

reactive()

接受对象类型的参数并返回一个响应式对象

使用

  1. 从vue包中导入reactice函数
  2. 在脚本中执行 reactice函数并传入对象类型的参数, 使用变量接收返回值
  3. 得到一个响应式的对象
  4. reactive不能处理简单类型的数据

ref()

接收简单类型或对象类型的参数并返回一个响应式对象

使用

  1. 从vue包中导入ref函数
  2. 在脚本中执行ref函数并传入初始值, 使用变量接收返回值, 得到一个响应式的对象
  3. ref可以处理简单类型和复杂类型的数据
  4. 本质: 把传入参数, 包装成为复杂类型,
  5. 底层: 再借助reactive函数实现数据响应式
  6. 在脚本中访问数据, 需要通过 .value
  7. 在模版中访问数据, 不需要 .value (自动简化)

对象和数据

如果使用ref创建响应式数据, 注意区分响应式对象和响应式数据

const data = ref('hello')
console.log(data)     // 响应式对象
console.log(data.vue) // 响应式数据

计算属性

成功因素

组合式API下, 计算属性的写法有所改变

使用

  1. 导入 computed 函数
  2. 执行函数 在回调参数中 return 基于响应式数据做计算的值, 用变量接收结果
  3. 计算属性中应该保持单纯的数据计算, 不该有"副作用", 比如异步请求/修改DOM
  4. 尽量避免直接修改计算属性的值, 计算属性应该是只读的, 特殊情况下再配置get/set

侦听器

1.0侦听单个数据
  1. 导入watch函数
  2. 执行watch函数,传入要侦听的ref对象, 和回调函数

2.0侦听多个数据

同时侦听多个响应式数据的变化, 不管那个数据变化都触发侦听器

3.0首次侦听

在创建侦听器时立即出发回调, 响应式数据变化之后继续执行回调

4.0深度侦听
  1. 默认侦听器进行的是 浅层侦听
  2. 对于简单数据类型, 可以直接侦听
  3. 对于复杂数据类型, 侦听不到内部属性的变化, 只能侦听数据内存地址的变化
  4. 开启deep:true, 才能监听对象属性的变化
import { watch }  from 'vue'
watch(  ref对象,  (new, old) => {
  // 处理逻辑
  ... ...
} , {
  deep: true
})
5.0精准侦听

不开启deep的前提下, 精准侦听对象某个值的变化

深度侦听可以解决侦听不到的问题, 但是会侦听整个对象的全部属性变化, 可能会出现干扰

生命周期

  1. 在vue3中, 之前的 beforeCreate 和 created 生命周期函数, 被 setup 函数替代
  2. 在vue3中, onMounted(()=>{ ... }) 等函数, 可以多次调用, 不会冲突, 而是按照编码顺序依次执行

路由

Vue3中的路由初始化跟之前有所变化, 对new VueRouter的过程进行了封装

  1. 创建路由实例由 createRouter 实现
  2. 路由模式
  • history 模式使用 createWebHistory()
  • hash模式使用 createWebHashHistory()
  • 指定路由参数模式时, 传递的参数是路由基础路径, 默认/
  1. vite 中的环境变量
  • vite官网 环境变量和模式 | Vite 官方中文文档
  • import.meta.env 是访问 vite 中环境变量的固定方式
  • import.meta.env.BASE_URL 部署应用时的基本URL, 它由base配置项决定
export default defineConfig({
  plugins: [vue()],
  base: '/', // 一般是/, 可以按需配置
  ... ...
})
  • import.meta.env.MODE 访问应用运行的模式 (dev/prod)
  • import.meta.env.PROD 判断应用是否运行在生产环境
  • import.meta.env.DEV 判断应用是否运行在开发环境
  • import.meta.env.SSR 应用是否运行在server上

路由对象
import { useRouter } from 'vue-router'
// 获取路由对象
const router = useRouter()
// 进行路由跳转
router.push(地址)

路由参数
import { useRoute } from 'vue-router'
// 路由参数对象
const route = useRoute()
// 拿到路由参数
route.params.参数
route.query.参数

自定义指令

介绍

在vue3中, 自定义指令的钩子函数有所改变

  • inserted->mounted
  • update->updated
<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

其他钩子

defineOptions

使用setup语法糖后, 定义与setup平级的配置项就不方便了, defineOptions主要用来定义Options API 的选项

  1. 可以定义Options API 的任意选项
  2. props/emits/expose/slots除外, 因为已经提供了宏函数解决问题

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1825344.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【FireSim/Chipyard】解决FireSim Repo Setup步骤中Conda的firesim环境下载失败的问题

【FireSim/Chipyard】解决FireSim Repo Setup步骤中Conda的firesim环境下载失败的问题

【FireSim/Chipyard】解决FireSim Repo Setup步骤中Conda的firesim环境下载失败的问题 问题描述 按照U250官方文档下载Conda环境的时候&#xff0c;即语句./scripts/machine-launch-script.sh --prefix REPLACE_ME_USER_CONDA_LOCATION的时候会遇到以下报错&#xff1a; Sol…
阅读更多...
Locust web性能测试实践

Locust web性能测试实践

Locust web性能测试实践 Locust 是一个开源的负载测试工具&#xff0c;使用Python语言实现&#xff0c;其简洁、轻量、高效的并发机制基于Gevent协程&#xff0c;可以实现单机模拟生成较高的并发压力。具有分布式和可扩展的特点&#xff0c;能够帮助你评估系统的性能并找到潜在…
阅读更多...
【C++进阶】模板进阶与仿函数：C++编程中的泛型与函数式编程思想

【C++进阶】模板进阶与仿函数：C++编程中的泛型与函数式编程思想

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;栈和队列相关知识 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀模板进阶 &#x1f9e9;<&…
阅读更多...
ArrayList集合+综合案例

ArrayList集合+综合案例

数组与集合的区别 ArrayList 概述 是java编写好的一个类,用于表示一个容器,使用的时候,需要注意指定容器中元素的数据类型;(如果不指定,语法不报错,但是取值的时候不方便)注意事项 使用的时候,写ArrayList<元素的数据类型>的数据类型的时候,带着泛型;使用ArrayList集合…
阅读更多...
一文搞定 大语言模型（LLM）微调方法

一文搞定 大语言模型（LLM）微调方法

引言 众所周知&#xff0c;大语言模型(LLM)正在飞速发展&#xff0c;各行业都有了自己的大模型。其中&#xff0c;大模型微调技术在此过程中起到了非常关键的作用&#xff0c;它提升了模型的生成效率和适应性&#xff0c;使其能够在多样化的应用场景中发挥更大的价值。 那么&…
阅读更多...
linux如何部署前端项目和安装nginx

linux如何部署前端项目和安装nginx

要在Linux上部署前端项目并安装Nginx&#xff0c;你可以按照以下步骤操作&#xff1a; 安装Nginx: sudo apt update sudo apt install nginx 启动Nginx服务: sudo systemctl start nginx 确保Nginx服务开机自启: sudo systemctl enable nginx 部署前端项目&#xff0c;假设前…
阅读更多...
【scikit-learn入门指南】：机器学习从零开始

【scikit-learn入门指南】：机器学习从零开始

1. 简介 scikit-learn是一款用于数据挖掘和数据分析的简单高效的工具&#xff0c;基于NumPy、SciPy和Matplotlib构建。它能够进行各种机器学习任务&#xff0c;如分类、回归和聚类。 2. 安装scikit-learn 在开始使用scikit-learn之前&#xff0c;需要确保已经安装了scikit-le…
阅读更多...
物联网模型

物联网模型

1.1 流模型源码 到OneNote Makefile出错：build/output/paho_c_version 先make clean移除bulid/output内的动态库，再make就会看到出错，将build/output的动态库文件命名以 . so结束，再次make就不会出错了。在sudo make install 安装在usr/local/lib中 修改main.c文件之后，…
阅读更多...
火车头采集织梦发布模块插件下载及教程

火车头采集织梦发布模块插件下载及教程

火车头采集网页数据发布到织梦CMS&#xff08;DeDeCMS&#xff09;系统操作步骤如下&#xff1a; 1. 火车头采集织梦DeDeCMS发布模块下载安装 百度网盘&#xff1a;火车头采集织梦CMS发布插件下载地址 提取码&#xff1a;414h 2. 在火车头采集软件导入织梦De…
阅读更多...
【深度学习】stable-diffusion-3，SD3生图体验

【深度学习】stable-diffusion-3，SD3生图体验

stabilityai/stable-diffusion-3-medium 代码地址&#xff1a; https://huggingface.co/stabilityai/stable-diffusion-3-medium 可在这里体验&#xff1a; https://huggingface.co/spaces/ameerazam08/SD-3-Medium-GPU
阅读更多...
【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 生成哈夫曼树(100分) - 三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 生成哈夫曼树(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 ｜ 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 📎在线评测链接 生成哈夫曼树(100分) 🌍 评测功能需要订阅专栏后私信联系清…
阅读更多...
全面解析OpenStack架构：掌握云计算核心组件！

全面解析OpenStack架构：掌握云计算核心组件！

Web Frontends Horizon 技术原理&#xff1a;Horizon是OpenStack的基于Web的用户界面&#xff0c;利用Django框架开发&#xff0c;提供用户友好的界面来管理和使用OpenStack资源。应用场景&#xff1a;用于管理虚拟机、存储、网络等资源。举例&#xff1a;管理员通过Horizon界面…
阅读更多...
响应式德米拉数字内容交易系统素材下载站模板

响应式德米拉数字内容交易系统素材下载站模板

★模板说明★ 该数字交易系统设计非常完美&#xff0c;两种响应式模式&#xff0c;可打开边栏模式和盒子模式&#xff1b;八种网站颜色&#xff0c;四种风格颜色可供用户自行选择&#xff0c;还可在网站选背景图片&#xff1b;完美的分成系统、充值功能、个人中心等等都以html…
阅读更多...
SuperMap iClient3D 11i(2023) SP1 for Cesium 调整

SuperMap iClient3D 11i(2023) SP1 for Cesium 调整

SuperMap iClient3D 11i(2023) SP1 for Cesium 最新版本 下载地址 SuperMap技术资源中心|为您提供全面的在线技术服务 每一次版本升级，都要对代码进行修改调整，都是为了解决功能需求。当然，也为产品做了小白鼠测试，发现bug，优化功能。 由于前端开发使用的是dojo框架，类…
阅读更多...
idea自定义注释模板

idea自定义注释模板

1、打开配置 setting -> Editor -> Live Template 2、添加TemplateGroup&#xff0c;并在添加的TemplateGroup下加LiveTemplate 3、配置Live Template 内容&#xff1a; **** Description: * $param$* return $return$ * author $user$* date $date$ $time$**/变量…
阅读更多...
【文档智能 RAG】RAG增强之路-智能文档解析关键技术难点及PDF解析工具PDFlux

【文档智能 RAG】RAG增强之路-智能文档解析关键技术难点及PDF解析工具PDFlux

前言 在私域知识问答和企业知识工程领域&#xff0c;结合Retrieval-Augmented Generation&#xff08;RAG&#xff09;模型和大型语言模型&#xff08;LLM&#xff09;已成为主流方法。然而&#xff0c;企业中存在着大量的PDF文件&#xff0c;PDF解析的低准确性显著影响了基于…
阅读更多...
Docker Nginx

Docker Nginx

Docker官网 https://www.docker.com/https://www.docker.com/ 删除原先安装的Docker sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ …
阅读更多...
为什么都在避坑抖店？现阶段小白真的很难做起来吗？现状分析

为什么都在避坑抖店？现阶段小白真的很难做起来吗？现状分析

我是王路飞。 如果有想做抖店的&#xff0c;你们可能都发现了一个现象。 那就是现在很多抖店商家都在劝告新手小白&#xff0c;不要入局抖店了&#xff0c;都在劝避坑。 难道现阶段新手小白入局抖音小店&#xff0c;真的很难做起来吗&#xff1f; 我给你们分析下抖店现状&a…
阅读更多...
9. 文本三剑客之awk

9. 文本三剑客之awk

文章目录 9.1 什么是awk9.2 awk命令格式9.3 awk执行流程11.4 行与列11.4.1 取行11.4.2 取列 9.1 什么是awk 虽然sed编辑器是非常方便自动修改文本文件的工具&#xff0c;但其也有自身的限制。通常你需要一个用来处理文件中的数据的更高级工具&#xff0c;它能提供一个类编程环…
阅读更多...
干部考评系统如何评估干部表现

干部考评系统如何评估干部表现

一、引言 干部考评系统是现代组织管理中不可或缺的一部分&#xff0c;它通过科学、公正、客观的方式对干部的表现进行评估&#xff0c;为干部的选拔、培养、激励和约束提供有力依据。本文旨在探讨干部考评系统如何有效评估干部表现。 二、干部考评系统的构建 明确考评目标&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023