Vue和React的使用场景和深度有何不同

Posted 2023-05-17

参考技术A 首先，其实Vue也完全可以全量赋值的，唯一需要的小优化就是给v-repeat列表一个track-by属性，提示一下如何判断两个对象是否是同一份数据。如果是没有复杂交互的列表，可以直接track-by="$index"原地复用DOM元素。合理使用track-by的情况下，Vue甚至可以比React更快（这里渲染的是100*5的数据表，每一帧都是全量新数据赋值）：dbmon(Vue)dbmon(react)在超大量数据的首屏渲染速度上，React有一定优势，因为Vue的渲染机制启动时候要做的工作比较多，而且React支持服务端渲染。需要指出的一点：React的VirtualDOM也不是不需要优化的。复杂的应用里你有两个选择1.手动添加shouldComponentUpdate来避免不需要的vdomre-render；2.Components尽可能都用pureRenderMixin，然后采用Flux结构+Immutable.js。其实也不是那么简单的。相比之下，Vue由于采用依赖追踪，默认就是优化状态：你动了多少数据，就触发多少更新，不多也不少。说起Flux架构，FB提供的标准实现非常繁琐，所以社区的各种造轮子版本层出不穷，目前其实还没有找到一个公认的最佳实践，而且大部分新Flux实现都引入了很多函数式概念，你如果对函数式编程不熟悉，光搞清楚那些概念就得花很久。如果你真的理解了Flux，你又会发现其实Vue也是可以应用Flux架构的。比如optimizely/nuclear-js·GitHub是一个Flux变种，他们就是同时把这个东西用在了React和Vue上面。再谈谈开发风格的偏好：React推荐的做法是JSX+inlinestyle，也就是把html和CSS全都整进javascript了。Vue的默认API是以简单易上手为目标，但是进阶之后推荐的是使用webpack+vue-loader的单文件组件格式：依然是熟悉的HTML和CSS，但是可以放在一个文件里。而且你还可以使用你想要的预处理器，比如LESS,Jade,Coffee,Babel，都可以。然后扯一扯模板vs.JSX的问题。JSX在逻辑表达能力上虽然完爆模板，但是很容易写出凌乱的render函数，不如模板看起来一目了然。当然这里也有个人偏好的问题。React的社区/组件生态比Vue大很多，这个是很显然的。不过说实话我很少见到现成的第三方组件完全符合我的要求。最后，使用场景上来说：React配合严格的Flux架构，适合超大规模多人协作的复杂项目。理论上Vue配合类似架构也可以胜任这样的用例，但缺少类似Flux这样的官方架构。小快灵的项目上，Vue和React的选择是开发风格的偏好。对于需要对DOM进行很多自定义操作的项目，Vue的灵活性优于React。---更新：楼下有些回答说Vue的核心是MVVM双向绑定，然后就直接跳跃到了『不适合持续工程迭代』的结论。且不说这样的跳跃太草率，这样的看法本身对于双向绑定的理解也是有偏差的。表单的双向绑定，说到底不过是（value的单向绑定+onChange事件侦听）的一个语法糖，你如果不想用v-model，像React那样处理也是完全可以的。另一方面，组件间的数据传递，Vue默认是单向的，和React一样。React本身并不存在所谓的『单向数据流』，这完全是Flux引入的概念。其核心还是在于避免组件的localstate，强调把state抽取出来进行集中的管理。没有Flux的情况下React一样会有状态难以管理的问题，其根源在于在哪里存放和管理state，和双向绑定没有本质联系。那难道Vue就不能这样管理状态吗？当然是可以的，Vue现在可以通过egoist/revue·GitHub和Redux进行配合，也可以用Vue专属的状态管理架构Vuex:vuejs/vuex·GitHub，『单向数据流』并没有React吹的那么神，直接因为这一点就觉得Vue不适合工程迭代，完全站不住脚。

Web前端面试葵花宝典(2022版本)——Vue篇

文章目录

