vue3 项目的创建、组合式API、rective和ref、watch函数

vue3项目的创建:

npm init vue@latest

在执行上述代码以后,按需勾选项目所需的东西就可以

然后再命令行依次执行:

// 进入项目
cd vuedemo
//安装下来对应的包
npm install
//启动项目
npm run dev

文件解读:

package.json :相关的依赖

vite.config.js :项目的配置文件 (基于vite) 添加一些工具和插件

main.js :creatApp创建一个应用实例对象,import导入组件和样式文件css等 mount方法做挂载操作,creatApp函数创建应用实例

index.html :提供了id作为app的挂载点

组合式API 入口(setup):

<script setup> 是vue3提供的一个语法糖,写上了setup就可以直接写组合式api

在setup{ }中定义的数据和方法必须return出去才可以使用

vue3中的this 并不指向我们的组件实例,会undefine

语法糖:<script setup>

使用语法糖以后就不用setup{ }了,在里面定义的数据和方法也不用return了

总结:

setup的执行时机:在beforeCreate钩子执行之前,自动执行

setup写代码的特点:定义数据+函数 然后以对象的方式retrurn

语法糖:更简单的使用组合式API

setup中的this不再指向组件实例,而是指向undefine

组合式API rective和ref

reactive():接收对象类型数据的参数并返回一个响应式的对象

import { reactive } from 'vue'
const state = reactive({count: 0
})
const good =  () => {state.count++
}
<button @click="good">{{ state.count }}</button>

ref() :接收对象类型数据和基本的类型数据的参数并返回一个响应式的对象

import {ref} from 'vue'
const state = ref(0)
const good =  () => {state.value++
}
<button @click="good">{{ state }}</button>

注意:在脚本区域修改ref的话就需要使用ref.data

总结:

reactive和ref :都用来生成响应式数据

reactive vs ref:reactive不能处理简单的数据类型,ref在script中必须通过.value访问

在实际的开发过程中我们通常使用ref函数

watch函数

作用:监听数一个或者多个数据的变化,数据变化时执行回调函数,两个额外的参数:1、immediate(立即执行)2、deep(深度监听)

监听单个数据:

<script setup>
import { ref,watch} from 'vue'
const count = ref(0)
const setCount = () => {count.value++
}
watch(count,(newVal,oldVal) => {console.log('count变化了',newVal,oldVal)
})
</script>
<template><div><button @click="setCount">{{ count }}</button></div>
</template>

监听多个数据:

<script setup>
import { ref,watch} from 'vue'
const count = ref(0)
const changeCount = () => {count.value++
}
const name = ref('con')
const changeName = () => {name.value = 'pc'
}watch([count,name],([newCount,newName],[oldCount,oldName]) => {console.log('有值发生变化了',[newCount,newName],[oldCount,oldName])}
)
</script>
immediate:在监听器创建时立即触发回调,响应式数据变化之后继续执行回调

1、除了做计算剩下的都不要做,不然会降低性能

2、计算出来的值不能直接去修改前台的页面中的值,计算出来的是只读的

<script setup>
import { ref } from 'vue'
import { computed } from 'vue'
const list = ref([1,2,3,4,5,6,7,8])
const computedList = computed(()=>{return list.value.filter(item => item >2)// return list.value.filter((item) => item >2)
})setTimeout(() => {list.value.push(9,10)
},3000)
//filter方法
</script>
<template><div>原始响应式数据{{ list }}计算后的数据{{ computedList }}</div>
</template>

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

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

相关文章

【leetcode】 字符串相乘(大数相乘、相加)

记录一下大数相乘相加方法&#xff1a; 给定两个以字符串形式表示的非负整数 num1 和 num2&#xff0c;返回 num1 和 num2 的乘积&#xff0c;它们的乘积也表示为字符串形式。 注意&#xff1a;不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: nu…

vue3前端开发-执行npm run dev提示报错怎么解决

vue3前端开发-执行npm run dev提示报错怎么解决&#xff01;今天在本地安装初始化了一个vue3的案例demo。但是当我执行npm run dev想启动它时报错了说&#xff0c;找不到dev。让我检查package.json文件是否包含dev。如下图所示&#xff1a; 实际上&#xff0c;不必惊慌&#xf…

iOS ------ tagged Pointer 内存对齐

一&#xff0c;tagged Pointer 为了节省内存和提高执行效率&#xff0c;苹果在64bit程序中引入了Tagged Pointer计数&#xff0c;用于优化NSNumber, NSDate, NSString等小对象的存储。一个指针或地址区域&#xff0c;除了放对象地址之外&#xff0c;也可以放其他额外的信息&am…

240717.LeetCode——2974.最小数字游戏

题目描述 你有一个下标从 0 开始、长度为 偶数 的整数数组 nums &#xff0c;同时还有一个空数组 arr 。Alice 和 Bob 决定玩一个游戏&#xff0c;游戏中每一轮 Alice 和 Bob 都会各自执行一次操作。游戏规则如下&#xff1a; 每一轮&#xff0c;Alice 先从 nums 中移除一个 …

转移C盘中的conda环境(包括.condarc文件修改,environment.txt文件修改,conda报错)

conda环境一般是默认安装到C盘的&#xff0c;若建立多个虚拟环境&#xff0c;时间长了&#xff0c;容易让本不富裕的C盘更加雪上加霜&#xff0c;下面给出将conda环境从C盘转移到D盘的方法。 目录 电脑软硬件转移方法查看当前conda目录转移操作第一步&#xff1a;.condarc文件修…

Apache Flink 入门

