Vue3框架

Vue3框架

  • 一.使用create-vue搭建Vue3项目
  • 二.组合式API - setup选项
    • 1.setup选项的写法和执行时机
    • 2.setup中写代码的特点
    • 3. script setup 语法糖
  • 三.组合式API - reactive和ref函数
    • 1. reactive
    • 2. ref
    • 3. reactive 对比 ref
  • 四.组合式API - computed
  • 五.组合式API - watch
    • 1. 侦听单个数据
    • 2. 侦听多个数据
    • 3. immediate
    • 4. deep
  • 六.组合式API - 生命周期函数
    • 1. 选项式对比组合式
    • 2. 生命周期函数基本使用
    • 3. 执行多次
  • 七.组合式API下的父传子
  • 七.组合式API下的子传父
  • 八.组合式API模板引用
    • 1.defineExpose()编译宏
  • 九.组合式API - provide和inject
    • 1.跨层传递普通数据
    • 2.跨层传递响应式数据
    • 3.跨层传递方法
  • 十.Vue3.3新特性-defineOptions
  • 十一.Vue3 中的 v-model 和 defineModel

一.使用create-vue搭建Vue3项目

前提环境条件:
已安装 16.0 或更高版本的 Node.js
用node -v命令(查看版本)
执行如下命令,这一指令将会安装并执行 create-vue

npm init vue@latest

vue3的优势:
在这里插入图片描述

二.组合式API - setup选项

1.setup选项的写法和执行时机

写法:

<script>export default {setup(){},beforeCreate(){}}
</script>

执行时机:在beforeCreate钩子之前执行

2.setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return,才能给模版使用

<script>export default {setup(){const message = 'this is message'const logMessage = ()=>{console.log(message)}// 必须return才可以return {message,logMessage}}}
</script>

3. script setup 语法糖

script标签添加 setup标记,不需要再写导出语句,默认会添加导出语句

<script setup>const message = 'this is message'const logMessage = ()=>{console.log(message)}
</script>

三.组合式API - reactive和ref函数

1. reactive

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

<script setup>// 导入import { reactive } from 'vue'// 执行函数 传入参数 变量接收const state = reactive({msg:'this is msg'})const setSate = ()=>{// 修改数据更新视图state.msg = 'this is new msg'}
</script><template>{{ state.msg }}<button @click="setState">change msg</button>
</template>

2. ref

接收简单类型或者对象类型的数据传入并返回一个响应式的对象

<script setup>// 导入import { ref } from 'vue'// 执行函数 传入参数 变量接收const count = ref(0)const setCount = ()=>{// 修改数据更新视图必须加上.valuecount.value++}
</script><template><button @click="setCount">{{count}}</button>
</template>

3. reactive 对比 ref

  1. 都是用来生成响应式数据
  2. 不同点
    1. reactive不能处理简单类型的数据
    2. ref参数类型支持更好,但是必须通过.value做访问修改
    3. ref函数内部的实现依赖于reactive函数
  3. 在实际工作中的推荐
    1. 推荐使用ref函数,减少记忆负担

四.组合式API - computed

计算属性基本思想和Vue2保持一致,组合式API下的计算属性只是修改了API写法

<script setup>
// 导入
import {ref, computed } from 'vue'
// 原始数据
const count = ref(0)
// 计算属性
const doubleCount = computed(()=>count.value * 2)// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList = computed(item=>item > 2)
</script>

五.组合式API - watch

侦听一个或者多个数据的变化,数据变化时执行回调函数,俩个额外参数 immediate控制立刻执行,deep开启深度侦听

1. 侦听单个数据

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

2. 侦听多个数据

侦听多个数据,第一个参数可以改写成数组的写法

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)const name = ref('cp')// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName])=>{console.log(`count或者name变化了,[newCount, newName],[oldCount,oldName])})
</script>

3. immediate

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

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

4. deep

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep

<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 监听对象statewatch(state, ()=>{console.log('数据变化了')})const changeStateByCount = ()=>{// 直接修改不会引发回调执行state.value.count++}
</script><script setup>// 1. 导入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 监听对象state 并开启deepwatch(state, ()=>{console.log('数据变化了')},{deep:true})const changeStateByCount = ()=>{// 此时修改可以触发回调state.value.count++}
</script>

六.组合式API - 生命周期函数

1. 选项式对比组合式

在这里插入图片描述

2. 生命周期函数基本使用

1.导入生命周期函数
2.执行生命周期函数,传入回调

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{// 自定义逻辑
})
</script>

3. 执行多次

生命周期函数执行多次的时候,会按照顺序依次执行

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{// 自定义逻辑
})onMounted(()=>{// 自定义逻辑
})
</script>

七.组合式API下的父传子

基本思想
1.父组件中给子组件绑定属性
2.子组件内部通过props选项接收
在这里插入图片描述
defineProps 原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换
在这里插入图片描述

七.组合式API下的子传父

基本思想
1.父组件中给子组件标签通过@绑定事件
2.子组件内部通过 emit 方法触发事件
在这里插入图片描述

八.组合式API模板引用

1.调用ref函数生成一个ref对象
2.通过ref标识绑定ref对象到标签
在这里插入图片描述

然后通过实例化ref对象的对象名通过.value就可以获取到对应元素,获取时机应在组件挂载完毕后,即OnMounted生命周期函数内或后面的生命周期函数

1.defineExpose()编译宏

默认情况下在script setup语法糖下组件内部的属性和方法是不开放给父组件访问的,
可以通过defineExpose编译宏指定哪些属性和方法允许访问
在这里插入图片描述
这样便可以访问到组件内部的属性或者方法

九.组合式API - provide和inject

作用和场景:
顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

1.跨层传递普通数据

1.顶层组件通过provide函数提供数据
2.底层组件通过inject函数获取数
在这里插入图片描述

2.跨层传递响应式数据

在调用provide函数时,第二个参数设置为ref对象
在这里插入图片描述

3.跨层传递方法

顶层组件可以向底层组件传递方法,底层组件调用方法修改顶层组件中的数据
在这里插入图片描述

十.Vue3.3新特性-defineOptions

在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义,主要是用来定义 Options API 的选项。可以用defineOptions 定义任意的选项, props, emits, expose, slots 除外(因为这些可以使用 defineXXX 来定义)
在这里插入图片描述

十一.Vue3 中的 v-model 和 defineModel

在Vue3中,自定义组件上使用v-model, 相当于传递一个modelValue属性,同时触发 update:modelValue 事件
在这里插入图片描述
我们需要先定义 props,再定义 emits 。其中有许多重复的代码。如果需要修改此值,还需要手动调用 emit,而使用defineModel可以直接修改
在这里插入图片描述
要使用defineModel要先从vue中导入,然后在vite的配置文件中进行配置
在这里插入图片描述

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

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

相关文章

Gone框架介绍3 - 使用gone命令,自动生成Priest函数

文章目录 1. 安装辅助工具: gone2. 创建一个名为gen-code的新项目3. 创建Goner4. 使用辅助工具5. 添加main函数 我在两年前实现了一个Golang的依赖注入框架&#xff0c;并且集成了gin、xorm、redis、cron、消息中间件等功能&#xff0c;自己觉得还挺好用的&#xff1b;之前一直…

Linux Mint 21.3 “Virginia“ 简介

Linux Mint 21.3 "Virginia" 是Linux Mint项目发布的最新版本&#xff0c;这个版本基于Ubuntu 22.04 LTS&#xff08;Jammy Jellyfish&#xff09;&#xff0c;并提供了三个主要的桌面环境&#xff1a;Cinnamon、MATE和Xfce。每个桌面环境都有其独特的特点和优势&…

Unity射击游戏开发教程:(8)构建 UI 元素:添加分数显示

用户界面决定用户如何与屏幕交互。UI 适用于所有类型的游戏和应用程序,在此示例中,我们将为我的太空射击游戏设置一个简单的记分板。 第一步是在层次结构中创建一个 UI 元素。只需在层次结构中右键单击,滚动 UI 并选择要添加的 UI 元素类型。在本例中,我们将使用文本元素。…

编程新手如何快速提升编码能力?

编程新手想要快速提升编码能力&#xff0c;可以遵循以下几个策略&#xff1a; 基础扎实&#xff1a;首先&#xff0c;确保你对所学编程语言的基础概念有深刻理解&#xff0c;包括变量、数据类型、控制结构&#xff08;如循环、条件语句&#xff09;、函数、类和对象&#xff08…

使用 Docker 自建一款怀旧游戏之 - 扫雷

1&#xff09;扫雷 简介 扫雷 是一种经典的单人电脑游戏&#xff0c;最初由微软公司在 1990 年代开发并内置在 Windows 操作系统中。游戏的目标是在一个由方块组成的网格上揭开所有非地雷的方块&#xff0c;而不触发地雷。每个方块上都标有数字&#xff0c;表示周围 8 个方块中…

Java网址url工具类

功能描述 无需引入三方依赖文本匹配网址&#xff08;支持多个&#xff09;网址解析&#xff08;包括协议、主机、路径、参数等&#xff09; package com.qiangesoft.image.utils;import org.springframework.util.Assert; import org.springframework.util.CollectionUtils;i…

行为学学习记忆实验和抗焦虑实验两款硬件

安徽耀坤XWX-BM八臂迷宫实验&#xff08;Eight-arm Maze Test&#xff0c;RMT&#xff09;由八个完全相同的臂组成&#xff0c;这些臂从一个中央平台放射出来&#xff0c;所以又被称为放射迷宫。其基本方式是&#xff1a;训练动物受食物的驱使对迷宫的各臂进行探究&#xff0c;…

xLua背包实践

