目录
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;
}