2024年Web前端最全计算属性 + Vue2 、Vue3 wacth + 过滤器(2)，Web前端开发面试技能介绍

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// this.sumPrice = 1234;

// 动态变量值

this.sumPrice = this.num;

},

},

};

计算属性完

• ----------------------------------------------------------------------------------------------------------------------

过滤器开始

---

注意：过滤器 filter 过滤器在vue3中被移除了 功能需要使用计算属性代替

全局过滤器

---

全局过滤商品价格：

在main.js中写 所有价格保留小数两位  在需要的地方写 {{ 需要过滤的数据 |  全局过滤器名字}}

Vue.filter(‘formatePrice’, (val) => {

   //console.log(val) // 过滤的数据

return val.toFixed(2)

})

在页面使用：  // formatePrice 是main.js定义的过滤器名

{{item.price |　formatePrice}}

效果：所有价格保留小数两位

全局过滤时间：

Vue.filter(‘formatePrice’, (val) => {

//console.log(val) // 过滤的数据

// return val.toFixed(2)

const dt = new Date(val)

const y = dt.getFullYear()

const m = (dt.getMonth() + 1 + '').padStart(2, '0')

const d = (dt.getDate() + '').padStart(2, '0')

const hh = (dt.getHours() + '').padStart(2, '0')

const mm = (dt.getMinutes() + '').padStart(2, '0')

const ss = (dt.getSeconds() + '').padStart(2, '0')

    // yyyy-mm-dd hh:mm:ss

return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

})

使用： {{要过滤的数据 | 过滤器名字}}

格式：

局部过滤器

=====

• 局部过滤器 过滤器可以串联使用 I 下一个过滤器名 | 下一个过滤器名

• //局部过滤器格式: {{要过滤的数据| 过滤器名字}}

  订单日期:{{item.time | formateTime}}

  //函数格式:花括号里写函数 过滤的数据作为实参

  订单日期:{{changeTime(item.time)}}

  效果: 2021/11/13

   

  Vue2 watch监听

  ============

  • Vue2 简写wacth

  watch: {

  sum (newValue, oldValue) {

  console.log(“sum的数值的变换新值、老值”, newValue, oldValue);

  }

  },

  • 完整写法

  watch: {

  obj: {

  handler (newvalue, oldvalue) {

  console.log(newvalue, oldvalue)

  },

  immediate: true, //立即监听

  deep: true // 深度监听

  }

  },

  • 监听路由：

  wacth:{

  “$router.path”:(new,old)=>{

  console.log(new,old)

  }

  }

  vue3 watch的使用

  ---

  总结：vue3 wacth后是一个小括号，在小括号中操作，如果要监听ref单个的值，监听的值逗号箭头函数，箭头函数里面有两个形参，new，old，可以在对象中直接打印，

  监听多个值，可以在监听值的地方使用数组，多个值以逗号分隔

  监听ractive复杂对象类型 ：wacth小括号，监听的对象逗号箭头函数，箭头函数中有两个值，new，old，在箭头函数对象中可以直接打印，如果要开启深度监听，在箭头函数后面加逗号，逗号后面是对象，对象中开启deep：true

  如果要监听对象某一个值，例如person，在wacth小括号里以箭头函数形式监听对象某一个值 例如  watch(() =>person.name, (newVal, oldVal)=> {

  console.log(newVal, oldVal)

  })

  如果监听person对象里的多个值：wacth小括号中以数组形式书写，在数组中用箭头函数 例如：watch([() =>person.name, ()=> person.age], (newVal, oldVal)=> {

  console.log(newVal, oldVal)

  })

  监听ref数组简单类型

  //监听ref单一值的变化

  watch(监听的值, (newvAL, oLdVal) => {

  console.log(newvAL, oLdVal)

  })

  // 监听ref多个值的变化 数组形式

  watch([msg, sum], (newVal, oldVal) => {

  console.log(newVal, oldVal)

  })

  监听ractive复杂对象类型

  // 监听reactive中的整个person对象

  watch(person, (newVal, oldVal)=> {

  console.log(newVal, oldVal)

  }, {deep: true})

  // 监听reactive对象中某一个属性的变化

  watch(() =>person.name, (newVal, oldVal)=> {

  console.log(newVal, oldVal)

  })

  //监听person对象里的某一个值，开启深度监听

  watch([() => person.job], (newVal, oldVak) => {

  判断

  回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。

  第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。

  第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

  前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

  

  

  注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

  前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

  [外链图片转存中…(img-8YWVMpXt-1715412079564)]

  [外链图片转存中…(img-dHuGIZnR-1715412079565)]