复习vue3,简简单单记录

news/2024/7/5 1:44:30

这里的知识是结合视频以及其他文章一起学习,仅用于个人复习记录

ref 和reactive

ref 用于基本类型
reactive 用于引用类型

如果使用ref 传递对象,修改值时候需要写为obj.value.attr 方式修改属性值
如果使用reactive 处理对象,直接obj.attr 即可 达到响应式效果

watch

watch 监听多个基本值,返回的newValue 和 oldValue是一个数组
watch 监听reactive 对象 无法正确获取oldValue(如果不需要考虑oldValue,那么这个问题影响不大)

watch 第一个参数只能是ref reactive返回值,如果想监听对象里边某个属性,则需要通过函数返回,如果该属性指向的是一个引用类型,则需要开启深度监听才能监听到变化

如果watch 监听ref(对象),如果监听对象 深层的变化,则需要传递deep(此时监听的是ref 对象,对于value指向的对象的属性变化变化需要开启deep)
如果watch 监听ref(对象),如果监听对象.value 深层的变化,则不需要传递deep此时监听的是.value 也就是 reactive 对象不需要开启deep)

// 下面两个都满足第一个参数是ref 或者reactive对象,一个监听的是ref对象一个是reactive对象
// 需要开启deep 才能监听到age变化 
watch(obj, (newValue, oldValue) => {
  console.log(newValue, oldValue);
}, { deep: true })
// 
watch(obj.value, (newValue, oldValue) => {
  console.log(newValue, oldValue);
})

watchEffect

watch 既要指明监听的属性也要指明监听的回调,而watchEffect不用指明监听哪个属性,我感觉watchEffect更好用
回调里边,用到哪个值就监听哪个值,如果被监听的值发生变化时候,回调就会触发,比如监听查询关键字变化来决定触发查询操作

watchEffect(() => {
  if (keywords.value != '') {
    console.log('开始搜索', keywords.value);
  }
})

onActivated 和 onDeactivated(还没使用过)

补充生命周期函数activated和deactivated
这两个是路由组件所独有的两个钩子,用于捕获路由组件的激活状态,因为跳进另一个路由组件的时候,前一个路由组件会被销毁,但是加了缓存的路由,则不会被触发销毁流程;使用这两个替代销毁时的生命周期函数;

onActivated:表示路由组件被激活时触发;

onDeactivated:表示路由组件失活时触发;

这个在编写uniapp 时候有个类似的东西,比如push 到其他页面时候,前面一个页面并不会被销毁,而是只是触发了隐藏,我觉得这两个周期函数类似uniapp 当中的onShow 和 onHide 周期


http://lihuaxi.xjx100.cn/news/1459204.html

相关文章

用pytorch实现google net

GoogleNet(也称为Inception v1)是由Google在2014年提出的一个深度卷积神经网络架构。它在ImageNet Large Scale Visual Recognition Challenge (ILSVRC) 2014比赛中取得了优秀的成绩,并引起了广泛的关注。 GoogleNet的设计目标是构建一个更…

学校信息管理系统说明文档

目录 0学生信息管理系统体验教程. 4 0.0Student management异地打开方法:. 4 1. 管理系统设计需求分析. 6 1.1 需求介绍. 6 1.2功能需求. 6 1.2.1 学生信息录入. 6 1.2.2 学生信息查询. 6 1.2.3 权限管理. 6 1.2.4 添加学生信息验证. 6 2.功能介绍. 7 2.1…

百度又开源一款压测工具,可模拟几十亿的并发场景,太强悍了

dperf 是百度开源的一款基于 DPDK 的 100Gbps 网络性能和负载测试软件,能够每秒建立千万级的 HTTP 连接、亿级别的并发请求和数百 Gbps 的吞吐量。 优点 性能强大: 基于 DPDK,使用一台普通 x86 服务器就可以产生巨大的流量:千万…

由于找不到d3dx9_43.dll无法继续执行代码怎么解决

我们在安装PS,吃鸡等软件跟游戏的时候,有可能安装完之后出现以下问题(特别是win7或者win8系统) 错误: 打开PS或者吃鸡等游戏的时候出现这个错误:无法启动此程序,因为计算机中丢失d3dx9_43.dll。…

05-微信小程序常用组件-表单组件

05-微信小程序常用组件-表单组件 文章目录 表单组件button 按钮案例代码 form 表单案例代码 image 图片支持长按识别的码案例代码 微信小程序包含了六大组件: 视图容器、 基础内容、 导航、 表单、 互动和 导航。这些组件可以通过WXML和WXSS进行布局和样式设…

MOM or MES:如何选择适合工厂的制造管理系统?

在现代制造业中,有效的制造管理系统对于工厂的生产效率和竞争力至关重要。这衍生出来了两个常见的解决方案:MOM(Manufacturing Operations Management)制造管理系统和MES(Manufacturing Execution System)制…

程序的DAC检查与LSM简介

程序的DAC检查 在Linux中,程序的DAC(Discretionary Access Control,自主访问控制)检查是指操作系统对程序执行期间对文件和资源的访问权限进行的检查。 Linux使用一种基于权限的访问控制模型,其中每个文件和资源都与…

Spring系列篇 -- Bean的生命周期

目录 经典面试题目: 一,Bean的生命周期图 二,关于Bean的生命周期流程介绍: 三,Bean的单例与多例模式 总结: 前言:今天小编给大家带来的是关于Spring系列篇中的Bean的生命周期讲解。在了解B…