零、概述 Apache Flink 是一个高性能的开源分布式流处理框架&#xff0c;专注于实时数据流的处理。 它设计用于处理无界和有界数据流&#xff0c;在内存级速度下提供高效的有状态计算。 Flink 凭借其独特的Checkpoint机制和Exactly-Once语义&#xff0c;确保数据处理的准确性…

vue中:class、watch、v-show使用

1、:class 指令 在 Vue.js 中&#xff0c;:class 指令&#xff08;或 v-bind:class&#xff09;允许你动态地绑定 CSS 类到一个元素。这个指令有两种主要的使用方式&#xff1a;绑定一个对象或者绑定一个数组。 1.1、:class{} 对象语法 对象语法允许你基于条件来添加或移除类…

如何在网页中对视频进行截图

在网页开发中&#xff0c;我们经常需要对视频进行截图&#xff0c;以便在文章或博客中展示视频的某个瞬间。HTML5 提供了强大的 <video> 标签&#xff0c;使得在网页中嵌入视频变得简单。但是&#xff0c;如何对这些视频进行截图呢&#xff1f;本文将介绍一种简单的方法&…

只用 CSS 能玩出什么花样?

在前端开发领域&#xff0c;CSS 不仅仅是一种样式语言&#xff0c;它更像是一位多才多艺的艺术家&#xff0c;能够创造出令人惊叹的视觉效果。本文将带你探索 CSS 的无限可能&#xff0c;从基本形状到动态动画&#xff0c;从几何艺术到仿生设计&#xff0c;只用 CSS 就能玩出令…

Vscode中Github copilot插件无法使用(出现感叹号)解决方案

1、击扩展或ctrl shift x ​​​​​​​ 2、搜索查询或翻找到Github compilot 3、点击插件并再左侧点击登录github 点击Sign up for a ... 4、跳转至github登录页&#xff0c;输入令牌完成登陆后返回VScode 5、插件可以正常使用

社会科学战线

《社会科学战线》&#xff08;以下简称《战线》&#xff09;是吉林省社会科学院主办的大型综合性人文社会科学类期刊&#xff0c;创刊于1978年5月&#xff0c;月刊&#xff0c;每期约50万字。内容涵盖哲学、历史学、文学、经济学、政治学、法学、社会学、教育学等人文社会科学学…

微服务实战系列之玩转Docker(三)

前言 镜像&#xff08;Image&#xff09;作为Docker的“水源”&#xff0c;取之于它&#xff0c;用之于它。这对于立志成为运维管理的撒手锏——Docker而言&#xff0c;重要性不言而喻。 我们在虚拟机时代&#xff08;当然现在依然ing…&#xff09;&#xff0c;如何快速完成…

成为CMake砖家(5): VSCode CMake Tools 插件基本使用

大家好&#xff0c;我是白鱼。 之前提到过&#xff0c;白鱼的主力 编辑器/IDE 是 VSCode&#xff0c; 也提到过使用 CMake Language Support 搭配 dotnet 执行 CMakeLists.txt 语法高亮。 对于阅读 CMakeLists.txt 脚本&#xff0c; 这足够了。 而在 C/C 开发过程中&#xff…

NXP i.MX8系列平台开发讲解 - 3.19 Linux TTY子系统(二)

专栏文章目录传送门&#xff1a;返回专栏目录 Hi, 我是你们的老朋友&#xff0c;主要专注于嵌入式软件开发&#xff0c;有兴趣不要忘记点击关注【码思途远】 目录 1. Linux 串口驱动 1.1 Uart 驱动注册流程 1.2 uart 操作函数 1.3 line discipline 2. Linux tty应用层使用…

FPGA 实现DDR4的读写

1 硬件设计 FPGA 端&#xff1a; DDR4: 2 验证方案 3 仿真验证 4 DDR4 下板验证

《昇思25天学习打卡营第25天|第10天》

今天是打卡的第十天&#xff0c;今天开始学应用实践中的LLM原理和实践&#xff0c;今天学的是基于MindSpore实现BERT对话情绪识别。最先了解的是BERT模型的简介&#xff08;来自变换器的双向编码器表征量&#xff08;Bidirectional Encoder Representations from Transformers&…

递归锁与普通锁的区别

什么是锁&#xff1f; 在多线程编程中&#xff0c;锁是一种机制&#xff0c;用来确保某些代码块在同一时间只能被一个线程执行。想象一下&#xff0c;你和你的朋友们都想同时进入一个只有一把椅子的房间。为了避免混乱&#xff0c;你们需要一个锁来控制进入的顺序。 普通锁&a…

PHP 包含

PHP 包含 PHP 是一种广泛使用的开源服务器端脚本语言,它在 web 开发中扮演着重要的角色。PHP 的一个核心特性是其能够包含其他文件,这允许开发者将代码分割成可重用的模块,从而提高代码的可维护性和组织性。本文将深入探讨 PHP 中的文件包含机制,包括其工作原理、使用场景…

Java —— 内部类

Java内部类 1.什么是内部类&#xff1f; 将一个类A定义在另一个类B里面&#xff0c;里面的类A就称为内部类&#xff08;InnerClass&#xff09;&#xff0c;类B则称为外部类&#xff08;OuterClass&#xff09;。 2.为什么需要内部类&#xff1f; 具体来说&#xff0c;当一…

大数据量批处理场景处理

大数据量多线程批处理工具&#xff1a;MultiThreadMamager: 基于线程池实现的动态管理工具 基于ExecutorServiceTaskAbstract抽象实现内部方法&#xff1a;material()获取数据、processing()取数结果处理。 由管理工具去调用线程池执行任务和任务自动迭代处理 - Gitee.com 主要…