当前位置: 首页 > news >正文

复习vue3,简简单单记录

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

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://www.lryc.cn/news/129124.html

相关文章:

  • 【自用】云服务器 docker 环境下 HomeAssistant 安装 HACS 教程
  • 使用dockerfile手动构建JDK11镜像运行容器并校验
  • 编程语言学习笔记-架构师和工程师的区别,PHP架构师之路
  • Streamlit 讲解专栏(十):数据可视化-图表绘制详解(上)
  • 其他行业跳槽转入计算机领域简单看法
  • Unity制作一个简单的登入注册页面
  • 常用游戏运营指标DAU、LTV及参考范围
  • 标准模板库STL——deque和list
  • 分类预测 | MATLAB实现WOA-CNN-BiGRU-Attention数据分类预测
  • C++ Primer Plus 第6版 读书笔记(10) 第十章 类与对象
  • 基于C++ 的OpenCV绘制多边形,多边形多条边用不用的颜色绘制
  • (六)、深度学习框架中的算子
  • Redis实现共享Session
  • 网络通信原理UDP协议(第五十课)
  • 43、TCP报文(一)
  • 【JavaScript】使用js实现滑块验证码功能与浏览器打印
  • 【使用群晖远程链接drive挂载电脑硬盘】
  • easyx图形库基础4:贪吃蛇
  • 哈夫曼树(赫夫曼树、最优树)详解
  • 智慧建筑工地平台,通过信息化技术、物联网、人工智能技术,实现对施工全过程的实时监控、数据分析、智能管理和优化调控
  • Springboot 实践(8)springboot集成Oauth2.0授权包,对接spring security接口
  • OpenCV-Python中的图像处理-GrabCut算法交互式前景提取
  • leetcode原题 后继者:找出二叉搜索树中指定节点的“下一个”节点
  • pyqt5 QlineEdit 如何设置只能输入数字
  • ubuntu中安装python
  • LeetCode150道面试经典题-- 快乐数(简单)
  • 科研论文配图----第一章笔记
  • OpenHarmony Meetup 广州站 OpenHarmony正当时—技术开源
  • 如何使用PHP Smarty模板实现静态页面生成
  • 【 Cocos Creator 项目实战】益智游戏《2048》(附带完整源码工程)