黑马程序员技术交流社区

标题: 【西安校区】web前端面试重点难点问题 [打印本页]

---

作者: 逆风TO    时间: 2020-3-26 09:59
标题: 【西安校区】web前端面试重点难点问题
一、vue相关
Q：vue的底层原理？
A：Vue是采用数据劫持配合发布者-订阅者模式，通过Object.defineProperty来()来劫持各个属性的getter和setter。

在数据发生变化的时候，发布消息给依赖收集器，去通知观察者，做出对应的回调函数去更新视图。
Q：vue3.0的新特性？
A：

[JavaScript] 纯文本查看 复制代码

1.代码结构更清晰

2.压缩包体积更小

3.Object.defineProperty 替换为es6的 Proxy。 将原本对对象属性的操作变为对整个对象的操作，可优化性增强

4.启用 TypeScript 语法，大大的简化了代码

详细参考：https://zhuanlan.zhihu.com/p/92143274

Q：vue中computed和watch的区别
A：computed是通过几个数据的变化，来影响一个数据，而watch，则是一个数据的变化，去影响多个数据。
详细参考：https://blog.csdn.net/u011423258/article/details/88641870

Q：vue里data为什么是函数而不是对象
A：如果写成对象，当组件被复用时，那么多个组件实例就会共用同一个data对象，这样改变其中一个实例的data，就会改变所有的。
因此写成函数返回值的形式，使每个组件实例都拥有自己的私有数据空间，不会造成混乱。
vue官方解释：https://cn.vuejs.org/v2/api/#data

Q：vue里数组改变为什么有的会渲染，有的不会渲染
A：对用数组的变异方法（push、pop、sort等）进行数组操作时可以达到视图的重新渲染，因为vue对这些方法进行了包裹。
Vue 不能检测以下数组的变动：
利用索引直接设置一个数组项时
修改数组的长度时
因为这样的操作vue根本没法做一个Object.defineProperty处理。
解决方法：vm.$set(vm.items, indexOfItem, newValue)
vue官方说明：https://cn.vuejs.org/v2/guide/list.html#数组更新检测

Q：update里去改变data值会有问题吗？
A：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用update钩子。应避免在此期间更改状态，否则可能导致死循环。

Q：加载数据在created好还是在mounted好，两者区别？
A：

[JavaScript] 纯文本查看 复制代码

在created比较好，如果在mounted钩子函数中请求数据可能导致页面闪屏问题。

两者区别：

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

Q：vue通信的几种方式
A：
props和$emit
$parent 和 $children （另有：$root：获取根实例）
provide / inject
ref / refs
vuex（状态管理器）
localstorage和sessionStorage

Q：vue单向数据流
A：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

Q：vue虚拟DOM的作用
A：速度快，减小了页面渲染过程的次数
详细参考：https://www.jianshu.com/p/af0b398602bc

Q：vue服务端渲染
A：Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
vue官方文档：https://ssr.vuejs.org/zh/

Q：vue项目性能优化
A：
参考：https://blog.csdn.net/q3254421/article/details/89193166

Q：vue中不用vuex如何实现在任意子组件都可以访问一个全局的变量？
A：通过 $root 访问根实例可实现。
vue官方说明：https://cn.vuejs.org/v2/guide/components-edge-cases.html#访问根实例

二、js相关
Q：es5实现const变量申明方法
A：利用Object.defineProperty

[JavaScript] 纯文本查看 复制代码

function myConst (key, val) {

        window.key = val

        Object.defineProperty(window, key, {

                enumerable: false,

                configurable: false,

                get: function () {

                        return val

                },

                set: function (value) {

                        if (value !== val) {

                                throw new TypeError('不能重复定义')

                        } else {

                                return val

                        }

                }

        })

}

详细参考：https://blog.csdn.net/weixin_34362875/article/details/87941318

Q：async/await 如何做异常处理
A：
参考：https://blog.csdn.net/q3254421/article/details/88878288

Q：对闭包的理解
A：闭包是这样一种机制: 函数嵌套函数, 内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回。
举个简单的例子：

[JavaScript] 纯文本查看 复制代码

function aa(){

  var num=10;

  function bb(){

    num++

    console.log(num);

  }

  return bb;

}

//bb(); //无法直接访问函数内部的函数



aa()();//11

aa()();//11

aa()();//11



var closure = aa();

closure();//11

closure();//12

closure();//13

详细参考：https://marco-hui.github.io/Java ... vanced/closure.html

Q：用过哪些ES6语法？

A：

变量声明：let、const
解构赋值
字符串扩展：includes、startsWith/endsWith、repeat(n)、字符串模板
数组遍历：for…of
合并对象：Object.assign(obj1,obj2,…objN)
箭头函数
Symbol数据类型
Set集合
Map映射
详细参考：https://marco-hui.github.io/Java ... e/advanced/es6.html

其他问题
这些是开放性的问题，根据自己的实际与经验回答

Q：开发过程需注意的地方？

Q：有在学习或了解什么新的技术吗？

Q：对自己的职业规划？



转自CSDN

---

作者: 失落    时间: 2020-3-28 08:56
赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2