浅析Vue3基础知识(vue3笔记之入门篇)

本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))

喜欢的话点个赞,谢谢!

时下Vue框架都是使用Vue3版本来开发项目了,为了加深对Vue3基本知识的了解,特写了这个笔记

1. 生命周期

1.1. vue3生命周期

一个组件从开始到结束,正常的生命周期流程应该是这样:

//1.开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
setup()
//2.在组件挂载之前执行
onBeforeMount()
//3.在组件挂载之后执行
onMount()
//4.在组件更新之前执行
onBeforeUpdate()
//5.在组件更新之后执行
onUpdated()
//6.在组件卸载之前执行
onBeforeUnmount()
//7.在组件卸载之后执行
onUnmounted()

还有三个函数是特殊情况执行的:

onErrorCaptured

当捕获一个来自一个来自子孙组件的异常时触发的钩子函数

<keep-alive>: 被包含在<keep-alive>中的组件,会多出2个生命周期钩子函数:

onActivated

每次进入该组件页面都会触发

onDeactivated

比如从A组件切换到B组件,A组件消失时执行(等于是离开组件时触发)

1.2. vue2生命周期

vue2生命周期对比vue3生命周期,主要是beforeCreate和created被setup取代,还有一些方法名的变化:

//1.开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
beforeCreate +  created  =  setup()
//2.在组件挂载之前执行
beforeMount()   =>  onBeforeMount() 
//3.在组件挂载之后执行
mounted()       =>  onMount()
//4.在组件更新之前执行
beforUpdated()  =>  onBeforeUpdate()
//5.在组件更新之后执行
Updated()       =>  onUpdated()
//6.在组件卸载之前执行
beforeDestory() =>  onBeforeUnmount()
//7.在组件卸载之后执行
destoryed()     =>  onUnmounted()
//<keep-alive>
activated()     =>  onActivated() 
deactivated()   =>  onDeactivated()
//当捕获一个来自一个来自子孙组件的异常时触发的钩子函数
errorCaptured()   =>  onErrorCaptured()

2. 选项式api和组合式api

在做React开发的时候经常听到朋友抱怨vue2历史项目难以维护,代码分层逻辑乱的一团糟,本人也有幸维护过几个vue2项目,深有感触

2.1. 选项式api的痛点:

一个整体的逻辑会被拆分到data、method、watch里面去,如果开发者经验不足或者不编写注释,代码维护程度简直令人抓狂(^_^)

2.2. 组合式api

组合式api的特点就是可以将单个功能的状态、方法、计算属性都融合在一起组成一个hook(抽离逻辑自定义hook),然后再将这个hook引入到组合api里面,这样做的好处是便于阅读和代码维护,如下图所示:

这图是社区复制而来(^_^)

2.2.1. setup

Vue3新的一个配置项,所有的组合式函数都在此使用,只在初始化的时候执行一次。setup可以在选项式api里面使用,也可以在组合式api里面使用,不过官方更推荐在组合api风格里面使用,如下图所示:

选项式api风格:

<script>
import { ref } from 'vue'
export default {
    setup () {
        const count = ref(0)
        return {
            count
        }
    }
}
</script>
<template>
  <div>{{ count }}</div>
  <button @click="count++">
    +
  </button>
</template>
<style lang='less' scoped>
</style>

组合式api风格:

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
  <div>{{ count }}</div>
  <button @click="count++">
    +
  </button>
</template>
<style lang='less' scoped></style>

区别:

此处官网介绍的比较详细,可以跳转查阅Vue3.js组合式api

  • <srcipt setup>可以直接使用顶层变量和函数,选项式代码则还需要导出才能使用
  • <srcipt setup>对ts支持更好
  • <srcipt setup>打包出来的体积更小
  • <srcipt setup>肉眼可见的代码直观性和简洁

3. 响应式

