阅读 493
面试准备:以接化发来迎接一套"五连题"的偷袭(下篇)

面试准备:以接化发来迎接一套"五连题"的偷袭(下篇)

1. 引言

万事开头难,简历已投。静待审判。这是面试准备的下篇,上篇主要讲了打鸡血,http,css,感兴趣的同学可以回顾一下。下篇着重于vue技术栈。我主要学习react。也学习过vue3.0,姑且总结一下。水平有限,多多包涵。

2. 接:'五'连题

7.简单介绍一下vue的生命周期

组件的生命周期是开发中常常要关注的,面试时也是关于技术栈的基础的重点。很多,很难记全,可以先记中文,翻译成单词。掌握周期状态转变的关键事件

Vue3.0之前版本:8个周期,4个名词:创建,载入,更新,销毁。一。前则before ,后则ed.

  1. 创建
  • 创建前(beforeCreate):组件实例被创建,组件属性计算之前。
  • 创建后(created):完成数据观测,属性和方法的计算,$el属性没有显示($el的作用获取Vue实例关联的DOM元素,就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中)
  1. 载入
  • 载入前(beforeMount):组件实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。此时还没有挂载html到页面上
  • 载入后(Mounted):。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。
  1. 更新
  • 更新前(beforeUpdate):数据更新之前,发生在虚拟DOM重新渲染和打补丁之前
  • 更新后(Updated):组件DOM已经更新,所以可以执行依赖于DOM的操作
  1. 销毁
  • 销毁前(beforeDestroy):实例销毁之前,实例仍然完全可用。
  • 销毁后(destroyed):在实例销毁之后调用。所有的事件监听器会被移除,所有的子实例也会被销毁

Vue3.0之后:

beforeCreate ->  setup()

created -> setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured
复制代码
8.vue组件之间如何参数传递

react和vue关于这个问题的实现上有相似之处,可以参照对比记忆,这个问题有一定难度,理清逻辑很重要。重在理解,可以结合实践经历回答。

  • 分三类,第一类:父组件向子组件传值。vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 
  1. 父组件使用props向子组件传递数据 ,子组件在props中创建一个属性,用于接收父组件传过来的值
  2. 父组件中注册子组件
  3. 在子组件标签中添加子组件props中创建的属性 
  4. 把需要传给子组件的值赋给该属性 
  • 第二类 子组件向父组件传值
  1. 子组件中需要以某种方式(例如点击事件)来触发一个自定义事件 
  2. 将需要传的值作为$emit的第二个参数,该值将作为实参传给相应自定义事件的方法 
  3. 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听 
  • 第三类 兄弟组件的传值 => Vuex
  1. 构成:state(单一状态),Getters(计算属性),Mutations(数据更改方法),Actions(提交Mutations), Moudle(包含前几者的模块), 辅助函数
  2. 思想:Vuex的设计思想,借鉴了Flux、Redux,将数据存放到全局的store,再将store挂载到每个vue实例组件中,利用Vue.js的细粒度数据响应机制来进行高效的状态更新。
  3. 详解:www.imooc.com/article/291…
9. Vue 中 9.v-if和v-show的区别

我只了解过几个常用的 v-* 的缩写,大概的作用和用法。对于这两者的区别从未考虑过。学习后总结出来:它们的作用都是控制元素的显示与否,但实现的原理大不相同,造成了四个方面的区别

  1. 原理:v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;
  2. 过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换
  3. 条件:v-if是惰性的,只有在条件第一次变为真时才开始局部编译, v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
  4. 性能::v-if有更高的切换消耗;v-show有更高的初始渲染消耗

扩展:v-bind 双向绑定的实现机制; 常用的v-指令; v-text,v-html, v-model, {{}}之间的异同

10, vue如何让css只在当前组件中起作用

scoped。当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。

扩展:vue 3.0 新特性:reactive,toRefs,computed,refs,钩子函数等。

11. 编写javascript深度克隆函数deepClone

实现一个深克隆是面试中常见的问题的,可是绝大多数人的答案都是不完整的,甚至是错误的,这个时候面试官会不断追问,看看你到底理解不理解深克隆的原理,很多情况下一些一知半解的人就原形毕漏了

实现要点:

  1. 解决对象嵌套
  2. 解决对函数,RegExp,Date等特殊对象的克隆
  3. 解决抛弃对象的constructor,所有的构造函数会指向Object
  4. 解决对象循环引用,报错

说实话,我手写不出来,抄了一遍也难消化。我只能讲讲别人的理解 原文

