vue:基础:原理知识点

1、vue编译原理【将 template 转成 render 函数的过程。】

(1)原理

浏览器运行时会把 template 转化成 render 函数,webpack 则不需要,(因为 vue loader已转换完成)get数据收集是在render函数中执行的,每个computed函数都会生成一个watcher和data里的数据绑定,data 数据变化后watcher执行,(所以才有了缓存) ,每个组件都会生成一个渲染watcher,里面主要是做微任务部分,总之同步任务做数据收集,微任务做diff及dom渲染。

(2)详细:主要分3个流程

  • template 字符串转换成 ast 抽象语法树
  • 优化 ast 抽象语法树,主要标记一些节点内容不变的节点,静态节点和静态根节点,patch 更新对比的时候跳过这些节点比对和重新渲染
  • 将优化好的 ast 抽象语法树,通过递归的方式,拼接为 render 字符串,最后执行 new function,返回 render 方法

2、vue 双向绑定原理【另一种问法:响应式数据的原理/页面更新,vue底层是如何响应】

采用数据劫持结合发布者订阅模式,通过 Object.defineProperty() 来劫持各个属性的 getter、setter,在数据变动时发给订阅者,触发相应事件。

注)数据劫持(vue.js);发布者-订阅模式(backbone.js);脏值检查(angular.j

另一种回答:数据劫持 + 观察者模式

对象内部通过 defineReactive 方法,使用 Object.defineProperty 将属性进行劫持(只会劫持已存在的属性),数组则是通过重写数组来实现。当页面使用对应属性时,每个属性都拥有自己的 dep 属性,存在它所依赖的 watcher (依赖收集)get,当属性变化后会通知自己对应的 watcher 去更新(派发更新)set。

        1、Object.defineProperty 数据劫持

        2、使用 getter 收集依赖 ,setter 通知 watcher派发更新。

        3、watcher 发布订阅模式。

        2、$set 原理?

如果目标是数组,直接使用数组的 splice 方法触发相应式;

如果目标是对象,会先判读属性是否存在、对象是否是响应式,最终如果要对属性进行响应式处理,则是通过调用 defineReactive 方法进行响应式处理( defineReactive 方法就是 Vue 在初始化对象时,给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法)

3、nextTick 实现原理?

(1)nexTick 的作用:nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。

(2)使用场景:在修改数据之后立即使用这个方法,获取更新后的 DOM

(3)nextTick 实现原理:采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法。

4、vue 事件绑定原理?

原生事件绑定是通过 addEventListener 绑定真实的元素,组件事件绑定是通过 on 实现的。

注)如果要在组件上使用原生事件,需要加.native修饰符,这样就相当于在父组件中把子组件当做普通的HTML标签,然后加上原生事件。on、$emit 是基于发布订阅模式的,维护一个事件中心,on的时候将事件按名称存在事件中心里,称之为订阅者,然后emit将对应的事件进行发布,去执行事件中心里的对应的监听器。

5、观察者模式和发布订阅者模式的区别?【发布 / 订阅模式和观察者模式的区别是什么?】

两者最大的区别:发布订阅者模式有一个调度中心,观察者模式每个被订阅的目标都会有一个被观察的对象;而发布订阅者模式则会有一个调度中心,取消了发布订阅者之间的依赖,在这个中心可以控制有些数据可以不传输给订阅者,可以增加权限等;

6、vue2 和 vue3 实现双向绑定的区别?【Object.defineProperty和Proxy的区别】

(0)vue3采用了 proxy 代理,和 vue 2 中Object.defineProxy 一样有两个属性:get/set。

(1)vue3中的proxy一次性给所有对象都添加set和get属性。Object.defineProxy 一次只能给一个对象添加属性。

(2)proxy 不兼容IE,Object.defineProperty 不兼容IE8以下的。

(3)proxy 调用递归时,Object.defineProperty 在一开始就全部递归。

(4)Proxy 使用上比Object.defineProperty 方便的多、性能也比他好。

(5)proxy 代理整个对象,Object.defineProperty 只能代理对象上的某个属性。

(6)数组新增/删除/属性时,proxy 可以监听,Object.defineProperty 不行。

(7)对象上定义新属性时,proxy 可以监听,Object.defineProperty 不行。

注)proxy: vue 3.x 版本以上使用的;语法:可以使用new来定义;或者使用Proxy.revocable 的静态方法。

        Object.defineProperty: vue 2.x 版本使用的,把内部解析成 observer、Dep,使用watch 相联。

7、vue2和vue3的区别,做了哪些优化?

(1)vue2 和 vue3 定义变量的方法不一样

        vue2:定义变量在data 中,方法写在 methods 中。

        vue3:定义的变量和方法都在 setup 中。

(2)vue2 和 vue3 生命周期钩子函数不同

  • 3.0 使用之前需要先引入
  • onRenderTracked:状态跟踪。会跟踪页面中响应式的变量和方法,return 出来的东西,都会更新。页面中有update 也跟踪。
  • 3.0 还增加两个勾子函数:onRenderTracked、onRenderTiggered 【07. vue中onRenderTracked()和 onRenderTriggered()钩子函数的使用-码云笔记】
  • onRenderTiggered:状态触发。
  • onRenderTracked 和 onRenderTiggered 都写在 setup 里面。