Vue2与Vue3响应式的区别在于,vue2的响应式是基于Object.definePropert做数据劫持,而Vue3是基于Es6的Proxy来进行数据劫持

3.1.1. ref

ref接收一个值,返回一个响应式对象,可以处理简单的数据类型,底层还是基于Object.definePropert做数据劫持,如果在处理对象类型的时候会求助reactive。如下图所示:

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
  <div>{{ count }}</div>
  <button @click="count++">
    +
  </button>
</template>
<style lang='less' scoped></style>
3.1.2. reactive

reactive是用来做深层响应式代理的,如果传入的是基本数据类型如数字、字符串等它将不是响应式对象,reactive返回一个Proxy对象,Proxy对象是专门用来处理代理的,内部可以实现数据的增删改查操作,所以reactive可以实现基本的拦截和自定义。如下图所示:

<script setup lang="ts">
import { ref } from 'vue'
const count = ref({
    arr: [1, 2, 3, 4]
})
const add = (value:number) => {
    count.value.arr.push(value)
}
</script>
<template>
  <div>{{ count.arr }}</div>
  <button @click="add(1)">
    +
  </button>
</template>
<style lang='less' scoped></style>
3.1.3. shallowReactive 与 shallowRef

shallowRef传入对象不会求助reactive,只会对value值响应,shallowReactive只处理第一层的对象响应,更深层次不会进行响应。这两个api所用甚少,这里就不过多介绍了
 

4. 计算属性和监听

4.1. computed函数

computed函数是用来做计算的,通过监听某一个值得到一个新的值,有两种写法

  1. 只读写法: computed(()=>a + b)
  2. 可读可改写法:computed({get:()=>a + b,set:(val)=> {xxxxx}})
<script setup lang="ts">
import { computed, ref } from 'vue'
const count = ref(0)
const setCount2 = computed({
    get: () => {
        return count.value + 1
    },
    set: (value) => {
        count.value = value + 1
    }
})
</script>
<template>
  <div>{{ count }}</div>
  <button @click="count++">
    +1
  </button>
  <button @click="setCount2++">
    +3
  </button>
</template>
<style lang='less' scoped></style>

4.2. watch函数

watch函数是用来监听一个响应式对象,或者多个(多个时第一个参数为数数组),当监听对象发生变化时返回一个回调函数

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
//监听
watch(count,(newvalue,oldvalue)=>{
    console.log(newvalue)
})
</script>
<template>
  <div>{{ count }}</div>
  <button @click="count++">
    +
  </button>
</template>
<style lang='less' scoped></style>
4.3. watchEffect

watchEffect函数用于监听传入的函数内部所有的响应式对象的变化,就是回调里面用了哪个对象就监听哪个对象

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const count = ref(0)
const add = (count:number) => {
    console.log(count)
}
// 监听
watchEffect(() => {
    add(count.value)
})
</script>
<template>
  <div>{{ count }}</div>
  <button @click="count++">
    +
  </button>
</template>
<style lang='less' scoped></style>

5. 组件通信

vue的组件通信与React不太一样,React因为JSX语法的原因不需要特殊处理,vue的话因为采用的模板语法,所以需要使用一些方法来处理

5.1. 父子通信

在vue3里面传递数据的时候,可以使用definePorps来接收父组件传入的props参数:

在父组件使用子组件时,使用props对其传入数据:

  <Child :count="count" />

子组件接收:

<script setup lang='ts'>
import { defineProps } from 'vue'
const props = defineProps({
    count: {
        type: Number,
        default: 0
    }
})
</script>
<template>
  <div>{{ props.count }}</div>
</template>

注意点:props为只读属性,不可更改,如果需要更改传入的数据,可以在当前组件重新定义一个ref对象

5.2. 子父通信

子组件向父组件发送消息会稍微麻烦一点,毕竟框架数据流通都是基于单向数据流的理念的,所以需要采用额外的方法来处理

5.2.1. 添加回调函数

