2023前端开发面试笔试题（一）自整理题库收藏共勉(不断更新)

本文介绍: 简述diff 算法过程答：执行 diff 算法就是调用 patch 函数，比较新旧节点，然后不断给真实的DOM打补丁。patch 函数接收两种参数，vnode和o ldVnode，两个参数分别代表了新节点和旧节点。此时用到了sam eVnode(o ldVnode, vnode)，如果返回的是true，那么就执行 patchVnode，如果返回的是false，那么就将vnode 替换 o ldVnode，将新节点替换给旧节点。

前端开发面试笔试题2023 收藏共勉（不断更新）

1.vue中的v–if和v-show是做什么用的，两者区别是什么？
答：两者在使用时皆为切换的作用，但两者不同的地方在于消耗上，v-if在每次切换时消耗较大，而v-show仅在初始化时消耗较大，所以两者要根据场景不同来选择。

2.如何让css只在当前组件中起作用？
答：在当前的style里后面加上scoped，例 style scoped

3.如何实现双向绑定以及双向绑定的原理？
答：v-model是实现双向绑定的语法糖，常用于表单与组件之间的数据双向绑定。
原理：分两步骤 v-bind绑定一个 value 属性 v-on 指令给当前元素绑定input 事件可看出v-model绑定在表单上时，v-model其实就是v-bind绑定value和v-on 监听 input 事件的结合体。

4.vue–loader是什么？使用它的用途有哪些？
答：解析.vue 文件的一个加载器，跟template/js/style 转换成js 模块。
用途：js 可以写es6、style 样式可以 scss或less、template 可以加jade等。

5.NextTic k是做什么的？
答：$nextTi c k是在下次DOM更新循环结束后之执行迟回调，在修改数据之后使用 $nextTi c k，则可以在回调中获取更新后的DOM。
场景：需要在视图更新之后，基于新的视图进行操作。

        <!--父组件--&gt;
        <Header :msg='msg'&gt;</Header&gt;
        <!--子组件--&gt;
        props:['msg']
        props:{
            msg: 数据类型
        }

         <!--子组件-->
        this.$emit("自定义事件名称"，要传的数据)；
        <!--父组件-->
        <Header @childInput='getVal'></Header>
        methods:{
            getVal(msg){
                //msg就是子组件传过来的数据
            }
        }

        <!--兄弟组件传值-->
        通过一个中转bus
        A传值：
            import bus from '@/common/bus'
            bus.$emit("toFooter",this.msg);
        B接收：
            import bus from '@/common/bus'
            bus.$on('toFooter',(data)=>{
                //data就是this.msg
            })