web学习笔记(六十八)项目总结

目录

1.如何取到对象的第一项的键名

2.如何在键名不确定的情况下取到对象的第一项的值

3.如何获取对象的长度

4.计算属性和watch监听监听深层数据

5.样式穿透


1.如何取到对象的第一项的键名

可以通过Object.keys将对象转化为一个包含对象所有可枚举属性名的数组,转换后就可以通过索引来取到对应的键名。

javascript 复制代码
// 访问第一项的键
const issukdiv = ref(Object.keys(data.value.productValue)[0])

2.如何在键名不确定的情况下取到对象的第一项的值

javascript 复制代码
// 访问第一项的值
const firstKey = data.value.productValue[issukdiv.value]

我们平常调用对象的某一项时都是直接打点取值,但是当键名不确定,是个变量时,我们就可以通过中括号来取值 ,两者有些许的区别:

  • 中括号运算符总是可以替代点运算符,但点运算符不一定能全部替代中括号运算符(键名不确定时)
  • 中括号运算符可以用字符串变量的内容作为属性名,而点运算符却不可以。
  • 中括号运算符可以用纯数字为属性名,点运算符不能。
  • 中括号运算符可以用js的关键字和保留字作为属性名,点运算符不可以。

3.如何获取对象的长度

因为对象没有.length属性,但是我们可以通过object.keys获得一个包含对象所有键名的数组,然后通过object.keys(obj).length来获取键名数组的长度,这个长度就是对象的长度。

4.计算属性和watch监听监听深层数据

watch对于引用类型,在vue3中默认只能监听第一层的变化,深层数据的变化监听不了但是可以通过设置deep:true来开启深度监听。在 Vue 2 中,watch 默认情况下是不会深度监听对象的变化的。它与 Vue 3 不同,Vue 2 的响应式系统是通过 Object.defineProperty 来实现的,这种方式只能拦截对象的属性访问和修改,而不能深度追踪对象内部属性的变化。但是当深层数据被改变时,计算属性仍然可以重新计算,无需关心数据的层次问题。

5.样式穿透

通常我们在编写代码会设置样式为scoped模式,使得该组件的样式只在本页面生效。但是在使用一些第三方组件的时候,通过内部类名设置样式可能会不生效,因此使用样式穿透,让内部类名突破scoped的限制,从而生效。eg:

css 复制代码
::v-deep(.van-sidebar-item) {
  height: 1.3333rem;
  width: 2.2933rem;
  color: #333;
  font-size: 0.3467rem;
}
相关推荐
雯0609~7 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ10 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z16 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴19 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
CV学术叫叫兽22 分钟前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年33 分钟前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
前端百草阁39 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜39 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40440 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish41 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue