【QCon】精华内容上线92%,全面覆盖“人工智能+”的典型案例!>>> 了解详情
写点什么

从 React 切换到 Vue.js

  • 2020-02-18
  • 本文字数:2818 字

    阅读完需:约 9 分钟

从React切换到Vue.js

React 和 Vue 的关系有点像可口可乐和百事可乐,你在 React 中做的很多事情都可以在 Vue 中完成。当然这里也存在一些重要的概念差异,其中一些反映了 Angular 对 Vue 的影响。


我将在本文中重点介绍两者的差异部分,帮助你快速入门 Vue 并立刻提高生产力。

React 和 Vue 之间有多少区别?

React 和 Vue 的相似之处比它们的差异更多:


  • 两者都是用于创建 UI 的 JavaScript 库。

  • 它们都快速而轻巧。

  • 两者都具有基于组件的架构。

  • 两者都使用一个虚拟 DOM。

  • 两者都可以放入单个 HTML 文件中,也可以用作更复杂的 Webpack 设置中的一个模块。

  • 两者都有独立的,但常用的路由和状态管理库。


它们最大的区别是 Vue 通常使用一个 HTML 模板文件,而 React 完全使用 JavaScript。Vue 还具有 可变的状态,以及用于重新渲染的一套自动化系统,称为“反应性”。


下面我们一点点来分析。

组件

在 Vue.js 中可以使用 API 方法.component 声明组件,该方法接受一个 id 和一个定义对象这两个参数。你可能会注意到 Vue 组件有很多眼熟的部分,还有一些陌生的部分:


Vue.component('my-component', {  // Props  props: [ 'myprop' ],  // Local state  data() {    return {      firstName: 'John',      lastName: 'Smith'    }  },  // Computed property  computed: {    fullName() {      return this.firstName + ' ' + this.lastName;    }  },  // Template  template: `    <div>      <p>Vue components typically have string templates.</p>      <p>Here's some local state: {{ firstName }}</p>      <p>Here's a computed value: {{ fullName }}</p>      <p>Here's a prop passed down from the parent: {{ myprop }}</p>    </div>  `,  // Lifecycle hook  created() {    setTimeout(() => {      this.message = 'Goodbye World'    }, 2000);  }});
复制代码

模板

你会注意到该组件具有一个 template 属性,该属性是 HTML 标记的一个字符串。Vue 库包含一个编译器,该编译器在运行时将一个模板字符串转换为一个 render 函数。这些渲染函数由虚拟 DOM 使用。


如果你想定义自己的 render 函数,则可以选择 不使用 模板。你甚至可以使用 JSX。但切换到 Vue 上还要这样做的话,就好像是去意大利旅游却不吃披萨一样……

生命周期 Hooks

Vue 中的组件也有与 React 组件类似的生命周期方法。例如,当组件状态就绪,而组件还没有挂载到页面之前,将触发 created 这个 hook。


这里两者的一大区别是:React 中的 shouldComponentUpdate 在 Vue 里没有等效存在。由于 Vue 是有反应系统的,所以这里不需要它。

重渲染

Vue 的一个初始化步骤是遍历所有数据属性并将它们转换为 getters 和 setters。看看下面的截图,这里显示了 message 数据属性是怎样添加 get 和 set 函数的:



Vue 添加了这些 getter 和 setter 后,就能在访问或修改属性时启用依赖项跟踪和更改通知。

可变状态

要更改 Vue 中组件的状态,你不需要一个 setState 方法,只需进行突变即可:


// Reactthis.setState({ message: 'Hello World' });// Vuethis.message = 'Hello World';
复制代码


当 message 的值因突变而更改时,将触发其 setter。set 方法将设置新值,此外还将执行第二项任务,告诉 Vue 某个值已更改,并且页面中依赖该值的部分都可能需要重渲染。如果将 message 作为一个 prop 传递给任何子组件,则 Vue 就知道它们依赖这个 prop,并且它们也会自动重渲染。这就是为什么在 Vue 组件上不需要 shouldComponentUpdate 方法的原因。

主模板

谈到主模板文件,Vue 更像 Angular 一些。与 React 一样,Vue 需要挂载在页面中的某个位置:


<body>  <div id="root"></div></body>// ReactReactDOM.render('...', document.getElementById('root'));// Vuenew Vue({  el: '#root'});
复制代码


但是与 React 不同,你可以继续添加到这个主 index.html 上,因为它是你的根组件的模板。


<div id="root">  <div>You can add more markup to index.html</div>  <my-component v-bind:myprop="myval"></my-component></div>
复制代码


还有一种方法是使用 x-template 或 inline-template 之类的 HTML 功能在 index.html 中定义子组件模板。但这并不是最佳实践,因为它会将模板与其他组件定义区隔开来。

指令

同样,与 Angular 一样,Vue 允许你通过“指令”使用逻辑增强模板。这些指令是带有 v- 前缀的特殊 HTML 属性,例如 v-if 用于条件渲染,v-bind 将一个表达式绑定到一个常规 HTML 属性上。


new Vue({  el: '#app',  data: {    mybool: true,    myval: 'Hello World'  }});<div id="app">  <div v-if="mybool">This renders if mybool is truthy.</div>  <my-component v-bind:myprop="myval"></my-component></div>
复制代码


分配给指令的值是一个 JavaScript 表达式,因此你可以引用数据属性,包括三元运算符等。

工作流

尽管有社区构建的 create-vue-app,但 Vue 没有正式的 create-react-app 等效选项。


官方对启动项目的推荐是 vue-cli。它可以生成任何内容,从带有一个 HTML 文件的简单项目到完全打包的 Webpack + 服务端渲染项目皆可:


$ vue init template-name project-name
复制代码

单 HTML 文件项目

Vue 的创建者 Evan You 将他做的这个项目称为一种“渐进式框架”,因为它可以针对复杂的应用向上扩展,也可以针对简单的应用向下缩放。


当然 React 也可以做到这一点。区别在于,Vue 项目通常使用较少的 ES6 特性,且很少使用 JSX,因此通常无需添加 Babel。另外,Vue 库全部都放在一个文件中,没有对应于 ReactDOM 的单独文件。


将 Vue 添加到单 HTML 文件项目中的方法如下:


<script src="https://unpkg.com/vue/dist/vue.js"></script>
复制代码


注意:如果你不打算使用模板字符串,也就是说不需要模板编译器的话,就可以使用一个较小的 Vue 版本,称为 vue.runtime.js。它的大小约为 20KB。

单文件组件

如果你乐意使用 Webpack 之类的工具向项目中添加构建步骤,则可以利用 Vue 的单文件组件(SFC)。这些文件具有.vue 扩展名,并将组件模板、JavaScript 配置和样式封装在一个文件中:


<template>  <div class="my-class">{{ message }}</div></template><script>  export default {    data() {      message: 'Hello World'    }  }</script><style>  .my-class { font-weight: bold; }</style>
复制代码


毫无疑问,这是 Vue 的最酷特性之一,因为你获得了一个带有 HTML 标记的“适当”模板,但是也包含了 JavaScript,因此模板和逻辑之间没有尴尬的分离。


有一个名为 vue-loader 的 Webpack 加载器,它负责处理 SFC。在构建过程中,模板将转换为一个渲染函数,因此这是在浏览器中使用精简的 vue.runtime.js 构建的完美用例。

Redux 和其他

Vue 还有一个基于 Flux 的状态管理库,称为 Vuex。同样,它与 Redux 类似,但也有很多区别。


我没时间在这篇文章中讲解,因此将在下周的文章中具体介绍相关内容。请关注我的更新:


http://vuejsdevelopers.com/newsletter/?jsdojo_id=dz_srv

原文链接

Switching From React to Vue.js


2020-02-18 10:113623
用户头像
小智 让所有人认同的文字称不上表达

发布了 408 篇内容, 共 376.1 次阅读, 收获喜欢 1972 次。

关注

评论

发布
暂无评论
发现更多内容

元宇宙跟区块链的关系是什么呢?

CECBC

java高级用法之:在JNA中将本地方法映射到JAVA代码中

程序那些事

Java Netty 程序那些事 3月月更

Linux之export命令

入门小站

使用云服务器ECS搭建DoH服务的开发实践

阿里云弹性计算

征文投稿 玩转ECS DoH

架构实战营 第6期 模块一课后作业

火钳刘明

#架构实战营 「架构实战营」

Apache Flink 在国有大型银行智能运营场景下的应用

Apache Flink

大数据 flink 编程 流计算 实时计算

校招项目应该如何准备才能高大上一点

宇宙之一粟

项目 3月月更

区块链的支付模式

CECBC

XSS跨站脚本攻击漏洞修复技巧

喀拉峻

网络安全

前Cisco思科首席工程师、Webex AV1第一人Thomas加入微帧科技!

微帧Visionular

视频编码

在线JSON转YAML工具

入门小站

工具

3大能力升级,云效+钉钉,让研发协作更「敏捷」

阿里云云效

云计算 阿里云 云原生 钉钉 敏捷研发

创业圈的哈利波特们注意了!霍格沃兹即将开学,谁是你的魔法导师?

创业邦

AI与开源的碰撞 昇思MindSpore TechDay直播来袭

Geek_2d6073

Go性能优化小技巧

jinjin

Go 性能优化

在线Js,JavaScript压缩格式化工具

入门小站

工具

网络安全 Kali web安全 基于SMB协议收集信息

学神来啦

Linux 运维 网络安全 WEB安全 kali Linux

OpenMLDB 在线模块架构解析

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征平台

电阻电路的等效变换(Ⅰ)

謓泽

3月月更

Tapdata加入PolarDB开源数据库社区

阿里云数据库开源

数据库 阿里云 开源 开源数据库 polarDB

华为云企业级Redis揭秘第17期:集群搭载多DB,多租隔离更降本

华为云数据库小助手

GaussDB GaussDB ( for Redis )

我们如何建立一套无参考视频质量评价体系?

声网

视频 Dev for Dev VQA

5G区块链技术让建水紫陶有了“身份证”

CECBC

数字人民币为全球CBDC监管提供宝贵经验

CECBC

2022年作为一个中年程序员写给35岁的自己

Linux服务器开发

c++ 程序员 架构师 Linux服务器开发 Linux后台开发

新思科技加速安全软件开发,推出Code Sight插件标准版

InfoQ_434670063458

软件开发 新思科技 可信软件 IDE环境 Code Sight

英特尔X钉钉:以智能协作驱动数字办公发展

科技新消息

配置Mountebank环境-mountebank系列(2)

Bruce Talk

技术 敏捷 Agile

3步排查,3步优化,探针性能损耗直降44%

TakinTalks稳定性社区

Java 性能分析 探针 性能提升 性能损耗

【Zeekr_Tech】TARA攻击树分析方法论

Zeekr_Tech

信息安全 极氪

大数据,不只“懂数”,更要“懂行”

鼎道智联

大数据

从React切换到Vue.js_GMTC_Anthony Gore_InfoQ精选文章