function deepClone(target) { // WeakMap作为记录对象Hash表(用于防止循环引用) 
    const map = new WeakMap()
    function isObject(target) {// 判断是否为object类型的辅助函数,减少重复代码
        return (typeof target === 'object' && target ) || typeof target === 'function'}
    function clone(data) {// 基础类型直接返回值
        if (!isObject(data)) 
        { return data}
        if ([Date, RegExp].includes(data.constructor)) {// 日期或者正则对象则直接构造一个新的对象返回
            return new data.constructor(data)
        }
        if (typeof data === 'function') {// 处理函数对象
            return new Function('return ' + data.toString())()
        }
        const exist = map.get(data) // 如果该对象已存在,则直接返回该对象
        if (exist) {
            return exist
        }
       if (data instanceof Map) {// 处理Map对象
            const result = new Map()
            map.set(data, result)
            data.forEach((val, key) => {
                // 注意:map中的值为object的话也得深拷贝
                if (isObject(val)) {
                    result.set(key, clone(val))
                } else {
                    result.set(key, val)
                }
            })
            return result
        }
        // 处理Set对象
        if (data instanceof Set) {
            const result = new Set()
            map.set(data, result)
            data.forEach(val => {
                // 注意:set中的值为object的话也得深拷贝
                if (isObject(val)) 
                {result.add(clone(val)} 
                else 
                {result.add(val)}
            })
            return result
        }
        // 收集键名(考虑了以Symbol作为key以及不可枚举的属性)
        const keys = Reflect.ownKeys(data)
        // 利用 Object 的 getOwnPropertyDescriptors 方法可以获得对象的所有属性以及对应的属性描述
        const allDesc = Object.getOwnPropertyDescriptors(data)
        // 结合 Object 的 create 方法创建一个新对象,并继承传入原对象的原型链, 这里得到的result是对data的浅拷贝
        const result = Object.create(Object.getPrototypeOf(data), allDesc)

        // 新对象加入到map中,进行记录
        map.set(data, result)

        // Object.create()是浅拷贝,所以要判断并递归执行深拷贝
        keys.forEach(key => {
            const val = data[key]
            if (isObject(val)) {
                // 属性值为 对象类型 或 函数对象 的话也需要进行深拷贝
                result[key] = clone(val)}
                else {result[key] = val }
        })
        return result
    }
    return clone(target)
}

复制代码
12. 找出一个数字数组中出现次数最多的数字

一开始还以为有很多数组方法可以轻松搞定,仔细思考后,还是没有这么容易。暴力较简单

1.数字法
function  Max(a){
 let count = []
for(let j=0; j<a.length; j++){
  // 判断是否第一次出现
  if(j === a.indexOf(a[j])){
    count[a[j]] = 1
  }else{
    count[a[j]] = count[a[j]] + 1
  }
}
let maxNum = 0 //储存数字的最多次数
for(let i=0; i<count.length; i++){
  if(count[i] !== undefined && count[i] > maxNum){
    maxNum = count[i]
  }
}
for(let k=0; k<count.length; k++){
  if(maxNum === count[k]){
    console.log('出现最多的数字为:',k);
  }
}
}


2.对象法
function Max(a)
{
let obj = {} //采用键值对来存储,键表示该数字,值表示给数字出现次数
let maxNum = 0
a.forEach((item,index) => {
  if(a.indexOf(item) == index){
    obj[item] = 1
  }else{
    obj[item] = obj[item] + 1
  }
})
//找出谁是最大值
for(let i in obj){
  if(obj[i] > maxNum){
    maxNum = obj[i]
  }
}
//根据最大值输出对应的数字
for(let j in obj){
  if(obj[j] === maxNum){
    console.log('出现次数最多的数字为',j,' ,次数为',obj[j]);
  }
}
}
复制代码

3.发: 发现弱点

  • vue3.0的新特性还没完全了解,一些特殊函数,v-操作使用较少,需要在实践中加深认识

  • js手写题考验对某些函数,方法的原理理解,内部逻辑构成,熟悉程度,需要的不光是知识,也是代码能力,只能多练习

  • 算法很重要。也是我的薄弱项。别问,问就是刷leetcode。也可以根据b站视频讲解去学习,还推荐掘金的字节常考的64道算法题

第一篇面试准备也就到为止了,以后有机会还会多多分享。喜欢的小伙伴可以点个赞,加个关注.有缘再见。😀😏😂

本人大三,正寻实习,与君共勉,寥有拙作 万望指正

文章分类
前端
文章标签