Vue3学习第二天记录

2024-06-08 08:20

本文主要是介绍Vue3学习第二天记录,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Vue3学习第二天记录

  • 背景
  • 说明
  • 截图记录
    • 一个简单的JS文件
    • Vue3的watch()函数
    • Vue3的toRef()/toRefs()函数
    • 前端数据类型的分类
    • 前端写一个对外暴露的函数
    • 前端的...语法
    • Vue3中watch()函数的总结
    • Vue3中watchEffect()函数
    • Vue3中watch()函数的坑
    • Vue3中computed()函数

背景

最近在学习尚硅谷的Vue2的入门课程, 后面也在Vue2的基础上介绍了一下Vue3, 这里简单做一个记录.

说明

个人学习笔记, 算是自己的一个简单的交付件, 可能对别人用处不大.

截图记录

一下是学习记录中的一些截图记录. 可能是当时有有点灵感. 后续也需要多多复习一下.

一个简单的JS文件

感觉就像一个非常简单的方法, 调用方只需要 userPoint() 就可以了, 非常简单. 但是实际项目中应该不会这样吧!
在这里插入图片描述

Vue3的watch()函数

有很多种场景, 具体用到的时候不妨再去查阅资料, 问问GPT
在这里插入图片描述

Vue3的toRef()/toRefs()函数

这里不能直接用ref(), 使用ref()其实是直接返回一个 RefImpl 的对象, 与上面的数据就是隔离开来的了.
在这里插入图片描述

前端数据类型的分类

总感觉前端的分类是: 基本数据类型, 普通对象, 数组.
但是在Java中就只有两类: 8大基本数据类型和引用数据类型
在这里插入图片描述

前端写一个对外暴露的函数

这个可以简写, 直接 export default function() {…}
使用默认暴露, 像是一个匿名函数.
在这里插入图片描述

前端的…语法

也是前端的基本功, 感觉是在解构一个对象. 把对象里面的属性都解构出来.
在这里插入图片描述

Vue3中watch()函数的总结

主要就监控属性, 笔记中老师列举了尽量多的场景, 这里留一个印象, 需要使用的时候再去深究.
在这里插入图片描述

Vue3中watchEffect()函数

这个函数就是, 你用到哪个属性我就去监视哪个属性.
直译过来感觉是: 起作用/生效的时候去监视.
在这里插入图片描述

Vue3中watch()函数的坑

老师讲解的版本中, watch()函数这个场景下不能正确获取oldValue
在这里插入图片描述

Vue3中computed()函数

和Vue2中computed配置功能是一样的.
在这里插入图片描述

这篇关于Vue3学习第二天记录的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1041651

相关文章

Python UV安装、升级、卸载详细步骤记录

《PythonUV安装、升级、卸载详细步骤记录》:本文主要介绍PythonUV安装、升级、卸载的详细步骤,uv是Astral推出的下一代Python包与项目管理器,主打单一可执行文件、极致性能... 目录安装检查升级设置自动补全卸载UV 命令总结 官方文档详见:https://docs.astral.sh/

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

统一返回JsonResult踩坑的记录

《统一返回JsonResult踩坑的记录》:本文主要介绍统一返回JsonResult踩坑的记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录统一返回jsonResult踩坑定义了一个统一返回类在使用时,JsonResult没有get/set方法时响应总结统一返回

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,:本文主要介绍Go学习记录之runtime包的... 目录前言:一、runtime包内容学习1、作用:① Goroutine和并发控制:② 垃圾回收:③ 栈和

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

java对接海康摄像头的完整步骤记录

《java对接海康摄像头的完整步骤记录》在Java中调用海康威视摄像头通常需要使用海康威视提供的SDK,下面这篇文章主要给大家介绍了关于java对接海康摄像头的完整步骤,文中通过代码介绍的非常详细,需... 目录一、开发环境准备二、实现Java调用设备接口(一)加载动态链接库(二)结构体、接口重定义1.类型

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv