【vue3学习笔记】(P153节 - P155节)watch时value的问题;watchEffect函数;vue3生命周期

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

课程 P153节 - P155节 笔记:

P153 watch时value的问题

watch一个ref定义的基本类型响应式数据时,是不需要 .value 的。如果写了.value 会报出警告且无法实现监视功能:


watch监视一个ref定义的对象式响应数据时,需要 .value。如果不写 .value,此时监视的是一个RefImpl的实例对象,这个对象的任一属性改变时,才会监视到。即value值整个被替换掉时,value值对应的对象在内存中的地址发生变化时才会被监视到;如果只是修改该对象里面的属性值,则value对应的对象在内存中的地址并没有发生变化,所以vue不认为value变化了,故而监视不到;

解决方式一:

监视ref定义的对象式响应数据时,写上 .value,此时即表示监视的是refImpl对象的value属性了:

解决方式二:

配置{deep:true}属性,开启深度监视,此时refImpl对象的value属性中的属性值发生变化时,由于开启了深度监视也能监视得到:

P154 watchEffect函数

watchEffect()函数第一个参数不指定监视谁,而是直接写回调函数,回调函数中用到了哪些数据,那么当这些数据发生改变时,就会执行这个回调函数。

P155 vue3生命周期

通过下图对比可以看出一点明显的变化,即vue2中在vue实例挂载到el上之前,就执行了 beforeCreate 和 created 两个钩子,执行完这两个钩子才去判断有没有配置el,有则继续向下走,没有则停止了;vue3中变为了:必须先创建出app且必须将app挂载到el上之后,才开始执行 beforeCreate 和 created 两个钩子以及其后的流程。

vue3的这一点调整更加合理了。

通过配置项的形式使用生命周期钩子:

通过配置项的形式使用生命周期钩子**(注意beforeDestory和destoryed名称改为了beforeUnmount和unmounted)**:

使用组合式API的形式使用生命周期钩子:

总结:

如果选项式和组合式生命周期钩子一起使用,会发现组合式比选项式优先执行。但实际开发中不会这样混用。

相关推荐
前进的李工3 小时前
Agent 学习笔记 05:系统提示词应该怎么写
笔记·学习·prompt·agent·个人开发·few-shot·ai应用开发
FRing033 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷4 小时前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码
正在走向自律4 小时前
【3/5】人工智能训练师 三级/高级工 考证学习方向:从“独立执行”到“设计、归因与全链条负责”
人工智能·学习·人工智能训练师·注方案设计·数据质控负责人·模型评测与调优辅助·ai训练项目交付
蒸蒸yyyyzwd5 小时前
后端学习笔记三个知识
笔记·八股
CCIE-Yasuo6 小时前
网络安全-学习数据库-Mysql-2
数据库·学习·mysql
La Pulga7 小时前
【FreeRTOS源码学习笔记】任务切换
单片机·mcu·学习·嵌入式·freertos·实时操作系统
Zhao-Jichao7 小时前
AI Prompting for Everyone 课程笔记 - P19 数据分析 Data Analysis
人工智能·笔记·数据分析
li星野7 小时前
【学习记录】逻辑分析仪完全入门:从品牌方案到采样率、存储深度的核心概念解析
学习
旖旎夜光8 小时前
【C++ 基础入门】类和对象(上):封装、对象模型与 this 指针
开发语言·c++·笔记·学习