• 🌳前言
• 🌴正文
• • • 1.有使用过Vue吗？说说你对Vue的理解
    • 2. 说说 Vue 的优缺
    • 3. Vue 和 React 有什么不同？使用场景分别是什么？
    • 4.什么是虚拟 DOM？
    • 5. vue 如何监听键盘事件？
    • 6. watch 怎么深度监听对象变化
    • 7.删除数组用 `delete `和 `Vue.delete` 有什么
    • 8. watch 和计算属性(computed)有什么区别？
    • 9. Vue 双向绑定原
    • 10. v-model 是什么？
    • 11.在 vue 项目中如何引入第三方库（比如 jQuery）？有哪些方法可以
    • 12.说说 `Vue\\React\\angularjs\\jquery`的
    • 13. `Vue3.0` 里为什么要用 `Proxy API` 替代 `defineProperty API`？
    • 14. Vue3.0 编译做了哪些优化
    • 15. Vue 3.0 新特性 —— Composition API 与 `React.js` 中 Hooks的异同点
    • 16. Vue3.0 是如何变得更快的？（底层，源码）
    • 17. vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？
    • 18. 说说你对 proxy 的理
• 🎃专栏分享：

🌳前言

本篇文章主要写的是前端高频面试题（Vue框架）篇，如果有需要http/html/浏览器方面面试题的小伙伴们，请在下方评论区留言，有时间我会去更新一篇相关面试题。如果没有的话，下一篇预备更新 前端高频面试题（React框架）篇

面试题参考文章：

• 【Web前端面试】葵花宝典（2022版本）—— CSS篇
• 【Web前端面试】葵花宝典 （2022版本）—— JS篇（上）
• 【Web前端面试】葵花宝典(2022版本)—— JS篇（下）
• 【JavaScript】中this指向相关的经典面试题
• 【JavaScript】作用域提升面试题（详解）

🌴正文

1.有使用过Vue吗？说说你对Vue的理解

Vue 是一个构建数据驱动的渐进性框架，它的目标是通过 API 实现响应数据绑定和视图更新。

2. 说说 Vue 的优缺

• 优点：
  1. 数据驱动视图，对真实 dom 进行抽象出 virtual dom（本质就是一个 js 对象）， 并配合 diff 算法、响应式和观察者、异步队列等手段以最小代价更新 dom，渲染页面
  2. 组件化，组件用单文件的形式进行代码的组织编写，使得我们可以在一个文 件里编写 html\\css（scoped 属性配置 css 隔离）\\js 并且配合 Vue-loader 之后，支 持更强大的预处理器等功能
  3. 强大且丰富的 API 提供一系列的 api 能满足业务开发中各类
  4. 由于采用虚拟 dom，让 Vue SSR(服务器渲染) 先天就足
  5. 生命周期钩子函数，选项式的代码组织方式，写熟了还是蛮顺畅的，但仍然 有优化空间（Vue3 composition-api）
  6. 生态好，社区活跃
• 缺点：
  1. 由于底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8 及以下浏览器
  2. CRS(浏览器端渲染) 的先天不足，首屏性能问题（白屏）
  3. 由于百度等搜索引擎爬虫无法爬取 js 中的内容，故 spa(单页Web应用) 先天就对 seo(搜索引擎优化) 优化心有余力不足

3. Vue 和 React 有什么不同？使用场景分别是什么？

1. Vue 是完整一套由官方维护的框架，核心库主要有由尤雨溪大神独自维护，而 React 是很多库由社区维护，曾经一段时间很多人质疑 Vue 的后续维护性， 似乎这并不是问题。
2. Vue 上手简单，进阶式框架，白话说你可以学一点，就可以在你项目中去用一点， 你不一定需要一次性学习整个 Vue 才能去使用它，而 React，恐怕如果你这样会面对项 目束手无策
3. 语法上 Vue 并不限制你必须 es6+完全 js 形式编写页面，可以视图和 js 逻辑尽可能分 离，减少很多人看不惯 React-jsx 的恶心嵌套，毕竟都是作为前端开发者，还是更习惯于 html
4. Vue 轻量级，适合移动端中小型项目，但Vue 完全可以应对复杂的大型应用，甚 至于说如果你 React 学的不是很好，写出来的东西或根本不如 Vue 写的，毕竟 Vue 跟着 官方文档撸就行，自有人帮你规范，而 React 比较懒散自由，可以自由发挥
5. Vue 在国内人气明显胜过 React，这很大程度上得益于它的很多语法包括编程思维更符合国人思想。

