在构建html元素时，vue倾向于模板方式，而react则完全使用javascript的编程能力，但vue也具备完全编程的能力（与react一样使用JSX和createElement渲染函数）。所以，当vue使用完全编程方式时，与react可以说是大同小异。

学习react的时候，有一个核心思想：组件就是函数，元素就是值。这对于vue来说也是完全适用的，唯一的区别在于两者的限制和使用条件不同。

JSX

JSX是JavaScript的一个扩展语法，本质是createElement渲染函数的语法糖。react和vue在JSX语法上几乎一致，区别在于属性值的传入上。

react的JSX语法更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

vue的JSX则使用了一个Babel 插件使其更贴近HTML模板语法，vue对大小写不敏感（实际上vue会将所有属性值转换为小写）。
例如，tabIndex会转化成tabindex，className会转化为classname。

特例，对于属性class，react应写成className，vue应写成class

react引入了Fragments使得react可以有多个根元素，vue没有此功能，只能是单一根元素

元素渲染

react的文档中提到了

元素是构成 React 应用的最小砖块。

const element = <h1>Hello, world</h1> // 定义元素...
render () {return <div>{element}</div> // 使用元素
}

react将元素当作值来对待，你可以直接使用，也可以先赋值给某个变量，然后再使用。
这一点在vue的文档中虽然没有明确提到，但依然适用，vue也可以先将元素赋值给某个变量，然后在适当的位置使用该变量。

两者在使用时的区别在于：

react可以在任意位置（组件内和组件外）定义元素并使用
vue只能在组件内定义元素（只要是组件内，任意位置都可以，render函数内，data数据或者其他位置），在组件外定义则会报错（h is not defined）

报错原因：网上找到的一个说法是vue中组件外没有上下文联系，找不到渲染函数。
思来想去只能归结于两者的渲染机制不同（没有依据，瞎猜的

vue完全编程方式与react在书写和运用上的异同相关推荐

android gravity参数,android - 如何以编程方式设置layout_gravity？
android - 如何以编程方式设置layout_gravity? 我的问题很简单, 如何以编程方式设置我的按钮layout_gravity? 我在互联网上发现了这个,但它只是抛出了一个Nullpo ...
使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
我决定切换到 Vue.js，不再使用 React！
点击上方的终端研发部,右上角选择"设为星标" 作者:Gwenael P,前端工程师,Vue.js的狂热者译者:弯月现在,Vue.js 在 Github 上得到的星星数已经超过了 ...
论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...
[react] react的书写规范有哪些
[react] react的书写规范有哪些 React元素必须使用大驼峰命名的方式组件尽量命名,方便进行调试 JSX尽量用小括号包起来,更加直观,防止换行时出错个人简介我是歌谣,欢迎和大家一起交 ...
函数式编程在Redux/React中的应用
本文简述了软件复杂度问题及应对策略:抽象和组合:展示了抽象和组合在函数式编程中的应用:并展示了Redux/React在解决前端状态管理的复杂度方面对上述理论的实践.这其中包括了一段有趣的Redux推导 ...
关于vue.js 编程导航的使用：实现路由配置和跳转页面
本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且当前操作,除了路由跳转以外,还会有一些别的附加操作(比如执 ...
vue.js 编程导航，如何传递参数？
本文主要讲述:关于vue.js 编程导航,如何传递参数? 本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且 ...
使用反应路由器V4以编程方式导航
本文翻译自:Programmatically navigate using react router V4 I have just replaced react-router from v3 to v ...

vue完全编程方式与react在书写和运用上的异同

目录

JSX

元素渲染

vue完全编程方式与react在书写和运用上的异同相关推荐

最新文章

热门文章