面试准备：以接化发来迎接一套"五连题"的偷袭（下篇）1. 引言万事开头难，简历已投。静待审判。这是面试准备的下篇，上篇

1. 引言

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

2. 接：'五'连题

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

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

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

创建

创建前（beforeCreate）：组件实例被创建，组件属性计算之前。
创建后（created）:完成数据观测，属性和方法的计算，$el属性还没有显示（$el的作用获取Vue实例关联的DOM元素，就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中）

载入

载入前（beforeMount）:组件实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
载入后（Mounted）：。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。

更新

更新前（beforeUpdate）:数据更新之前，发生在虚拟DOM重新渲染和打补丁之前
更新后（Updated）：组件DOM已经更新，所以可以执行依赖于DOM的操作

销毁

销毁前（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的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

父组件使用props向子组件传递数据，子组件在props中创建一个属性,用于接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

第二类 子组件向父组件传值

子组件中需要以某种方式（例如点击事件）来触发一个自定义事件
将需要传的值作为$emit的第二个参数,该值将作为实参传给相应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

第三类 兄弟组件的传值 => Vuex

构成：state（单一状态），Getters（计算属性），Mutations(数据更改方法)，Actions(提交Mutations), Moudle(包含前几者的模块)， 辅助函数
思想：Vuex的设计思想，借鉴了Flux、Redux，将数据存放到全局的store，再将store挂载到每个vue实例组件中，利用Vue.js的细粒度数据响应机制来进行高效的状态更新。
详解：www.imooc.com/article/291…

9. Vue 中 9.v-if和v-show的区别

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

原理：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
条件：v-if是惰性的，只有在条件第一次变为真时才开始局部编译， v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能：：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

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

实现要点：

解决对象嵌套
解决对函数，RegExp，Date等特殊对象的克隆
解决抛弃对象的constructor,所有的构造函数会指向Object
解决对象循环引用,报错说实话，我手写不出来，抄了一遍也难消化。我只能讲讲别人的理解原文

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道算法题

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

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

面试准备：以接化发来迎接一套"五连题"的偷袭（下篇）