4.什么是虚拟 DOM？

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在 react，vue 等技术出现之前， 我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然 后修改样式行为或者结构，来达到更新 UI 的目的。

这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果 建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象 的属性变化要比查询 dom 树的性能开销小

5. vue 如何监听键盘事件？

1. @keyup.方法

   <template>
       <input
           ref="myInput"
           type="text"
           value="hello world"
           autofocus
           @keyup.enter="handleKey"
       />
   </template>
   <script>
   export default 
       methods: 
           handleKey(e) 
               console.log(e)
           ,
       ,
   
   </script>
   
   

2. addEventListener方法

   <script>
   export default 
       mounted() 
           document.addEventListener('keyup', this.handleKey)
       ,
       beforeDestroy() 
           document.removeEventListener('keyup', this.handleKey)
       ,
       methods: 
           handleKey(e) 
               console.log(e)
           ,
       ,
   
   </script>
   

6. watch 怎么深度监听对象变化

deep 设置为 true 就可以监听到对象的变化

<script>
let vm = new Vue(
    el: '#first',
    data:  msg:  name: '北京'  ,
    watch: 
        msg: 
            handler(newMsg, oldMsg) 
                console.log(newMsg)
            ,
            immediate: true,
            deep: true,
        ,
    ,
)
</script>

7.删除数组用 delete 和 Vue.delete 有什么

• delete：只是被删除数组成员变为 empty / undefined，其他元素键值不变
• Vue.delete：直接删了数组成员，并改变了数组的键值（对象是响应式的，确保 删除能触发更新视图，这个方法主要用于避开 Vue 不能检测到属性被删除的限制）

8. watch 和计算属性(computed)有什么区别？

• 通俗来讲，既能用computed实现又可以用 watch 监听来实现的功能，推荐用 computed， 重点在于 computed 的缓存功能

• computed 计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量 改变时，计算属性也会跟着改变；

• watch 监听的是已经在 data 中定义的变量，当该变量变化时，会触发 watch 中的方法。

9. Vue 双向绑定原

Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。

10. v-model 是什么？

一则语法糖，相当于 v-bind:value="xxx" 和 @input，意思是绑定了一个 value 属性的值， 子组件可对 value 属性监听，通过$emit('input', xxx)的方式给父组件通讯。自己实现 v-model 方式的组件也是这样的思路。

11.在 vue 项目中如何引入第三方库（比如 jQuery）？有哪些方法可以

方法一：绝对路径直接引入

1. 在index.html 中用 script 引入：<script src="./static/jquery-1.12.4.js"></script>
2. 然后在 webpack 中配置 external : externals: 'jquery': 'jQuery
3. 在组件中使用时 import ：import $from 'jquery'

方法二：在 webpack 中配置 alias

1. resolve: extensions: ['.js', '.vue', '.json'], alias: '@': resolve('src'), 'jquery': resolve('static/jquery-1.12.4.js')
2. 在组件中使用时 import ：import $from 'jquery'

方法三：在 webpack 中配置 plugins

1. plugins: [ new webpack.ProvidePlugin( $: juqery)]
2. 全局使用，但在使用 eslint 情况下会报错，需要在使用了 $ 的代码前添加 /* eslint-disable*/ 来去掉 ESLint 的检查

12.说说 Vue\\React\\angularjs\\jquery的

• jquery与另外几者最大的区别是，jquery是事件驱动，其他两者是数据驱动。

• jquery业务逻辑和 UI 更改该混在一起， UI 里面还参杂这交互逻辑，让本来混乱的逻 辑更加混乱。

