vue3 学习 之 vue3使用

为什么要学习vue3呢?

vue2.0也是现在比较稳定的一个版本,社区还有周边都比较完善,如果不是非必要其实我们不需要着急直接升级到vue3.0;
那为什么还要学习,主要是还是为了了解一下vue3.0相较于2.0的优势和特性,方便之后3.0版本的社区和周边完善之后,我们直接升级到3.0去使用,还有就是为了提升一下技术和涨薪资,毕竟3.0刚出的时候就受到了业内各个大佬的关注,现在的前端圈最火的也就是vue3.0了,所以不管是为了学习新的知识,还是学习尤大的编程思想,亦或者是为了涨薪资我们都有必要去看一看学一学。

怎么从2.0版本升级到3.0版本?

首先我们想要体验3.0版本还是得先升级,下边先介绍几个可以升级到3.0版本的方法;

1.第一种方式, 使用官方的vue-cli脚手架升级;如果有看不明白的同学可以直接去官网查看vue-cli

// 先把脚手架升级到最新版本,如果之前没有安装过的话,直接全局安装就是最新版本的4.0
npm install -g @vue/cli
or
yarn global add @vue/cli

// 如果已经安装过的可以升级一下版本
npm update -g @vue/cli
or
yarn global upgrade --latest @vue/cli

ps: 把版本升级到最新之后,就可以直接开始安装了,先创建一个vue3.0的项目

vue create vue3 // 默认选择3.0版本创建就可以了,创建之后就可以运行一下体验了
cd vue3 // 进去之后
yarn serve

ps: 如果忘了选择3.0?没事的不打紧还可以进入项目中安装

// 如果你创建的项目是默认选择的2.0版本, 按下边的操作就可以
yarn add vue-next // add vue-next 会自动升级到vue3的版本

2.第二种方式使用vite安装,这个也是尤大的力作 vite github 地址

// 首先我们需要先把vite代码clone到本地
git clone https://github.com/vitejs/vite.gi

cd vite // 进入文件

yarn // 开始安装依赖

yarn build // 打包

yarn link

ps: 开始创建你的项目

yarn create vite-app project-name
cd project-name
yarn
yarn dev

ps: 完成上述操作就可以开始愉快的体验vue3.0了

vue3的composition API的简单介绍和使用 compositon API 使用官方手册

1.首先先来认识一下composition API

什么是composition API?字面解释就是组合式API,也就是将原来的很多底层的方法拆分开,暴露出来让大家去使用;
比如原来的方法只能写在methods里边,但是在vue3中是有一定变化的,要放到setup中去使用;

下边先来看几个我觉得比较重要的API,先简单的介绍下使用方式?感受下跟之前的2.0有什么不一样的地方;

image
1.createApp // 顾名思义,创建一个APP实例,不过要怎么使用呢?
// 先导入createApp模块
import { createApp } from 'vue';
import App from './App.vue';// 使用createApp方法将我们的入口文件放进去,最后挂载
createApp(App).mount('#app');
2.onMounted // 跟之前的写法不一样了不过,多了一个on
// 先导入onMounted模块
import { onMounted, defineComponent } from 'vue';export default defineComponent({setup () {// 使用的时候需要放在setup里边onMounted(() => {console.log('组件挂在结束开始打印。。。')})}
})
3.computed 计算机属性
import { computed, ref } from 'vue';// 基本操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2plusOne.value++ // 错误!
import { computed, ref } from 'vue';// 可以修改值
const count = ref(1)
const plusOne = computed({get: () => count.value + 1,set: (val) => {count.value = val - 1},
})plusOne.value = 1
console.log(count.value) // 0
4.watch 监听器
import { reactive, watch } from 'vue';
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(() => state.count,(count, prevCount) => {/* ... */}
)// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {/* ... */
})
5.watchEffect 监听器的升级版本,立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。
const count = ref(0)watchEffect(() => console.log(count.value))
// -> 打印出 0setTimeout(() => {count.value++// -> 打印出 1
}, 100)

停止侦听,当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时, 侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。

const stop = watchEffect(() => {/* ... */
})// 之后
stop()
6.reactive 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable(),注意在源码中明确显示需要传递一个对象,否则会抛出异常,如果想要对一个单独的变量使用响应式,可以使用ref下边介绍
const obj = reactive({ count: 0 }) // 返回的就是响应式对象
// 使用
obj.count ++
console.log(obj.count) // 输出的是1

如果想要在组件内使用这个变量需要在setup中返回

第一种返回形式

