[VueDebug]对Debug的一些思考-Vue watch失效

写在前面

Debug是常有的一个工作,其实感觉自己是有点心得的。(变成懂哥!

基本逻辑是提出问题->解决问题,但在实际中其实应该分为提出问题->证明问题存在->尝试解决问题 。因为很多时候你提出的问题不是问题的关键而是旁支末节,当然一个问题可能是有多种原因导致的,但实际情况大多数问题都是只有一个原因导致的 ------因为你写代码是渐进式的,一点点增多的 。而大多数情况据我的亲身经历,对问题发生的原因判断失误导致的浪费时间是远远大于修改问题的时间的 ,所以应该存在一个证明问题存在的过程,这是证明问题存储环节必要性的阐述。在此之外,我应该如何提出问题在提出问题时我又该如何证明问题存在

  1. 我应该如何提出问题?

    如果你发现了一个报错 , 或者说看起来和问题有关联的报错 ,我觉得那是很值得庆幸的一件事,在我的经验里有合理的报错大概率上你可以省去证明问题存在这一步骤 ,紧紧的去处理报错反应的问题 就可以了。(但事实上我有时候会无视报错,自己去做一些推断,当然在一些情况下可以去做一些推断,做推断就要证明问题存在,而无视报错就要吃大亏。)

  2. 在提出问题时我又该如何证明问题存在?

    快速敏捷的做一个对照实验,是证明问题存在的最简单高效且结果明了的方法。

环境描述

"pinia": "^2.1.7",

"node.js":"v16.14.2"

问题分析

希望请求数据后将数据存入全局变量,然后组件通过pinia去调用。结果发现全局变量赋值后watch并不能奏效。

有可能是组件挂载watch时,数据已经结束变化的问题?

在组件的onMounted前加个console.log,输出一下发现是其初始值,说明其并不是因为生命周期的原因。网络上引用资料,发现

watch、 computed在生命周期的哪个节点触发? 首先 beforeCreate 和 created 之间 会将 computed 和 watch初始化(即初始化数据监测) 结论:在creted之前就会行初始化 computed 和 watch

而在beforeMount执行时 我们会发现 虚拟DOM已经生成 但未挂载到容器上 ;mounted时 虚拟DOM已经被解析且挂>在到容器中 (即HTML DOM加载完成的期间时发生在beforeMount ---mounted之间)。 而在验证中我们会发现computed执行的顺序正是在beforeMount ---mounted之间 结论 : computed是在HTML DOM加载后马上执行的 即在beforeMount结点之后触发。

有可能是响应式丢失的问题或者pinia的响应式问题?

响应性丢失 :在 Vue 中,如果直接从一个响应性对象中提取值赋给一个非响应性属性,那么这个值将失去其响应性。在您的代码中,您通过 ref(AppGlobal.dataStatistics.totalitySupervisory) 创建了一个响应性引用,但这个引用本身并不会随 AppGlobal.dataStatistics.totalitySupervisory 的变化而变化。

判断其是否为一响应式对象,可以通过import { isReactive } from 'vue';方式来进行检验, console.log(isReactive(AppGlobal.dataStatistics));输出后如果为真说明其为Reactive对象。经过一番检测发现其都是响应式对象,pinia没有问题。

AppGlobal.dataStatistics.totalitySupervisory 不是响应式的,而 AppGlobal.dataStatistics 是响应式的,这是因为 Vue 的响应性系统是基于对象的。当您检查一个对象是否是响应式的时,如果整个对象是响应式的,那么 isReactive 会返回 true。但是,当您检查对象的一个具体属性时,比如 totalitySupervisoryisReactive 通常会返回 false,因为单独的属性并不是一个独立的响应式对象。

那就可能是watch的问题,于是做了一个变量实验?

新建了一个变量来看看将其变量改变时是否会触发watch,不触发,那说明watch罢工了。 发现确实是这个b ,watch罢工了,因为

javascript 复制代码
watch(() => a, (newVal, oldVal) => {

没有进行工作,去网上找解决方法后,有人说监听ref的时候要用a.value会监听到。 确实是用a.value监听到了。 在加了deep后,a和a.value都可以监听到了。

突然发现自己以前用的时候也是监听value不是监听原组件。所以很明显他的问题不是watch的问题,watch是可以正常工作的。

可能是Pinia未加载的问题?

考虑这个原因是因为我刚发现,在我的控制台他是有一行这样的输出的。

我设置了一个循环,发现仍然不行。但我现在可以肯定的是,watch是正常的,而pinia绝对有问题。

后来经过经过一段思考.....

重装了pinia,用yarn安装的。

完美运行

🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡🤡

相关推荐
多多米100544 分钟前
初学Vue(2)
前端·javascript·vue.js
柏箱1 小时前
PHP基本语法总结
开发语言·前端·html·php
新缸中之脑1 小时前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz8561 小时前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
看到请催我学习1 小时前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript
blaizeer2 小时前
深入理解 CSS 浮动(Float):详尽指南
前端·css
编程老船长2 小时前
网页设计基础 第一讲:软件分类介绍、工具选择与课程概览
前端
编程老船长2 小时前
网页设计基础 第二讲:安装与配置 VSCode 开发工具,创建第一个 HTML 页面
前端
速盾cdn2 小时前
速盾:网页游戏部署高防服务器有什么优势?
服务器·前端·web安全
小白求学12 小时前
CSS浮动
前端·css·css3