vue面试知识点总结第二部分

柔情只为你懂 2022-12-15 03:24 215阅读 0赞

vue 生命周期  
1，说一下你对Vue的生命周期的理解

> 简单回答  
> beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。  
> keep-alive 有自己独立的钩子函数 activated 和 deactivated。  
> 复杂回答  
> |生命周期  
> 发生了什么  
> beforeCreate  
> created  
> beforeMount  
> mounted  
> beforeUpdate  
> updated  
> beforeDestroy  
> destroyed  
> activited keep-alive 专属  
> deactivated keep-alive 专属

2，Vue中组件生命周期调用顺序是什么样的？

> 组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。  
> 组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

3，在什么阶段才能访问操作DOM？

> 在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

4，你的接口请求一般放在哪个生命周期中？

> 可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。  
> 但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：  
> ① 能更快获取到服务端数据，减少页面loading 时间；  
> ②ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

路由知识点：  
1，vue路由hash模式和history模式实现原理分别是什么，他们的区别是什么？

hash 模式：
    #后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面
    通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。
    history 模式：
    history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作
    区别
    url 展示上，hash 模式有“#”，history 模式没有
    刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由
    兼容性，hash 可以支持低版本浏览器和 IE。

路由懒加载是什么意思？如何实现路由懒加载？

路由懒加载的含义：把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件
    实现：结合 Vue 的异步组件和 Webpack 的代码分割功能
           1.     可以将异步组件定义为返回一个 Promise 的工厂函数 \(该函数返回的 Promise 应该 resolve 组件本身\)
    const Foo = () => Promise.resolve({ /* 组件定义对象 */ }) 复制代码
           2.     在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 \(split point\)
    import('./Foo.vue') // 返回 Promise 复制代码
    
    结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件
    const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]}) 
    
    使用命名 chunk，和webpack中的魔法注释就可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中
    chunkconst Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

2，Vue-router 导航守卫有哪些

全局前置/钩子：beforeEach、beforeResolve、afterEach
    路由独享的守卫：beforeEnter
    组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

进阶知识  
1 说说vue和react的异同

同（相同点）：
    使用 Virtual DOM
    提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
    将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
    异（不同点）：
    在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树（除非使用PureComponent/shouldComponentUpdate），在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染
    在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理
    Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统，所以有更丰富的生态系统
    Vue 提供了CLI 脚手架，能让你通过交互式的脚手架引导非常容易地构建项目。你甚至可以使用它快速开发组件的原型。React 在这方面也提供了create-react-app，但是现在还存在一些局限性
    React Native 能使你用相同的组件模型编写有本地渲染能力的 APP，Vue 和Weex会进行官方合作，Weex 是阿里巴巴发起的跨平台用户界面开发框架，同时也正在 Apache 基金会进行项目孵化，另一个选择是NativeScript-Vue，一个用 Vue.js 构建完全原生应用的NativeScript插件

2 什么是 mixin ？

Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。
    如果你希望再多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。
    然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。

3 在 Vue 实例中编写生命周期 hook 或其他 option/properties 时，为什么不使用箭头函数 ？

箭头函数自已没有定义 this 上下文中。
    当你在 Vue 程序中使用箭头函数 ( => ) 时，this 关键字病不会绑定到 Vue 实例，因此会引发错误。所以强烈建议改用标准函数声明。

4，Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段（生成AST树/优化/codegen）：
    首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。
    Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。
    编译的最后一步是将优化后的AST树转换为可执行的代码。

5 diff算法说一下

同级比较，再比较子节点
    先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
    比较都有子节点的情况(核心diff)
    递归比较子节点

6 说说你对keep-alive组件的了解

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：
    一般结合路由和动态组件一起使用，用于缓存组件；
    提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
    对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

7 说说你对SSR的了解

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端
    SSR的优势
      更好的SEO
      首屏加载速度更快
    SSR的缺点
      开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子
      当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境
      更多的服务端负载

8 你都做过哪些Vue的性能优化？

编码阶段
    	尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
    	v-if和v-for不能连用
    	如果需要使用v-for给每项元素绑定事件时使用事件代理
    	SPA 页面采用keep-alive缓存组件
    	在更多的情况下，使用v-if替代v-show
    	key保证唯一
    	使用路由懒加载、异步组件
    	防抖、节流
    	第三方模块按需导入
    	长列表滚动到可视区域动态加载
    	图片懒加载
    
    SEO优化
    	预渲染
    	服务端渲染SSR
    打包优化	
    	压缩代码
    	Tree Shaking/Scope Hoisting
    	使用cdn加载第三方模块
    	多线程打包happypack
    	splitChunks抽离公共文件
    	sourceMap优化
    用户体验
    	骨架屏
    	PWA
    	还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等
    
    vue2.x中如何监测数组变化？
    使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法，当调用数组api时，可以通知依赖更新。
    如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
    优点：
    	用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
    	基于上面一点，SPA 相对对服务器压力小；
    	前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
    缺点：
    	初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
    	前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
    	SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

对于即将到来的 vue3.0 特性你有什么了解的吗？

监测机制的改变
    	3.0 将带来基于代理 Proxy的 observer 实现，提供全语言覆盖的反应性跟踪。
    	消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制：
    只能监测属性，不能监测对象
    	检测属性的添加和删除；
    	检测数组索引和长度的变更；
    	支持 Map、Set、WeakMap 和 WeakSet。
    模板
    	模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。
    	同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来方便习惯直接使用 api 来生成 vdom 。
    对象式的组件声明方式
    	vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。
    	3.0 修改了组件的声明方式，改成了类式的写法，这样使得和 TypeScript 的结合变得很容易
    其它方面的更改
    	支持自定义渲染器，从而使得 weex 可以通过自定义渲染器的方式来扩展，而不是直接 fork 源码来改的方式。
    	支持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。
    	基于 tree shaking 优化，提供了更多的内置功能。