<template><!-- 这种形式在组件内使用的时候需要obj.count --><p>{{ obj.count }}</p> 
</template>
import { reactive } from 'vue';export default defineComponent({setup () {const obj = reactive({ count: 0 })return { obj } // 这种形式在组件内使用的时候需要obj.count}
})

第二种返回形式

<template><!-- 这种形式在组件内使用的时候跟之前一样 --><p>{{ count }}</p> 
</template>
import { reactive, toRefs } from 'vue';export default defineComponent({setup () {const obj = reactive({ count: 0 })return { ...toRefs(obj) }}
})
7.toRefs 把一个响应式对象转换成普通对象,该普通对象的每个 property 都是一个 ref ,和响应式对象 property 一一对应。

上边的例子为什么要用toRefs包裹起来呢,因为是这样的, reactive,实际上是使用的proxy代理了整个对象,返回的是整个对象都是响应式,但是如果这个对象里边的层级很多怎么办,对象中还有对象,那么里边的对象就不是一个响应式了,所以就用toRefs包裹一下,这样相当于是整个对象里边的属性,在源码内部已经做了一次递归,把所有的属性都做了判断,如果是引用类型就会使用proxy再次代理一次,所以整个对象的属性都是响应式的,也就是下边这样的写法;

import { reactive, toRefs } from 'vue';export default defineComponent({setup () {const obj = reactive({ count: 0 })return { ...toRefs(obj) }}
})
8.ref 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。
const count = ref(0)
console.log(count.value) // 0count.value++
console.log(count.value) // 1
9.toRef 可以用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性。
const state = reactive({foo: 1,bar: 2,
})const fooRef = toRef(state, 'foo')fooRef.value++
console.log(state.foo) // 2state.foo++
console.log(fooRef.value) // 3
10.nextTick 跟之前的作用一样只不过呢写法略有不同,想要详细了解的话可以看这里vue nextTick 异步更新机制
import { nextTick } from 'vue';export default defineComponent({setup () {nextTick(() => {console.log('--- DOM更新了 ---')})}
})

关于composition API的介绍就先介绍到这里了,感兴趣的同学可以看这里:
composition API
Vue 组合式 API 心智负担
ps: 有兴趣的同学,想要用一下但是不清楚具体怎么使用我写了一个简单地demo可以帮助大家熟悉一下vue3 demo



喜欢的朋友记得点赞、收藏、关注哦!!!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity实现安卓App预览图片、Pdf文件和视频的一种解决方案

一、问题背景 最近在开发app项目&#xff0c;其中有个需求就是需要在app软件内显示图片、pdf和视频&#xff0c;一开始想的解决方案是分开实现&#xff0c;也就是用Image组件显示图片&#xff0c;找一个加载pdf的插件和播放视频的插件&#xff0c;转念一想觉得太麻烦了&#x…

浏览器控制台打印日志的方法汇总

目录 console.table用法 打印数组 打印对象 打印数组对象 打印数组对象里的指定字段 console.count用法 不传参打印 传参打印 console.warn用法 打印文本 打印对象 console.error用法 打印文本 打印对象 console.assert用法 打印文本 打印对象 consol…

AI视频创作一条龙!达摩院“寻光”平台炸场WAIC,突破可控编辑难题

卡奥斯智能交互引擎是卡奥斯基于海尔近40年工业生产经验积累和卡奥斯7年工业互联网平台建设的最佳实践&#xff0c;基于大语言模型和RAG技术&#xff0c;集合海量工业领域生态资源方优质产品和知识服务&#xff0c;旨在通过智能搜索、连续交互&#xff0c;实时生成个性化的内容…

开源模型应用落地-FastAPI-助力模型交互-进阶篇(一)

一、前言 FastAPI 的高级用法可以为开发人员带来许多好处。它能帮助实现更复杂的路由逻辑和参数处理&#xff0c;使应用程序能够处理各种不同的请求场景&#xff0c;提高应用程序的灵活性和可扩展性。 在数据验证和转换方面&#xff0c;高级用法提供了更精细和准确的控制&#…

Leetcode 3209. Number of Subarrays With AND Value of K

Leetcode 3209. Number of Subarrays With AND Value of K 1. 解题思路2. 代码实现 题目链接&#xff1a;3209. Number of Subarrays With AND Value of K 1. 解题思路 这一题的话整体上是一个滑动窗口的思路&#xff0c;我们维护一个滑动窗口&#xff0c;确保其每一个窗口都…

『大模型笔记』你需要的不是智能体,而是一个适合 AI 的工作流

你需要的不是智能体,而是一个适合 AI 的工作流 文章目录 一. 你需要的不是智能体,而是一个适合 AI 的工作流1. 不要将 AI 的解决方案局限在人类现有的解决方案上2. 不必完全依赖 AI 做决策,而是让 AI 辅助做决策或者做简单的决策3. 结合不同领域的 AI 模型或者工具,设计合适…

RedHat运维-Linux文本操作基础-SED基础

1. 打印出/etc/passwd的第12行的命令为_______________________________________&#xff1b; 2. 打印出/etc/passwd的第12到第18行的命令为________________________________________&#xff1b; 3. 打印出/etc/passwd的总行数的命令为_____________________________________…

低代码研发项目管理流程优化:提效与创新的双重驱动

随着信息技术的迅猛发展&#xff0c;软件项目的规模和复杂度日益增加&#xff0c;传统的软件开发方式已经难以满足快速迭代和高效交付的需求。在这一背景下&#xff0c;低代码平台应运而生&#xff0c;以其高效、灵活、易用的特点&#xff0c;迅速成为软件行业的新宠。然而&…

运行pip出现UnicodeDecodeError: ‘ascii‘ codec can‘t decode

错误: UnicodeDecodeError: ascii codec cant decode byte 0xe2 in position 1025: ordinal not in range(128) ERROR: Exception: Traceback (most recent call last):File "/usr/local/lib/python3.6/dist-packages/pip/_internal/cli/base_command.py", line 22…

C语言下结构体、共用体、枚举类型的讲解

主要内容 结构体结构体数组结构体指针包含结构体的结构链表链表相关操作共用体枚举类型 结构体 结构体的类型的概念 结构体实现步骤 结构体变量的声明 struct struct 结构体名{ 数据类型 成员名1; 数据类型 成员名2; ..…

PostgreSQL的pg_bulkload工具

PostgreSQL的pg_bulkload工具 pg_bulkload 是一个针对 PostgreSQL 提供高性能批量数据加载的工具。相较于内置的 COPY 命令&#xff0c;pg_bulkload 更加灵活并且在许多情况下性能更高。它支持数据的强制加载、数据过滤、数据转换以及错误处理等多种功能&#xff0c;非常适合需…

qt hasPendingDatagrams() 函数

hasPendingDatagrams 是 Qt 框架中 QUdpSocket 类的一个方法&#xff0c;用于检查是否有待处理的数据报到达。在 UDP 通信中&#xff0c;数据以数据报的形式发送&#xff0c;而 QUdpSocket 类提供了用于接收和处理这些数据报的功能。 功能描述 hasPendingDatagrams() 方法用于…

从数据到洞察:DataOps加速AI模型开发的秘密实践大公开!

作者 | 代立冬&#xff0c;白鲸开源科技联合创始人&CTO 引言 在AI驱动的商业世界中&#xff0c;DataOps作为连接数据与洞察的桥梁&#xff0c;正迅速成为企业数据战略的核心。 在WOT全球技术创新大会2024北京站&#xff0c;白鲸开源联合创始人&CTO 代立冬 在「大数据…

严重的OpenSSH漏洞威胁数百万Linux系统

Qualys威胁研究部门(TRU)发现了OpenSSH服务器 (sshd) 中的一个严重漏洞&#xff0c;可能影响全球超过 1400 万个Linux系统。该漏洞被指定为 CVE-2024-6387&#xff0c;允许在基于 glibc 的 Linux 系统上以 root 权限进行远程未经身份验证的代码执行 (RCE)。 此漏洞源于信号处理…

自己写个简单的vite插件

需求&#xff1a;根据使用环境显示对应的标题和icon 先在根目录建个plugins/vite-plugin-title-html.ts 文件内容如下: /*** 替换html里面的标题和icon*/ type HtmlTemplate {title?: string,icon?: string } export default function vitePluginHtmlTitle({ title, icon…

Python 处理Excel 文件, openpyxl 库的使用:

下载&#xff1a; pip install openpyxl 基本使用&#xff1a; 新建一个Excel 工作簿&#xff1a; 使用openpyxl 需要先导入一个Workbook 类&#xff0c; 使用它可以创建一个Workbook<工作簿>对象&#xff0c; 也就是创建一个Excel表文件&#xff0c; web.active 可用来…

智能体重秤pcba方案

智能体重秤应用系统由硬件和软件两部分组成。硬件是指微控制器、扩展存储器、扩展输入输出设备等。软件是各种工作过程的通用名称。硬件和软件只有紧密协调&#xff0c;才能提高系统的性价比。从硬件设计开始&#xff0c;应考虑相应软件的设计方法&#xff0c;软件的设计是基于…

代码随想录算法训练营:26/60

非科班学习算法day26 | LeetCode491:非递减子序列 &#xff0c;Leetcode46:全排列 &#xff0c;Leetcode47:全排列|| 介绍 包含LC的两道题目&#xff0c;还有相应概念的补充。 相关图解和更多版本&#xff1a; 代码随想录 (programmercarl.com)https://programmercarl.com/…

5款好用公司监控软件分享|管理者必看

当今社会&#xff0c;企业数据安全和员工工作效率成为了管理者不可忽视的重要议题。 选择合适的公司监控软件&#xff0c;不仅有助于提升管理效率&#xff0c;还能有效保障企业信息安全。 下面小编将为您分享五款备受好评的公司监控软件&#xff0c;助力管理者更好地管理企业…

C# Winform权限、用户和菜单开发的顺序和注意点

在C# Winform应用程序中&#xff0c;开发权限、用户和菜单功能通常遵循一定的顺序和注意点&#xff0c;以确保功能的连贯性和安全性。下面是一个推荐的开发流程及其注意事项&#xff1a; 开发流程 1. 数据库设计 用户表&#xff1a;存储用户基本信息&#xff0c;如用户名、密…