面试官:聊聊你知道的Vue与React的区别

最近面到很多大公司的时候,哈士奇都会碰到一个很尴尬的问题,很多大公司的技术栈都是React,但是哈士奇学的是Vue,其实从本质上来说两者都是比较优秀的前端框架,所以有些面试官会问到Vue和React的区别。哈士奇认真整理了一些自己所知道的Vue和React的区别,给大家分享分享。

1. 模板语法 vs JSX

  • Vue 使用类似于 HTML 的模板语法,例如:<template> 标签中的模板。

模板示例(Vue)

html 复制代码
<template>
  <div>
    <h1>Hello, world!</h1>
    <my-button @click="handleClick">Click me</my-button>
  </div>
</template>

<script>
// 定义一个按钮组件
Vue.component('my-button', {
  template: '<button><slot></slot></button>'
});

export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>
  • React 使用 JSX(JavaScript XML), 它是一种将 HTML 直接嵌入到 JavaScript 代码中的语法。它和Java中的xml十分类似

JSX 示例(React)

jsx 复制代码
import React from 'react';

// 使用 JSX 描述一个简单的按钮组件
const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

// 在 JSX 中使用 Button 组件
const App = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      <h1>Hello, world!</h1>
      <Button onClick={handleClick}>Click me</Button>
    </div>
  );
};

export default App;

2. 组件通信

  • 在 Vue 中,组件间的通信可以使用 props(父子组件通信)、 <math xmlns="http://www.w3.org/1998/Math/MathML"> e m i t (子父组件通信)、 emit(子父组件通信)、 </math>emit(子父组件通信)、attrs/$listeners(特性和事件继承)、Vuex/Pinia(用于大型应用中的状态管理)等。

Vue 组件通信示例

父组件向子组件传递数据:

vue 复制代码
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Message from parent'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

子组件接收数据:

vue 复制代码
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>
  • 在 React 中,组件间的通信主要依赖于 props 和 context,但对于更复杂的应用,可以使用 Redux 或其他状态管理库。

React 组件通信示例

父组件向子组件传递数据:

jsx 复制代码
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent message="Message from parent" />
      </div>
    );
  }
}

export default ParentComponent;

子组件接收数据:

jsx 复制代码
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.message}</p>
      </div>
    );
  }
}

export default ChildComponent;

这些示例演示了父组件向子组件传递数据的过程。在 Vue 中,通过 props 将数据传递给子组件;在 React 中,也是通过 props 实现相同的功能。

3. 状态管理

  • Vue 有 Vuex/Pinia 用于管理应用的状态。
  • React 没有官方的状态管理库,但有许多第三方库可供选择,最流行的是 Redux。

4. 生命周期

  • Vue 组件有自己的生命周期钩子,如 createdmountedupdateddestroyed 等,用于在组件生命周期的不同阶段执行代码。
  • React 组件也有生命周期方法,如 componentDidMountcomponentDidUpdatecomponentWillUnmount 等,但在 React 16.3 版本后,一些生命周期方法已被标记为过时,推荐使用新的生命周期方法或 React Hooks。

5. diff算法

React 的 diff 算法

  • React 使用的是一种基于层级的 diff 算法。当组件的状态发生变化时,React 会比较当前虚拟 DOM 树和上一次更新后的虚拟 DOM 树的差异。
  • React diff 算法会首先比较两棵树的根节点,如果节点类型不同,则直接删除旧节点,插入新节点;如果节点类型相同,则会继续比较子节点。(核心思想是比较和替换节点)
  • React diff 算法会使用一些启发式的策略来尽可能地减少 DOM 操作的次数,例如将子节点列表转换为 key-value 的形式,以便更快地找到需要更新的节点。
  • (必须有key)

Vue 的 diff 算法

  • Vue 使用的是一种双端比较的 diff 算法。当组件的状态发生变化时,Vue 会同时从新旧虚拟 DOM 树的两端开始比较,找到最长的相同子序列。
  • Vue 会对动态节点进行跟踪,如果一个节点在新旧虚拟 DOM 中位置发生了变化,Vue 会尽可能地将其移动到新的位置,而不是删除和重新插入节点。(核心思想是移动复用节点)
  • Vue 的 diff 算法会通过动态规划的方式找到最优的更新策略,以最小化 DOM 操作的次数。
  • (可以没有key)

6.不同的页面更新的通知方式

  • Vue在进行数据更改以后,会主动向使用者声明更改信息。
  • React需要通过diff算法计算得知数据变化。

7.不同的监听方式

早期的Vue与React

  • Vue中进行页面更新主要是通过给每个元素设置事件监听器(Watcher),在页面发生更改以后,对应的监听器会去更改展示页面。
  • React在原本的浏览器Dom上创建了虚拟Dom,通过原来的Dom与虚拟Dom进行对比,进行修改。(早期的Diff算法出现)

当然,随之而来的是不同的性能问题,Vue体现在大量Watcher带来的性能损耗上面,React则体现在Diff算法的计算时间中(虚拟Dom计算时间过长会导致卡顿)

不同的解决方式

  • Vue借鉴了React的监听方式,形成了组件内部元素(diff算法计算)+组件之间(Watcher监听)的方式进行监听,降低了Watcher的数量,也减少了diff大量计算带来的卡顿问题。
  • React则使用了时间分片(允许多个任务轮流使用处理器)的思想,在使用diff算法检查页面更改的过程中,分片进行使用浏览器,在浏览器的空闲时间计算Diff,如果浏览器有高级的需求则让浏览器继续使用进行渲染。

总结

这是哈士奇所了解的有关Vue和React的区别的全部内容了,其实前面几点都是比较常见,大家都能随时说的出来的区别,但是后面的几点需要仔细去了解它们的原理,希望能够帮助到大家!!!如果哈士奇哪里写的不对,欢迎大家批评指正!!!

相关推荐
Myli_ing26 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风29 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟38 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript