目录
1.如何取到对象的第一项的键名
可以通过Object.keys将对象转化为一个包含对象所有可枚举属性名的数组，转换后就可以通过索引来取到对应的键名。
// 访问第一项的键
const issukdiv = ref(Object.keys(data.value.productValue)[0])
2.如何在键名不确定的情况下取到对象的第一项的值
// 访问第一项的值
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:
::v-deep(.van-sidebar-item) {
height: 1.3333rem;
width: 2.2933rem;
color: #333;
font-size: 0.3467rem;
}