【续】前端技术面常见问题(Vue+JS+C3+H5)

23.v-if和v-show有什么区别，使用场景分别是什么？

区别：
1）控制手段不同
v-show是对该元素添加display：none；属性
v-if是对将该元素直接从dom树中去除；
2）编译过程不同
v-show只是简单的基于css的切换
v-if在切换过程中销毁和重建内部的事件监听和子组件
3）编译条件不同
v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，只有条件为假时，不做任何操作，直到为真才渲染。
v-show只是简单的基于css进行渲染
4）性能消耗不同
因为v-if是对dom进行操作，所以性能消耗比v-show大

使用场景：
如果需要非常频繁地切换，使用v-show较好；如果在运行时条件很少改变，则使用v-if较好

24.数据请求在created和mounted的区别

Created是在组件实例一旦创建完成的时候立刻调用，这时页面的dom节点还未生成；mounted是在页面dom节点渲染完毕后立刻执行。触发时机上created是比mounted更早，所以讨论这个问题的本质就是触发时机；放在mounted中的请求有可能导致页面闪动，但是如果在加载前完成请求，则不会出现这种情况，所以建议对页面内容的改动放在created生命周期中。

25.v-if和v-for为什么不建议一起用?

因为v-for的优先级大于v-if，所以当同时使用时会导致每次先循环完再进行判断，这会导致极大的性能浪费

解决方法：外层嵌套一个template先进行一个v-if的判断，再进行循环

26.说说你对双向绑定的理解

1）首先说什么是双向绑定
单向绑定就是model绑定view，利用JS代码更新model，view也会进行自动的更新；双向绑定就是在单向绑定的基础上，将view和model也进行了绑定；用户更新view，model也会自动被更新。

2）双向绑定是如何被实现的？
这里我们就要说viewmodel了，它其实就是实现双向绑定的核心；它的主要功能就是：model变化后更新view，view变化后更新model；其实就是MVVM模型，viewmodel在这之中做了一个桥梁的作用，就是将view和model进行了一个双向的绑定。

27.说说你对key的理解

Key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点。

28.谈谈你对keep-alive的理解

Keep-alive是vue中内置的组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM；当设置了keep-alive的组件，会多出两个生命周期钩子（activated和deactivated）。

使用场景：当我们在某些场景下不需要让页面重新加载时我们可以使用keep-alive；举个例子，当我们从首页à列表页à详情页à再返回  这里的列表页就需要keep-alive

可以设置include，exclude，max等属性

29.虚拟DOM

详细版：

从React到Vue，虚拟DOM为这两个框架带来了跨平台的能力；实际上它只是对真实DOM的一种抽象，以JS对象作为基础的树，以对象的属性来描述节点，最后通过一系列操作使这棵树映射到真实环境上。创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一对应。通过VNode，vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作，经过diff算法得出一些需要修改的最小单位,再更新视图，减少了dom操作，提高了性能。

很多人认为虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势，但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种GUI

简化版：

如果我们使用原生JS，当我们更新视图时，它会先销毁旧的节点再重新创建新的节点，因为涉及到了操作DOM，所以会非常消耗性能。而像React、Vue这种现代前端框架，引入了虚拟DOM这个概念；在Vue中当我们去更新视图时，Vue会通过diff算法将虚拟DOM与真实的DOM进行对比，只去更新两者不同的部分，这就大大降低了DOM操作，也提高性能。

30.diff算法

1）只会在同层级比较，不会跨层级比较
2）比较过程中，循环从两边向中间比较

31.你是如何解决跨域问题的？

跨域本质是浏览器基于同源策略的一种安全手段，是浏览器最核心也是最基本的安全功能；同源必须协议(protocol)、主机(host)、端口(post)都相同，有一项不同也会产生跨域。Vue项目常用的方法是利用proxy去解决跨域问题（只能用在开发环境，不能用在生产环境）

32.Vue3与Vue2的区别

1. 速度更快
   1）重写了虚拟DOM实现
   2）编译模板的优化
   3）更高效的组件初始化
   4）Undate性能提升1.3-2倍
   5）SSR速度提高了2-3倍
2. 体积更小
   1）webpack的tree-shaking功能，使体积更小（tree-shaking两大好处：①对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大②对使用者，打包出来的包体积变小了）
3. 更易维护
   1）compisition API
   (1)可与现有的options API一起使用(Vue3项目中既可以配置options API也可以配置compisition API)
   (2)灵活的逻辑组合与复用
   (3)Vue3模块可以和其他框架搭配使用(我们可以在react项目中使用vue3的api，这样可以享受到vue3的api的同时，保留react的渲染能力)
   2)更好的TS支持（Vue3是基于TS编写的，可以享受到自动的类型定义提示）
   3)编译器重写
4. 更接近原生（可以自定义渲染API   render函数）
5. 更易使用
   1)响应式API暴露（observable）
   2)轻松识别组件重新渲染原因

新特性：
1）fragments，组件支持有多个根节点（template中可以有多个根节点）
2）suspense
3）teleport

33.Vue3所使用的Composition API与Vue2使用的Options API有什么不同

1）在逻辑组织和逻辑复用方面，Composition API是优于Options API
2）因为Composition API几乎是函数，会有更好的类型推断
3）Composition API对tree-shaking友好，代码也更容易压缩
4）Composition API中见不到this的使用，减少了指向不明的情况
5）如果是小型组件，继续使用Option API也是十分友好的

34.Vue3中的tree-shaking的特性，举例说明

tree-shaking是一种通过清除多余代码方式来优化项目打包体积的技术；简单来说，就是在保持代码运行结果不变的前提下，去除无用的代码。
tree-shaking无非就是做了两件事：
1)编译阶段利用ES6 Module判断哪些模块已经加载（是基于ES6模板语法（import与exports），主要是借助ES6模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量）
2)判断哪些模块和变量未被使用或者应用，进而删除对应代码

作用：
1)减少程序体积
2)减少程序执行事件
3)便于将来对程序架构进行优化