准备工作 环境&#xff0c;代码 在C#代码方面我们需要准备单例模式基类&#xff0c;AB包管理器&#xff0c;lua解析器管理器 详情请见AB包管理器 xlua详解 然后是Xlua包和AB包&#xff0c;具体导入方法也在上面的链接中 然后是lua的三个文件 具体代码&#xff1a; JsonUtil…

SSH Config 后门 | Linux 后门系列

ssh 客户端配置文件加载顺序 命令行参数 > ~/.ssh/config > /etc/ssh/ssh_config Ubuntu server 16.04 默认 /etc/ssh/ssh_config # Host * # ForwardAgent no # ForwardX11 no # RhostsRSAAuthentication no # RSAAuthentication …

一、OSPF基础

目录 1.路由协议的优先级 2.转发原则&#xff1a;最长匹配原则 3.负载分担 4.路由备份&#xff08;浮动路由&#xff09; 5.路由协议的分类 6.动态路由 7.距离矢量路由协议&#xff08;BGP&#xff0c;RIP&#xff09; 8.链路状态路由协议&#xff08;OSPF&#xff0c;I…

联系Odoo partner邮件怎么写

亲爱的Odoo 伙伴 我是广东同欣的惊蛰&#xff0c;我通过Odoo官方的珠三角 Partner列表找到了你。 GuangDong TongXin Ai Technology Co., Ltd.&#xff0c;是一家面向中国提供Odoo服务的高科技公司。同欣总部位于广州&#xff0c;目前客户覆盖在广州&#xff0c;深圳&#…

SpringBoot配置HTTPS及开发调试

前言 在实际开发过程中&#xff0c;如果后端需要启用https访问&#xff0c;通常项目启动后配置nginx代理再配置https&#xff0c;前端调用时高版本的chrome还会因为证书未信任导致调用失败&#xff0c;通过摸索整理一套开发调试下的https方案&#xff0c;特此分享 后端配置 …

西瓜书学习——决策树形状、熵和决策树的本质

文章目录 决策树形状监督学习算法分类与回归 熵信息熵香农熵 (Shannon Entropy) - H(X)联合熵 (Joint Entropy) - H(X, Y)条件熵 (Conditional Entropy) - H(Y|X)互信息 (Mutual Information) - I(X; Y)相对熵 (Relative Entropy) / KL散度 (Kullback-Leibler Divergence) - DK…

misc学习

一.知识点 1.BMP文件 BMP文件主要有四部分组成&#xff0c;位图头、位图信息、调色板、位图数据。 bmp文件头(bmp file header)&#xff1a;提供文件的格式、大小等信息 位图信息头(bitmap information)&#xff1a;提供图像数据的尺寸、位平面数、压缩方式、颜色索引等信息…

PCL 点云表面重建之曲面平滑(Mobile Least Square, MLS)

一、介绍 1.1 MLS介绍 移动最小二乘法(Mobile Least Square, MLS)是一种用于曲面重建或形变的方法。它通过对曲面进行局部加权平均来减小噪声和估计曲面上的法线方向。   MLS方法的基本思想: 以每个点为中心取一定半径内的邻域点,然后通过最小二乘法拟合一个局部平面或曲…

Docker容器管理详解

引言 Docker作为当前流行的容器化技术&#xff0c;使得应用的部署、扩展和管理变得更加容易。本文将详细介绍Docker容器的概念、特点&#xff0c;以及如何使用Docker命令进行容器管理。 一&#xff0c;Docker容器概念与特点 Docker容器是一种轻量级、可移植、自包含的运行环…

JAVA顺序表相关习题1

1.笔试题:cvte str1 :welcome to cvte str2:come 描述:删除第一个字符串当中出现的所有的第二个字符串的字符!结果:wlt vt 要求 用ArrayList完成! public class Test {public static List<Character> findSameWords(String u1, String u2){List<Character> listn…

Sora新突破!AI生成电影迈向新阶段,配音版Sora登场!将如何改变影视行业?

Sora之后迎来新突破&#xff01; 配音版Sora来袭&#xff0c;AI生成电影又更近一步&#xff01; 在2024年伊始&#xff0c;人工智能界迎来了一次创新性的突破&#xff0c;由AI语音技术的先锋公司ElevenLabs带头实现。他们最近的成就体现在为OpenAI的Sora视频模型提供了令人动容…

Faiss:高效向量搜索引擎的原理与实践

向量搜索在机器学习、数据检索和推荐系统中扮演着至关重要的角色。它能够帮助我们快速找到在大规模数据集中与查询点最接近的数据点。Faiss&#xff08;发音类似于"fess"&#xff09;&#xff0c;是由Facebook AI Research&#xff08;FAIR&#xff09;团队开发的一个…

tiktok如何影响用户行为的分析兼论快速数据分析的策略

tiktok如何影响用户行为的分析 快速数据分析的策略流程&#xff1a; 1.确定指标变量&#xff0c;也就确定了数据分析想要回答的问题。想回答不同的问题&#xff0c;就选择不同的指标变量。 变量筛选方法选出指标变量相关的变量&#xff1b; 针对筛选出的变量进行描述性分析和因…