持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
part 1 算法题
1，【84】 柱状图中最大的矩形 力扣链接地址
// 使用单调栈的方式
var largestRectangleArea = function (heights) {
// 声明栈空间
let stack = [0],res = 0;
// 给数组前后各加一个0，方便计算第一个元素以及最后一个元素的的最大矩形面积
heights.unshift(0)
heights.push(0)
// 循环遍历
for(let i = 1; i < heights.length;i++){
if(heights[i] > heights[stack[stack.length - 1]]){
stack.push(i)
}else if(heights[i] == heights[stack[stack.length - 1]]){
stack.pop()
stack.push(i)
}else{
while(heights[i] < heights[stack[stack.length - 1]]){
let mid = stack.pop();
let left = stack[stack.length - 1];
let right = i;
let w = right - left - 1;
let h = heights[mid];
res = Math.max(res, w * h)
}
stack.push(i)
}
}
console.log(res);
return res
};
largestRectangleArea([2,1,5,6,2,3])
2，【1365】 有多少小于当前数字的数字 力扣链接地址
var smallerNumbersThanCurrent = function (nums) {
// 对数组进行深拷贝
let newArr = nums.slice(0), res = []
// 对数组进行排序
newArr.sort((a,b)=> a-b)
// 根据排序后的数组进构造map
let map = new Map()
// 倒叙添加，是为了保存重复元素的第一个
for(let i = nums.length - 1; i>=0; i--){
map.set(newArr[i],i)
}
// 根据构造好的map去输出数组元素对应的个数
for(let i = 0; i < nums.length;i++){
res.push(map.get(nums[i]))
}
return res
};
smallerNumbersThanCurrent([8,1,2,2,3])
</script>
part2 ：vue3 学习记录
1，computed
使用和vue2配置是相同的，在vue3中可以使用vue2中相同的方式使用。
vue3也有一个新的方式：
但是需要注意的地方，
- 这里的computed是要import引入的
import {reactive,computed} from 'vue'
- 并且在vue3中使用computed是以一个函数的形式来进行调用的。
具体样例：
<template>
<div>
<p>姓名是:
<input type="text" v-model="person.name">
</p>
<p>年纪是：
<input type="text" v-model="person.age">
</p>
基本信息：<input type="text" name="" id="" v-model ='person.personInfo'>
</div>
</template>
<script>
import {reactive,computed} from 'vue'
export default {
name: 'demo',
setup(){
let person =reactive({
name: '张三',
age: 18
})
// vue3使用computed和vue2不同
// 1，第一种写法：简写，没有考虑计算属性被修改的情况
person.personInfo = computed(()=>{
return person.name + '-' + person.age
})
// 2，第二种写法，完整写法（考虑计算属性的读和写）
person.personInfo = computed({
get(){
return person.name + '-' + person.age
},
set(val){
const infoArr = val.split('-')
person.name = infoArr[0]
person.age = infoArr[1]
}
})
return {
person
}
}
}
</script>
2，监视属性watch
- 与Vue2.x中
watch配置功能一致
两个小“坑”：
-
- 监视
reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。 - 监视
reactive定义的响应式数据中某个属性时：deep配置有效。
- 监视
<template>
<div>
<h2>当前求和为：{{sum}}</h2>
<button @click="sum++">点我加1</button>
<h2>当前信息为: {{msg}}</h2>
<button @click="msg+='!'">修改信息</button>
<h2>名字为: {{person.name}}</h2>
<h2>年龄为: {{person.age}}</h2>
<button @click="person.name = '李四'">修改姓名</button>
<button @click="person.age = '48'">修改年纪</button>
<h2>薪资为: {{person.job.j1.salary}}</h2>
<button @click="person.job.j1.salary++">修改薪资</button>
</div>
</template>
<script>
import {reactive,watch} from 'vue'
export default {
name: 'demo',
// vue2中的写法
watch:{
// 1,简写的方式
sum(newVal,oldVal){
console.log('sum的值发生了变化',newVal)
},
// 2，完整写法，可以深度监视
sum:{
deep: true,
handler(newVal,oldVal){
console.log('sum的值发生了变化',newVal)
}
}
},
setup(){
let sum = ref(0)
let msg = ref('你好啊')
let person =reactive({
name:'张山',
age : 18,
job:{
j1:{
salary:20
}
}
})
// 监视
// 1,监视ref所定义的一个响应式数据，sum是被定义的
// watch(sum,(newVal,oldVal)=>{
// console.log('sum的值发生了变化',newVal)
// })
// 2，监视ref定义的多个响应式数据，sum ，msg
watch([sum,msg],(newVal,oldVal)=>{ //这里的newVal和oldVale也是一个对应数据的数组，
console.log('sum的值发生了变化',newVal)
})
// 3，加上其他属性，比如immediate,watch的配置项可以有第三个参数，说明vue3中的deep是有些问题的
watch(sum,(newVal,oldVal)=>{
console.log('sum的值发生了变化',newVal)
},{immediate:true,depp:true})
// 4，监视reactive所定义的一个响应式数据
// bug1:此处无法正确的获取正确的oldVal,这个bug无法解决
// bug2:当没有开启deep的时候，watch是可以深度监视的，但是用deep:false无效
watch(person,(newVal,oldVal)=>{
console.log('person的值发生了变化',newVal,oldVal)
})
// 5，监视reactive所定义的一个响应式数据中的某一个属性，但是必须要使用数函数进行包裹
watch(()=>person.age,(newVal,oldVal)=>{
console.log('person的年龄发生了变化',newVal,oldVal)
})
// 6,监视reactive所定义的一个响应式数据中的某些属性，但是必须要使用数组进行包裹
watch([()=>person.age,()=>person.name],(newVal,oldVal)=>{
console.log('person的年龄发生了变化',newVal,oldVal)
})
// 7,特殊情况，监视reactive所定义的一个响应式数据中的某些属性,这个属性是一个对象的形式，就需要手动开启深度监视，deep配置是有效的
// bug1：拿不到旧的value
watch(()=>person.job,(newVal,oldVal)=>{
console.log('person的工作发生了变化',newVal,oldVal)
},{deep:true})
// 返回一个对象
return {
sum,
msg,
person
}
}
}
</script>
