持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
part1 算法
1，【941】 有效的山脉数组 力扣链接
var validMountainArray = function (arr) {
let left = 0, right = arr.length - 1
while (arr[left + 1] > arr[left] && left < arr.length) {
left++
}
while (arr[right] < arr[right - 1] && right >= 0) {
right--
}
// console.log(left == right && left !==0 && right !== arr.length-1 ? true : false)
return left == right && left !== 0 && right !== arr.length - 1 ? true : false
\
};
validMountainArray([0, 3, 2, 1])
</script>
2，【1202】 独一无二的出现次数 哈希法力扣链接
var validMountainArray = function (arr) {
let left = 0, right = arr.length - 1
while (arr[left + 1] > arr[left] && left < arr.length) {
left++
}
while (arr[right] < arr[right - 1] && right >= 0) {
right--
}
// console.log(left == right && left !==0 && right !== arr.length-1 ? true : false)
return left == right && left !== 0 && right !== arr.length - 1 ? true : false
\
};
validMountainArray([0, 3, 2, 1])
part2 知识点
1，vue 中的 scoped
scoped作用
在vue文件中的style标签上加上scoped属性，则style标签下的样式只能在本组件中使用。 如果每一个vue组件的style标签都加上了scoped，那就实现了样式的模块化。
scoped原理
代码样例展示：
<template>
<div class='demo'>scoped展示</div>
</template>
<style scoped>
.demo{
color:'red'
}
</style>
转译之后
<template>
<div class='demo' data-v-xxxx>scoped展示</div>
</template>
<style scoped>
.demo[data-v-xxxx]{
color:'red'
}
</style>
vue中的scoped属性的实现主要是通过postcss实现。
主要的变化是：
- 1，给html的dom节点添加一个不会重复的data属性，就是代码中的data-v-xxxx，来唯一的标识这个元素
- 2，在每句的css选择器的末尾，加上一个当前组件的data属性选择器来私有化样式
scoped穿透
在vue中我们需要引入第三方库时，可能在组件中，需要去修改第三方组件的样式，并且不想影响scoped中其他样式。
这是就可以使用特殊的方式进行穿透
sass和less的样式穿透，使用/deep/
外层样式 /deep/ 第三方组件样式 {
样式内容
}
.demo /deep/ .swiper{
color : red;
}
拓展流程
本质时：基于html和css属性选择器，即分别时给html标签和css选择器添加 data-v-xxx; 具体来说，是通过vue-loader 实现的，过程分为三步：
-
首先vue-loader会解析vue组件，提取数template,script,style对应的代码块。
-
然后构造组件实例，在组件实例的选项上面绑定scopedId
-
最后对style的css代码进行编译转化，应用scopedId生成选择器的属性
补充：vue-loader处理策略。
part3 vue3知识点
watchEffect属性
watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed：
- 但
computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。 - 而
watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
// 不需要指定监视对象,当监视方法中用到哪一个变量的时候,就会监视那一个变量
watchEffect(()=>{
const x1 = sum.value
const x2 = person.job.j1.salary
console.log('watchEffect所执行的回调执行了')
})
