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;
}
相关推荐
酷酷的阿云9 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058711 分钟前
web端手机录音
前端
齐 飞17 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
lulu_gh_yu31 分钟前
数据结构之排序补充
c语言·开发语言·数据结构·c++·学习·算法·排序算法
神仙别闹34 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
丫头,冲鸭!!!1 小时前
B树(B-Tree)和B+树(B+ Tree)
笔记·算法
Re.不晚1 小时前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
听忆.1 小时前
手机屏幕上进行OCR识别方案
笔记
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js