vue2 生命周期 vue3 生命周期 beforeCreate -> setup // 组件创建之前 created -> setup // 组件创建立之后 beforeMount -> onBeforeMount // 组件加载 DOM 之前 Mounted -> onMounted // 组件加载 DOM 之后 beforeUpdate -> onBeforeUpdate // 组件更新 DOM 之前 updated -> onUpdated // 组件更新 DOM 之后 // 3.0 使用之前需要引入 import { reactive, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, } from "vue";

(3)vue3 支持 ts 更好。但是 2.0 也支持

8、为什么Vue3用了Proxy性能更好呢?

        Object.defineProperty 对对象自身做个性,proxy 在 Object 基础上加一层拦截,不修改原对象。2.0 监听不了数据变化,监听手段单一,只能监听set 和 get,Proxy 有10几种监听,必须把所有的属性添加 defineProperty ,Proxy整个对象都会进行拦截。

9、proxy 是什么?proxy的缺点是什么? proxy 为什么比Object.defineProperty快?

(1)定义:在目标对象之前设置的“拦截”,外界访问时,都需要通过这层拦截,因此提供了一种机制,可以对外界的访问过滤和改写。

(2)缺点:浏览器兼容性问题,不兼容IE。

(3)Proxy的优点如下:

        1. Proxy可以直接监听对象而非属性;

        2. Proxy可以直接监听数组的变化;

        3. Pxory有多种(13种)拦截方法,不限于apply、ownKeys、deleteProperty、has等等 是Object.defineProperty不具备的;

        4. Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改;

        5. Proxy作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利;

        Object.defineProperty的优点如下:

        1. 兼容性好,支持 IE9,而Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平,因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写

10、vue 组件通讯方式?

(1)props 和 emit。父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过emit。

(2)parent和parent 和 parent和children 获取单签组件的父组件和当前组件的子组件。

(3)父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。

【官方不推荐在实际业务中适用,但是写组件库时很常用。】

(4)$refs 获取组件实例

(5)events Bus 兄弟组件传参,就是中央事件总线。

(6)vuex 状态管理

(7)attrs和attrs 和 attrs和listeners A -> B -> C。Vue2.4开始提供了attrs和attrs和attrs和listeners来解决这个问题。

11、首页为什么会白屏?如何优化白屏?

(1)什么是白屏?

现在很多页面使用模版渲染,在网速不好的情况下,会导致出现loading 或者空白页,这种就叫白屏。

(2)白屏出现的原因【根本原因:网速 & 静态资源】

  • css 文件加载需要时间【解决:css 代码前置或者内联。】
  • 首屏内联js 会影响加载时间 【解决:尽量不在首屏中加载JS,或者放置内联脚本】
  • 首屏没有实质的数据,是通过接口异步加载进来的【解决:首屏直接同步渲染 html ,页面滚动时异步加载】

(3)解决方法(如何避免)

  • 使用模版引擎渲染所有页面,减少文件加载积压:css、js、html。
  • 提供一些友好的交互:比如假的滚动条。
  • 加快js 执行速度,比如常见的JS 滚动,在看的见的地方先渲染这部分东西。
  • 使用本地存储静态资源。

12、谈谈单页面应用与多页面应用的区别

(1)单页面(SPA):

  • 概念:只有一个html页面,所有跳转方式都是通过组件切换完成的。
  • 优点:页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
  • 缺点:首屏加载较慢,当然这个问题现在已经基本被合理化解决了,加载整个项目中使用的css、js,SEO优化不好

(2)多页面(MPA):

  • 概念:整个项目有多个html,所有跳转方式都是页面之间相互跳转的。
  • 优点:首屏加载较快,只加载本页所使用的的css、js,SEO优化较好。
  • 缺点:页面跳转较慢。

13、在vue项目中你有没有做性能方面的优化,怎么做的?

        百分之八十的人都说会:js、css 这些,这些是都是必须要做的。

        性能优化过程中我们更多的需要考虑DMS解析、服务器缓存、浏览器缓存这些点。

(1)gzip

        前端项目基本都放在cdn上,gzip压缩是有必须的,能减少js文件大小两到三倍

        参考加速度nginx:gzip和缓存【nginx配置:在你对应的域名下,添加配置,重启服务 】

(2)服务器缓存(nginx 缓存)

(3)浏览器缓存

(4)vue 中的 keep-alive

        做大型项目的时候,有很多个router,在页面快速切换中,为了保证页面加载的效率,可以使用缓存机制,也可以使用 keep-alive 里面包着rourter-view。keep-alive 会缓存组件,方便快速切换。

        是否需要重新同步数据在vue-router 的钩子函数中判断。

(5)promise 请求(优点:1、减少回调;2、串并行处理;3、代码优雅)

        注)ES6在性能优化上可以使用promise、async/await 压缩请求时间

(6)预加载

你可能感兴趣的:(面试,vue,vue.js,javascript,前端)