• Angular，Vue 是双向绑定，而 React 不是

• 其他还有设计理念上的区别等

13. Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？

响应式优化。

a. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。 Vue2.x 中的响应式实现正是基于 defineProperty 中的 descriptor，对 data 中的属性做了遍 历 + 递归，为每个属性设置了 getter、setter。 这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因，在 Vue 中使用 下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到 setter 监 听的，这是 defineProperty 的局限性。

b.Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这 就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须 先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

c. 响应式是惰性的 在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要 递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这 无疑会有很大的性能消耗。 在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的 处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响 应式，简单的可以说是按需实现响应式，减少性能消耗。

14. Vue3.0 编译做了哪些优化

1. 生成 Block tree
2. slot 编译优化
3. diff 算法优化

15. Vue 3.0 新特性 —— Composition API 与 React.js 中 Hooks的异同点

1. React.js 中的 Hooks 基本使用

   React Hooks 允许你 “勾入” 诸如组件状态和副作用处理等 React 功能中。Hooks 只能 用在函数组件中，并允许我们在不需要创建类的情况下将状态、副作用处理和更多东西 带入组件中。 React 核心团队奉上的采纳策略是不反对类组件，所以你可以升级 React 版本、在新组 件中开始尝试 Hooks，并保持既有组件不做任何更改。

2. Vue Composition API 基本使用

   Vue Composition API 围绕一个新的组件选项 setup 而创建。setup() 为 Vue 组件提供了 状态、计算值、watcher 和生命周期钩子。 并没有让原来的 API（Options-based API）消失。允许开发者 结合使用新旧两种 API （向下兼容）

3. 原理：

   • React hook 底层是基于链表实现，调用的条件是每次组件被 render 的时候都会顺序执行 所有的 hooks。

   • Vue hook 只会被注册调用一次，Vue 能避开这些麻烦的问题，原因在于它对数据的响 应是基于 proxy 的，对数据直接代理观察。（这种场景下，只要任何一个更改 data 的地 方，相关的 function 或者 template 都会被重新计算，因此避开了 React 可能遇到的性能 上的问题）。

   • React 中，数据更改的时候，会导致重新 render，重新 render 又会重新把 hooks 重新注 册一次，所以 React 复杂程度会高一些

16. Vue3.0 是如何变得更快的？（底层，源码）

1. diff方法优化

   Vue2.x 中的虚拟 dom 是进行全量的对比。 Vue3.0 中新增了静态标记（PatchFlag）：在与上次虚拟结点进行对比的时候，值对比 带有 patch flag 的节点，并且可以通过 flag 的信息得知当前节点要对比的具体内容化。

2. hoistStatic静态提升

   Vue2.x : 无论元素是否参与更新，每次都会重新创建。

   Vue3.0 : 对不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用。

3. cacheHandlers 事件侦听器缓存

   默认情况下 onClick 会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一 个函数，所以没有追踪变化，直接缓存起来复用即可。

17. vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？

看实际情况，一般在 created（或 beforeRouter） 里面就可以，如果涉及到需要页面加载 完成之后的话就用 mounted。

在 created 的时候，视图中的 html 并没有渲染出来，所以此时如果直接去操作 html 的 dom 节点，一定找不到相关的元素

而在 mounted 中，由于此时 html 已经渲染出来了，所以可以直接操作 dom 节点，（此时 document.getelementById 即可生效了）。

18. 说说你对 proxy 的理

vue 的数据劫持有两个缺点:

1. 无法监听通过索引修改数组的值的变化

2. 无法监听 object 也就是对象的值的变化

所以 vue2.x 中才会有$set 属性的存在

proxy 是 es6 中推出的新 api，可以弥补以上两个缺点，所以 vue3.x 版本用 proxy 替换 object.defineproperty

---

🎃专栏分享：

Vue框架相关面试题就更新到这里啦，相关 Web前端面试题 可以订阅专栏哦🥰
专栏地址：《面试题》

---

⏳ $名言警句：说能做的做说过的$

✨ $原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$