vue面试题学习整理

前端老菜鸡

已于 2023-03-08 23:41:17 修改

阅读量65

点赞数

文章标签：前端 javascript vue.js Powered by 金山文档

于 2023-03-06 18:18:13 首次发布

本文链接：https://blog.csdn.net/qq_37711049/article/details/129366701

版权

vue 数据双向绑定原理：

Vue2.0采用数据劫持结合发布者-订阅者模式的方式实现。

核心就是通过Object.defineProperty()方法劫持各个属性的setter和getter,在数据变动时发布消息给订阅者，触发相应的监听回调。

需要Observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter。给这个对象的某个值赋值，就会触发setter，那么就能监听到数据变化。

Compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有了变动，收到通知，更新数据。

Watcher 订阅者是 Observe 和 Compile 之间通信的桥梁，主要做的事情有：

在自身实例化时往属性订阅器（dep）里面添加自己；

自身必有一个update() 方法；

待属性变动 dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile中绑定的回调。

MVVM作为数据绑定的入口，整合 Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile 之间的桥梁，达到数据变化 =>视图更新；视图交互变化=>数据model变更的双向绑定效果。

受defineProperty限制，Vue无法检测对象属性的删除和添加。所以可以利用Vue提供的 Vue.set() 来解决此问题。

js实现简单的双向绑定：

<body>
    <div id="app"> 
        <input type="text" id="txt"/>
        <p id="show"></p>
    </div>
    <script>
        window.onload = function(){
            let obj = {};
            window.obj = obj;
            Object.defineProperty(obj, "txt", {
                get: function () {
                    return obj;
                }
                set: function(newValue) {
                    document.getElementById("txt").value = newValue;
                    document.getElementById("show").innerHTML = newValue;
                }
            })
            document.addEventListener("keyup", function(e){
                obj.txt = e.target.value;
            })
        }
    </script>
</body>

Object.defineProperty()有什么缺点？Vue3.0为什么用的Proxy?

Object.defineProperty()进行双向数据绑定时，告知用户是可以监听数组的，但只是监听了数组的push()、pop()、shift()、unshift()、sort()、reverse()这八种方法，其他数组的属性检测不到。

Object.defineProperty() 无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应。

Object.defineProperty() 只能劫持对象的属性，因此对每个对象的属性进行遍历时，如果属性值也是对象需要深度遍历，那么就比较麻烦了，所以在比较Proxy能完整劫持对象的对比下，选择Proxy。

Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

Vue模板渲染的原理是什么：

Vue中模板Template无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的HTML语法，所以需要将template转化成一个Javascript函数，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素。这样转化的过程就是模板编译。

模板编译分三个阶段：解析parse, 优化optimize, 生成generate，最终生成可执行函数render。

· 解析 parse 阶段: 使用大量的正则表达式对template字符串进行解析，将标签、指令、属性等转化为抽象语法树AST。

· 优化 optimize 阶段: 遍历AST，找到其中的一些静态节点并进行标记，方便在页面重新渲染的时候进行diff比较时，直接跳过这一些静态节点，优化runtime的性能。

· 生成 generate阶段：将最终的AST转化为render函数字符串。

完整的Vue路由生命周期

导航被触发；

在失活的组件里调用离开守卫；

调用全局的 beforeEach 守卫；

在重用的组件里调用 beforeRouteUpdate 守卫（2.2+）；

在路由配置里面调用beforeEnter;

解析异步路由组件；

在被激活的组件里调用 beforeRouteEnter;

调用全局的 beforeResolve 守卫（2.5+）；

导航被确认；

调用全局的afterEach钩子；

触发DOM更新；

用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

nextTick的更新原理：

Vue在修该数据后，视图不能立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

nextTick的回调函数会等到同步任务执行完毕，DOM更新后才触发。

MVVM开发模式的理解：

· M model: 数据模型层，保存页面中的数据；

· V view: 视图层，页面数据的展示；

· VM viewModel: M和V的调度者，双向数据绑定，通过监听model 数据的改变来控制view的更新，处理用户交互操作。

M 数据改变 => VM => 触发View 更新

V 用户操作=> VM => M 数据同步更新

SPA缺点：

· 不利于SEO；

· 首屏渲染时间过长

Vue 优化首页加载速度？首页白屏？

· 将公用的JS库通过script标签外部引入，减小app.bundle的大小，浏览器并行下载资源文件，提高下载速度；

· 配置路由时，页面和组件使用懒加载的方式引入，进一步缩小app.bundle的体积，再调用某个组件时再加载对应的js文件；

· 使用骨架屏或者loading动画，提升用户体验；

· 图片资源压缩，icon资源使用雪碧图；

· 开启gizp压缩；gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css、json数据都可以压缩。前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减少网络传输的流量大小；

· webapck相关配置优化；

使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件来压缩JS文件；生产环境关闭源码映射，一方面能减少代码包的大小，另一方面也有利于系统代码安全；清除打印日志和debugger信息；配置SplitChunks 抽取公有代码，提升你的应用的性能。

2. 使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件。

· 前端代码层面的优化；

· 使用CDN加载资源；

· UI插件按需引入加载；

Vue2.0 和Vue3.0的区别：

重构响应式系统，使用Proxy替换object.defineProperty：

Proxy可直接监听数组类型的数据变化；

Proxy 监听的目标为对象本身，不需要再去遍历每个属性，有一定的性能提升；

Proxy 可拦截apply、ownKeys 、has等13种方法，而object.defineProperty不行；

Proxy 直接实现对象属性的新增和删除。

新增Composition API, 更好的逻辑复用和代码组织；

重构 Virtual DOM：

模板编译时的优化，将一些静态节点编译成常量；

slot的优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件；

模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）；

代码结构调整，更便于 Tree shaking，使得体积更小；

使用 TypeScript 替换Flow。

Composition API :

Vue2.0中，随着功能的增加，组件变得越来越复杂化，难以维护，而难以维护的根本原因是Vue的API设计迫使开发者使用watch,computed,methods选项组织代码，而不是实际的业务逻辑。

另外Vue2.0中缺少一种较为简洁的低成本的机制来完成逻辑复用，虽然可以minxis完成逻辑复用,但是当mixin变多的时候，会使得难以找到对应的data,computed或者methods来源于哪个mixin，使得类型推断难以进行。

所以Composition API的出现，主要也是为了解决Option API带来的问题。

第一个是代码组织。Composition API可以让开发者根据业务逻辑组织自己的代码，让代码具备更好的可读性和可拓展性。

第二个是实现代码的逻辑提取和复用。多个mixin的property存在变量命名冲突的风险，而composition API 刚好解决了这个问题。

SSR原理：

在客户端请求服务器的时候，服务器到数据库中获取到相关的数据，并在服务器内部将Vue组件渲染成HTML，并且将数据、HTML一并返回给客户端，这个在服务器将数据和组件转化为HTML的过程就叫做服务器渲染SSR。

而当客户端拿到服务器渲染的HTML和数据之后，由于数据已经有了，客户端不需要再一次请求数据，而只需要将数据同步到组件或Vuex内部即可。除了数据以外，HTML结构也有了，客户端在渲染组件的时候，也只需要将HTML的Dom节点映射到Virtual DOM即可，不需要重新创建新的DOM节点，这个将数据和HTML同步的过程，又叫做客户端激活。

使用SSR的优点：

有利于SEO：有利于爬虫来爬取页面，因为部分页面爬虫是不支持执行JavaScript的，这种不支持执行js的爬虫抓取到的非SSR的页面会是一个空的HTML页面，有了SSR后，爬虫可以获取到完整的HTML结构的数据，进而收录到搜索引擎中。

白屏时间更短：相当于客户端渲染，服务端渲染在浏览器请求URL之后已经得到一个带有数据的HTML文本，浏览器只需要解析HTML，直接构建DOM树即可。而客户端渲染，需要先得到一个空的HTML页面，这个时候页面已经进入白屏了，之后还需要经过加载并执行js、请求后端服务器获取数据，js渲染页面几个过程才可以看到最后的页面。特别是在复杂的应用中，由于需要加载js脚本，越是复杂的应用，需要加载的js脚本就越多，越大，这导致应用的首屏加载时间非常长，进而降低用户体验感。

前端老菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue面试题学习整理

vue 数据双向绑定原理：Vue2.0采用数据劫持结合发布者-订阅者模式的方式实现。核心就是通过方法劫持各个属性的setter和getter,在数据变动时发布消息给订阅者，触发相应的监听回调。需要Observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter。给这个对象的某个值赋值，就会触发setter，那么就能监听到数据变化。
复制链接

扫一扫