2023最新前端面试题5（持续更新）

Vue

74、vue 生命周期

74.1、什么是 Vue 生命周期?

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据编译模板、挂载 Dom一渲染、更新一渲染、卸载等一系列过程，我们称这是 Vue的生命周期

74.2、Vue 生命周期的作用是什么?

它的生命周期中有多个事件钩子，让我们在控制整个 Vue 实例的过程时更容易形成好的逻辑

74.3、Vue 生命周期总共有几个阶段?

它可以总共分为 8 个阶段: 创建前/后，载入前/后,更新前/后,销毁前/销毁后

74.4、第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate,created,beforeMount, mounted 这几个钩子

74.5、DOM 渲染在哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了

74.6、每个生命周期适合哪些场景?

生命周期钩子的一些使用方法:

• beforecreate :可以在这加个 loading 事件，在加载实例时触发
• created: 初始化完成时的事件写在这里，如在这结束 loading 事件，异步请求也适宜在这里调用
• mounted :挂载元素，获取到 DOM 节点
• updated :如果对数据统一处理，在这里写上相应函数
• beforeDestroy:可以做一个确认停止事件的确认框
• nextTick : 更新数据后立即操作 dom

75、V-show与 v-if 区别

v-show 是 css 切换，v-if 是完整的销和重新创建

使用 频繁切换时用 v-show，运行时较少改变时用 v-if

v-if=“false’ vif 是条件渲染，当 false 的时候不会追

76、开发中常用的指令有哪些

• v-model :一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
• v-html: 更新元素的 innerHTML
• v-show 与 v-if: 条件渲染，注意二者区别

使用了 v-if 的时候，如果值为 false，那么页面将不会有这个 html 标签生成v-show 则是不管值为 true 还是 false，html 元素都会存在，只是 CSS 中的display 显示或隐藏

v-on : click: 可以简写为 @click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数 v-for:基于源数据多次染元素或模板块 v-bind: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

语法: v-bind:title="msg" 简写: :title="msg"

77、绑定 class 的数组用法

• 对象方法 v-bind:class="{' orange': isRipe，'green': isNotRipe}"
• 数组方法 V-bind:class="[class1，class2]"
• 行内 v-bind:style="{color: color, fontSize: fontSize+'px'}"

78、组件之间的传值通信

78.1、父组件给子组件传值

使用 props，父组件可以使用 props 向子组件传递数据
父组件 vue 模板 father.vue
 

<template>
    <child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
    components: {
        child
    },
    data () {
        return {
            message: 'father message';
        }
    }
}
</script>

子组件 vue 模板 child.vue:
 

<template>
<div>{{msg}}</div>
</template>
<script>
export default {
    props:{
        msg:{
            type:String,
            required:true
        }
    }
}
</script>

78.2、子组件向父组件通信

父组件向子组件传递事件方法，子组件通过Semit 触发事件，回调给父组件
父组件 vue 模板 father.vue:
 

<template>
    <child @msgFunc="func"></child>
</template>

<script>
import child from './child.vue'.
export default {
    components:{
        child
    },
    methods: (
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

子组件 vue 模板 child.vue:
 

<template>
    <button @click="handleClick">点我</button>
</template>
<script>
export default {
    props:{
        msg:{
            type: String.
            required: true
        }
    },
    methods (){
        handleClick (){
        //......
        this.$emit('msgFunc');
        }
    }
}
</script>

78.3、非父子，兄弟组件之间通信

可以通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用 Bus 事件触发和监听来实现通信和参数传递

Bus.js 可以是这样:
 

import Vue from 'vue'

export default new Vue()

在需要通信的组件都引入 Bus.js:

<template>
    <button @click="toBus">子组件传给兄弟组件</button></template>
<script>
import Bus from '../common/js/bus.js'
export default{
    methods:{
        toBus (){
            Bus.$emit('on'，'来自兄弟组件')
        }
    }
}
</script>

另一个组件也 import Bus.js 在钩子函数中监听 on 事件

import Bus from '../common/js/bus.js'
export default {
    data(){
        return{
            message:"
        }
    },
    mounted(){
        Bus.$on('on', (msg) =>{
            this.message = msg
        })
    }
}

79、路由跳转方式

1、<router-link to='home'> router-link 标签会染为<a>标签，咋填template 中的跳转都是这种
2、另一种是编程是导航,也就是通过js 跳转 比如 router.push('/home')

80、MVVM

M - Model，Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑

V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来

VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和View

81、computed 和 watch 有什么区别?

computed:

1.computed 是计算属性,也就是计算值,它更多用于计算值的场景

2.computed 具有缓存性,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后，下一次获取 computed 的值时才会重新调用对应的getter 来计算

3.computed 适用于计算比较消耗性能的计算场景

watch:

1.更多的是[观察]的作用,类似于某些数据的监听回调,用于观察 props $emit或者本组件的值,当数据变化时来执行回调进行后续操作

2.无缓存性，页面重新渲染时值不变化也会执行

小结:

1.当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed

2.如果你需要在某个数据变化时做一些事情，使用 watch 来观察这个数据变化

82、key

key 是为 Vue 中的 vnode 标记的唯- id,通过这个 key,我们的 diff 操作可以 更准确、更快速

准确:

如果不加 key,那么 vue 会选择复用节点(Vue 的就地更新策略),导致之前节点的状态被保留下来，会产生一系列的 bug

快速:

key 的唯一性可以被 Map 数据结构充分利用

83、组件中的 data 为什么是函数?
为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象?
 

// data
data(){
    return{
    message:"子组件",
    childName:this.name
    }
}

// new Vue
new Vue({
    el:'#app',
    router,
    template:'<App/>',
    components:{App}
})

因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离,而 new Vue的实例，是不会被复用的，因此不存在引用对象问题

84、Class 与 Style 如何动态绑定?

Class 可以通过对象语法和数组语法进行动态绑定:

对象语法

数组语法

Style 也可以通过对象语法和数组语法进行动态绑定

对象语法

数组语法 

 

85、vue 的单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定: 父级 prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 Semit 派发一个自定义事件，父组件接收到后，由父组件修改

有两种常见的试图改变一个 prop 的情形“

这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值

这个 prop 以一种原始的值传入且需要进行转换

在这种情况下，最好使用这个 prop 的值来定义一个计算属性

86、keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性:

• 一般结合路由和动态组件一起使用，用于缓存组件；
• 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高;
• 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated

87、v-model 的原理

vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:

text 和 textarea 元素使用 value 属性和 input 事件;

checkbox 和 radio 使用 checked 属性和 change 事件；

select 字段将 value 作为 prop 并将 change 作为事件;

以 input 表单元素为例:

<input v-model='something'>

相当于

<input v-bind:value="something" v-on:input= "something =Sevent.target.value">

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input的事件，如下所示:

父组件:
<ModelChild v-model="message"></ModelChild>

子组件:
<div>{{value}}</div>

props:
    value:String
},
methods:{
    test1(){
    this.$emit('input','小红')
    },
},