【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的形式使用生命周期钩子:
在这里插入图片描述

总结:

在这里插入图片描述

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

在这里插入图片描述

相关推荐

  1. 第41: Vue3 watch函数

    2024-01-30 12:34:03       42 阅读
  2. Vue3.0-watch&&watchEffect函数

    2024-01-30 12:34:03       34 阅读
  3. Vue3学习——computed、watchwatchEffect

    2024-01-30 12:34:03       22 阅读
  4. vue3watchwatchEffect

    2024-01-30 12:34:03       33 阅读
  5. vue3watchEffectwatch其他参数

    2024-01-30 12:34:03       39 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-30 12:34:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-30 12:34:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-30 12:34:03       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-30 12:34:03       20 阅读

热门阅读

  1. 【C++】构造函数

    2024-01-30 12:34:03       37 阅读
  2. 如何系统地自学 Python?

    2024-01-30 12:34:03       46 阅读
  3. 【Vue3】状态管理工具——pinia的使用

    2024-01-30 12:34:03       43 阅读
  4. 四:C语言-条件分支语句

    2024-01-30 12:34:03       42 阅读
  5. 【前端】防抖和节流

    2024-01-30 12:34:03       43 阅读
  6. nginx项目部署+项目优化

    2024-01-30 12:34:03       40 阅读
  7. L1-032 Left-pad

    2024-01-30 12:34:03       42 阅读
  8. 美易官方《盘前:道指期货跌0.04% 风险周降临》

    2024-01-30 12:34:03       41 阅读
  9. 随机森林和决策树区别

    2024-01-30 12:34:03       40 阅读
  10. ID3算法 决策树学习 Python实现

    2024-01-30 12:34:03       40 阅读