企业网站前端模板,郑州做网站怎么样,企业网站多少钱一个,net快速建站2023 年一整年感觉我的进步都很小#xff0c;所以自 2024 年起#xff0c;我将专门开设专栏记录自己在工作期间踩过的所有坑#xff0c;一来是为了有个记录#xff0c;自己不会再踩#xff0c;而来也是为了跟大家做一个分享#xff0c;与大家进行讨论#xff0c;提升自己… 2023 年一整年感觉我的进步都很小所以自 2024 年起我将专门开设专栏记录自己在工作期间踩过的所有坑一来是为了有个记录自己不会再踩而来也是为了跟大家做一个分享与大家进行讨论提升自己的能力。 此为第一篇2024 年 02 月 04 日 问题一 问题背景输入框输入数据后关闭页签再次打开保留了上一次的数据。 问题描述在 js 文件中定义了一个对象以便对数据进行初始化引入到需要使用的 vue 文件中然后在 data 中定义一下。 下面是一个 demo 演示
// index.js
exports const obj {name: age: ,hobbies:
}
// 因为不确定后端会返回什么数据所以此时我们都用空字符串进行初始化。// 补充js 是弱类型语言即使定义为空字符串后期将其他类型的值赋值过去都是可以的但是这会导致数据类型不安全最好是避免这种写法。!-- index.vue --templatedivinput v-modelobj.name /input v-modelobj.age /input v-modelobj.hobbies //div
/templatescriptimport { obj } from ./model/index.jsexport default {name: index,data () {return {obj,}}}
/script分析过程 首先我们可以看到在 js 中定义了一个 obj 它是一个对象也就是“引用数据类型”的数据此时它在堆中开辟一部分空间存储这个对象然后提供一个地址值指向这个对象然后在栈中生成一个变量 obj 将这个地址值赋值给栈中的变量 obj 。 第二步我们看到是在 index.vue 文件中通过 import 将这个变量引入进来。 第三步又将引入的这个变量在 data 中定义了一下将他变成一个响应式数据。 到此我们的思路就已经很清晰了在 data 中存储的是一个地址值指向的永远是在 index.js 文件中定义的那个对象我们通过双向绑定输入框输入赋值等操作操作的永远是那一个 obj 对象而根据 js 的垃圾回收机制我们可以得出js 在内存中生成的全局变量只要不刷新浏览器那么他不会被销毁好的问题到这里就分析完成了。 结论是因为 引用数据类型存储的是地址值导致操作的始终是同一个变量。 解决思路 既然是因为引用数据类型指向的是同一个对象引起的那我们是不是可以在 data 中定义的时候深拷贝一下这个 obj 对象去解决呢答案是当然可以 !-- index.vue --templatedivinput v-modelobj.name /input v-modelobj.age /input v-modelobj.hobbies //div
/templatescriptimport { obj } from ./model/index.jsexport default {name: index,data () {return {obj: JSON.parse(JSON.stringify(obj)),}}}
/script这样我们就可以确保每一次组件创建的时候生成一份新的 obj 数据而在组件销毁的时候data 中的数据也会被销毁问题就迎刃而解了~~~
问题二 问题背景组长让解决控制台报错于是在控制台看到了很多个 Invalid prop: custom validator check failed for prop XXX 的报错。大致看一眼就是说XXX 变量没有通过校验。 问题描述在子组件的 props 写了一个参数 XXX 将他的 type 定义为了 String 下面紧接着又写了一个 validate 自定义校验然后在父组件中引用了子组件。 下面是一个 demo 演示
!-- subComponent.vue --scriptexport default {name: subComponent,props: {identifying: {type: String,validator: (val) {return [zhangsan].includes(val)}}}}
/script!-- parentComponent --templatesubComponent :identifyinglisi/subComponent
/templatescriptimport subComponent from ./subComponent.vueexport default {name: parentComponent,components: {subComponent}}
/script分析过程 首先在子组件的 props 中定义了一个参数父组件在使用子组件的时候需要将这个参数传递过来但是我们看到这个参数没有写 required: true 所以这个参数不是必传的。下面又写了一个 validator 就是说这个参数的校验是自己自定义的好家伙这么高级。 不难看出这个自定义校验函数的意思是只要你传递过来的 identifying 是 ‘zhangsan’ 那么就返回 true 否则返回 false 。 接下来我们看到父组件使用的时候传进去了一个 identifying 是 ‘lisi’ 并不是组件想要的 ‘zhangsan’ 那么那个自定义校验返回的就是 false 校验不通过。 再回过头看一下我们的报错信息‘Invalid prop: custom validator check failed for prop “identifying”’ 翻译一下的结果是无效道具道具“正在识别”的自定义验证程序检查失败。但是这只是一个警告并不会阻塞页面渲染。 到此问题的思路就已经很清晰了自定义校验没有通过也就是说我们只要传了 identifying 参数就一定会对它进行校验判断它是否是 ‘zhangsan’ 这样是很不合理的因为这个组件的背景是一个公共组件此处有两种场景需要 ‘zhangsan’ 和 ‘lisi’ 都成立。 解决思路 在这里我提供两种方案进行解决 在不改变 validator 自定义校验的情况下让组件兼容 ‘lisi’ 的情况只需要在自定义校验方法体内的数组中加入 ‘lisi’。 !-- subComponent.vue --scriptexport default {name: subComponent,props: {identifying: {type: String,validator: (val) {return [zhangsan, lisi].includes(val)}}}}
/script使用 props 的枚举【enum】。 !-- subComponent.vue --scriptexport default {name: subComponent,props: {identifying: {type: String,enum: [zhangsan, lisi]}}}
/script这里我们就需要考虑一个问题如果改为采用 enum 的话需不需要让这个参数改成必填那我们就要去看两个条件1. 在使用 validator 自定义校验的时候是不是必填。2. 自己公司的业务场景需要我们做什么。但是在我们公司这里的业务场景是必填的它只有两个场景而且必须符合某一个场景所以在这里我就不考虑第一种条件直接改为必填了。
声明
作者只记录自己在公司踩过的坑以及提供自己的解决思路如果有误请联系作者进行修改不接受以任何形式的诋毁谩骂。如果有更好的方案也可以联系作者进行讨论互相学习。
如需转载请注明文章来源。
