江苏龙网

  1. 首页 > 人文 > >

吊带公主裙|为什么我们放弃了Vue？Vue和React深度比较( 三 )


  • 芋头（React技术栈 ， 推荐使用）
  • wepy（Vue技术栈 ， 强烈不推荐使用）
  • uni-app（Vue技术栈 ， 可以使用）
这些小程序开发框架都是基于Vue或React的二次封装 ， 简化小程序开发 。
vue的一些周边库和Vue强绑定 ， 而不是一个独立的js库的形式存在 。 导致代码难以理解 ， 相关的Bug ， 问题也带到了二次开发的框架中 。
这种强依赖导致的问题会给以后项目升级 ， 迁移带来很多问题 。 比如vuex作为Vue的官方推荐的状态管理方案 ， 只能在Vue的上面使用 ， 不能在阵营上面使用 。 Redux的状态管理在阵营上用的多 ， 这个却能用在Vue之上 。 类似的问题很多 ， 你会发现React周围的东西可以用于Vue ， Vue的东西不能用在React上 。
如果你觉得这个问题不严重 ， 当你把Vue代码迁移到小程序wepy框架时发现 ， wepy不支持Vuex（bug异常多） ， 状态管理只能用redux ， 欲哭无泪 。 同样的问题 ， 如果你用的是React相关技术栈 ， 反应迁移到Taro小程序框架异常简??单 ， 而且可以一次性生成微信小程序 ， 支付宝小程序 ， 字节跳动小程序等 ， 代码占用率高 。
APP生态weex ， rn这块我没有比较好的实践经验 ， 其中一些生产方案必须慎重考虑 。 rn比weex成熟这点是明确的 。
逻辑代码组织
吊带公主裙|为什么我们放弃了Vue？Vue和React深度比较Vue三种组件写法对比（Js部分）对象API 29行import Vue, { PropOptions } from 'vue'interface User {firstName: stringlastName: number}export default Vue.extend({name: 'YourComponent',props: {user: {type: Object,required: true} as PropOptions},data () {return {message: 'This is a message'}},computed: {fullName (): string {return `${this.user.firstName} ${this.user.lastName}`}}})API类17行import { Vue, Component, Prop } from 'vue-property-decorator'interface User {firstName: stringlastName: number}@Componentexport default class YourComponent extends Vue {@Prop({ type: Object, required: true }) readonly user!: Usermessage: string = 'This is a message'get fullName (): string {return `${this.user.firstName} ${this.user.lastName}`}}功能API 25行import Vue from 'vue'import { computed, value } from 'vue-function-api'interface User {firstName: stringlastName: number}interface YourProps {user?: User}export default Vue.extend({name: 'YourComponent',setup ({ user }: YourProps) {const fullName = computed(() => `${user.firstName} ${user.lastName}`)const message = value('This is a message')return {fullName,message}}})
吊带公主裙|为什么我们放弃了Vue？Vue和React深度比较React两种组件写法对比（Js部分）class组件34行import React, { Component } from 'react';interface P {}interface S {}class Index extends Component{constructor(props: Readonly) {super(props);this.state = {};}static defaultProps = {};componentDidMount() {}componentDidUpdate(prevProps: Readonly) {}componentWillUnmount() {}render() {return ();}}export default Index;函数组件15行import React, { FC } from "react";interface Props {}const Index: FC= (props) => {// js 代码return ();};Index.defaultProps = {};export default Index;


推荐阅读


上一篇：三好先森|K30至纪念版ufs2.1简单数据对比K30 Pro

下一篇：幻化成蝶|相比高端机，为何有些人宁愿选择更换更为频繁的千元机？