web学习笔记（六十八）项目总结

目录

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

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

3.如何获取对象的长度 

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

5.样式穿透

---

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

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

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

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

只有响应式数据才需要打点调用value，此处我们定义的issukdiv不是响应式数据，可以直接调用。

// 访问第一项的值
const firstKey = data.value.productValue[issukdiv]

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

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

3.如何获取对象的长度 

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

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

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

5.样式穿透

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

::v-deep(.van-sidebar-item) {
  height: 1.3333rem;
  width: 2.2933rem;
  color: #333;
  font-size: 0.3467rem;
}