通过向子组件发送一个回调函数的方式,直接在子组件调用

<script setup lang="ts">
import { ref } from 'vue'
import Child from './test.vue'
const count = ref(0)
const add = () => {
    count.value = count.value + 1
}
</script>
<template>
  <div />
  父组件显示:{{ count }}
  <Child
    :count="count"
    :add="add"
  />
</template>
<style lang='less' scoped></style>

子组件:

<script setup lang='ts'>
import { defineProps } from 'vue'
const props = defineProps({
    add: {
        type: Function,
        default: () => {}
    }
})
</script>
<template>
  <button :onclick="props.add">
    +
  </button>
</template>
<style lang='less' scoped>
</style>
5.2.2. provide与inject

可以实现隔代组件通信

父组件:

<script setup lang="ts">
import { ref, provide } from 'vue'
import Child from './test.vue'
const count = ref(0)
provide('Count', count)
</script>
<template>
  <div />
  父组件显示:{{ count }}
  <Child
    :count="count"
  />
</template>
<style lang='less' scoped></style>

子组件:

<script setup lang='ts'>
import { inject } from 'vue'
const count = inject('Count')
const add = () => {
    count.value = count.value + 1
}
</script>
<template>
  <button :onclick="add">
    +
  </button>
</template>
<style lang='less' scoped>
</style>
5.2.3. 使用pinia通信

安装

yarn add pinia

创建store

import { createPinia } from 'pinia'
// 创建store
const store = createPinia()
// 对外暴露,安装仓库
export default store

注册

...
import pinia from './store/pinia'

...

app.use(router)
    .use(Antd)
    .use(store)
+   .use(pinia)
    .mount('#app')

添加models

import { defineStore } from 'pinia'
const Store = defineStore('test', {
    state: () => {
        return {
            count: 0
        }
    },
    actions: {
        add (count:number) {
            this.count = this.count + count
        }
    },
    getters: {

    }
})
export default Store

页面显示

<script setup lang="ts">
import infostore from '@/store/piniamodels'
import Child from './test.vue'
const store = infostore()
const add = () => {
    store.add(1)
}
</script>
<template>
  父组件显示:{{ store.count }}
  <button :onclick="add">
    +
  </button>
  子组件显示:
  <Child />
</template>
<style lang='less' scoped></style>

子组件:

<script setup lang='ts'>
import infostore from '@/store/piniamodels/index'
const store = infostore()
</script>
<template>
  {{ store.count }}
</template>
<style lang='less' scoped>
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【免费】2021年数学建模国赛C题问题一--基于熵权法和TOPSIS法详细版附Word加代码

【免费】2021年数学建模国赛C题问题一--基于熵权法和TOPSIS法详细版附Word加代码

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…
阅读更多...
EXCEL多sheet添加目录跳转

EXCEL多sheet添加目录跳转

EXCEL多sheet添加目录跳转 背景 excel中有几十个sheet&#xff0c;点下方左右切换sheet太耗时&#xff0c;希望可以有根据sheet名超链接跳转相应sheet&#xff0c;处理完后再跳回原sheet。 方案一 新建目录sheet&#xff0c;在A1写sheet名&#xff0c;右键选择最下方超链接…
阅读更多...
I.MX RT1170之MIPI CSI摄像头初始化和显示流程详解

I.MX RT1170之MIPI CSI摄像头初始化和显示流程详解

在上一篇文章I.MX RT1170之MIPI DSI初始化和显示流程详解中&#xff0c;我们介绍了RT1170单片机中MIPI DSI显示屏初始化和显示的详细步骤&#xff0c;那这一节就来介绍MIPI的另一个接口应用&#xff1a;摄像头CSI的初始化和配置流程。 对于摄像头来说&#xff0c;一般我们还要…
阅读更多...
软件产品必须要进行鉴定测试吗?测试流程和作用简析

软件产品必须要进行鉴定测试吗?测试流程和作用简析

软件产品是现代社会中不可或缺的一部分&#xff0c;它们在商业、娱乐、科技等领域的应用广泛且深入。然而&#xff0c;我们是否关注过这些软件产品的鉴定测试呢?鉴定测试是什么?它的测试流程有哪些?又有什么作用呢?在本文中&#xff0c;我们将为您全面解析这些问题。 鉴定…
阅读更多...
大数据学习问题记录

大数据学习问题记录

问题记录 node1突然无法连接finalshell node1突然无法连接finalshell 今天我打开虚拟机和finalshell的时候&#xff0c;发现我的node1连接不上finalshell,但是node2、node3依旧可以链接&#xff0c;我在网上找了很多方法&#xff0c;但是是关于全部虚拟机连接不上finalshell&a…
阅读更多...
USB HOST DWC3 初始化

USB HOST DWC3 初始化

https://www.cnblogs.com/newjiang/p/15675746.html 如果dr_mode为device&#xff0c;则初始化gadget。 如果dr_mode为host&#xff0c;需要初始化xHCI驱动。在dwc3_host_init函数的最后调用platform_device_add(xhci)添加platform device&#xff08;xhci-hcd&#xff09;&a…
阅读更多...
从当当网批量获取图书信息

从当当网批量获取图书信息

爬取当当网图书数据并保存到本地&#xff0c;使用request、lxml的etree模块、pandas保存数据为excel到本地。 爬取网页的url为&#xff1a; http://search.dangdang.com/?key{}&actinput&page_index{} 其中key为搜索关键字&#xff0c;page_index为页码。 爬取的数据…
阅读更多...
(九)Spring教程——ApplicationContext中Bean的生命周期

(九)Spring教程——ApplicationContext中Bean的生命周期

1.前言 ApplicationContext中Bean的生命周期和BeanFactory中的生命周期类似&#xff0c;不同的是&#xff0c;如果Bean实现了org.springframework.context.ApplicationContextAware接口&#xff0c;则会增加一个调用该接口方法setApplicationContext()的步骤。 此外&#xff0c…
阅读更多...
[数据集][图像分类]蘑菇分类数据集3122张215类别

[数据集][图像分类]蘑菇分类数据集3122张215类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;3122 分类类别数&#xff1a;215 类别名称:[“almond_mushroom”,“amanita…
阅读更多...
C# 中文字符串转GBK字节的示例

C# 中文字符串转GBK字节的示例

一、编写思路 在 C# 中&#xff0c;将中文字符串转换为 GBK 编码的字节数组需要使用 Encoding 类。然而&#xff0c;Encoding 类虽然默认并不直接支持 GBK 编码&#xff0c;但是可以通过以下方式来实现这一转换&#xff1a; 1.使用系统已安装的编码提供者&#xff08;如果系统…
阅读更多...
【Spring Cloud Alibaba】开源组件Sentinel

【Spring Cloud Alibaba】开源组件Sentinel

目录 什么是Sentinel发展历史与Hystrix的异同 Sentinel可以做什么&#xff1f;Sentinel的功能Sentinel的开源生态Sentinel的用户安装Sentinel控制台预备环境准备Sentinel 分为两个部分:下载地址 项目集成Sentinel创建项目修改依赖信息添加启动注解添加配置信息在控制器类中新增…
阅读更多...
Java 新手入门：基础知识点一览

Java 新手入门：基础知识点一览

Java 新手入门&#xff1a;基础知识点一览 想要踏入 Java 的编程世界&#xff1f;别担心&#xff0c;这篇文章将用简单易懂的表格形式&#xff0c;带你快速了解 Java 的基础知识点。 一、Java 是什么&#xff1f; 概念解释Java一种面向对象的编程语言&#xff0c;拥有跨平台、…
阅读更多...
最新PHP众筹网站源码 支持报名众筹+商品众筹+公益众筹等多种众筹模式 含完整代码包和部署教程

最新PHP众筹网站源码 支持报名众筹+商品众筹+公益众筹等多种众筹模式 含完整代码包和部署教程

在当今互联网飞速发展的时代&#xff0c;众筹模式逐渐成为了创新项目、商品销售和公益活动融资的重要渠道。分享一款最新版的PHP众筹网站源码&#xff0c;支持报名众筹、商品众筹和公益众筹等多种众筹模式。该源码包含了完整的代码包和详细的部署教程&#xff0c;让新手也可以轻…
阅读更多...
机器学习：算法到底学到了什么？

机器学习：算法到底学到了什么？

梯度下降算法 初始化参数 θ 0 \theta^0 θ0可以训练 MAML Maml和pre-train的区别是Maml用到了标注数据 把不同任务的数据放一起进行训练一个模型&#xff0c;当作Maml的baseline 领域迁移迁移学习 Maml好的原因 优化器也可以被学习 网络架构搜索 数据增强 样本权重分配 除…
阅读更多...
创建自己的sdk

创建自己的sdk

要把造轮子当作一种享受 右键class出来这个界面,在里面勾选静态库(.lib) 代码如下,我们要将其封装为一个sdk供别人安装使用 cpp文件如下 头文件如下,namespace可以写在头文件里面声明 生成 将那两个文件移到那个文件夹中 我们拿到生成的这两个文件了 截下来演示怎么导入到另…
阅读更多...
docker-compose部署 kafka 3.7 启用账号密码认证

docker-compose部署 kafka 3.7 启用账号密码认证

文章目录 1. 部署1.1 创建工作目录1.2 yml文件1&#xff09;文件内容2&#xff09;说明&#xff1a; 1.3 启动 2. 测试2.1 kafkamap搭建&#xff08;测试工具&#xff09;2.2 权限测试 1. 部署 1.1 创建工作目录 创建kafka目录&#xff0c;进入该目录 1.2 yml文件 1&#x…
阅读更多...
Docker中搭建likeadmin

Docker中搭建likeadmin

一、使用Docker中的docker-compose搭建likeadmin 1.去网址&#xff1a;https://gitee.com/likeadmin/likeadmin_php中下载likeadmin 注册一个giee账号后 点那个克隆下载 按照序号在终端复制粘贴进去。 接着&#xff0c;输入ls 可以发现有一个这个&#xff1a; 里面有一个like…
阅读更多...
Cell｜3D病理弱监督模型在前列腺癌患者治疗中的应用｜顶刊精析·24-06-04

Cell｜3D病理弱监督模型在前列腺癌患者治疗中的应用｜顶刊精析·24-06-04

小罗碎碎念 这篇文章我之前分析过一遍&#xff0c;本期在原有基础上进行修改。 在正式阅读之前&#xff0c;小罗友情提醒大家重点关注一下几个方向&#xff1a; 从2D组织切片计算的TLS面积已被验证为多种肿瘤类型的预后和免疫治疗响应的生物标志物&#xff0c;然而在小样本活检…
阅读更多...
ToxVidLLM：一个用于检测有害视频的多模态多任务框架

ToxVidLLM：一个用于检测有害视频的多模态多任务框架

在一个社交媒体平台赋予用户成为内容创作者力量的时代&#xff0c;数字领域见证了前所未有的信息传播激增&#xff0c;到2023年&#xff0c;近82%的互联网流量是视频内容。因此&#xff0c;像抖音和YouTub这样的平台已经成为主要的信息来源。一个显著的统计数据凸显了这些平台的…
阅读更多...
38【Aseprite 作图】包子——拆解

38【Aseprite 作图】包子——拆解

1 包子轮廓 2 画包子中间的褶皱&#xff0c;褶皱颜色更深一点&#xff0c;不要直接斜着&#xff0c;而是要连着
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站