React && Vue

React和Vue概念性问题总结

Vue相关

• Vue 实例创建销毁的过程,就是生命周期.
• created 表示完成组件数据、属性等的初始化,此时组件的DOM结构还没有创造出来
• 组件DOM结构的创建在mounted中已经完成了
• Vue3对比Vue2性能上优化很多, 为了支持IE11, Vue3发布了一个支持旧观察者机制和新Proxy的构建(最新版vue已不再支持ie11)
• Vue3新增了 Composition API, 会兼容之前的写法, 是可选的
• Vue3 更好的ts支持, Vue3用ts重写的, 而且许多软件包将被解耦,使其更加模块化
• Vue3 中新增的setup(),会在beforeCreate之前执行
• 在Vue3中,v-model默认是modelValue prop的传递以及update:modelValue事件的展开
• Vue3是通过createApp创建实例的

React相关

• React中某个元素的key可以确定其在同级元素中具有唯一性.
• setState可以是同步,也可以是异步(在合成时间和钩子函数中是异步, 在原生事件和setTimeout中是同步的)
• React中refs 使我们可以访问DOM元素或者组件实例
• React组件中常见的形式有函数和类两种形式.
• React中函数式组件可以通过hooks达到类式组件生命周期函数的效果
• React废除了componentWillMount这个生命周期

相关

• Vue和React都是javascript库
• Vue和React都使用虚拟DOM
• Vue和React项目中都可以使用JSX
• JSX是一种JavaScript的语法扩展
• React中的JSX是React.createElement(component, props,…,children)函数的语法糖
• 在Vue中不可以直接使用JSX语法, 需要安装插件

  @vue/babel-preset-jsx
  @vue/babel-helper-vue-jsx-merge-props
  

• React中不强制使用JSX
• React17版本中,使用JSX不用再导入React库
• Vue3中新增的setup()函数,不要再setup()函数中使用this (没有this, undefined)
• Vue中data必须是函数(对象地址问题)

  Vue组件可能存在多个实例,如果使用对象形式定义data, 则会导致他们公用一个data对象,那么状态的变更将会影响所有组件实例,这是不合理的.所以采用函数定义的形式, 在源码部分 ==/src/core/instance/state/js - initData()==时会返回全新的data对象,有效的避免多实例之间状态污染问题. 而在vue根实例创建过程则不存在该限制,也是因为根实例只能有一个,无需担心这种情况

• React中类组件必不可少的一个函数式render
• createElement 函数式JSX编译之后使用的创建React Element的函数, 而cloneElement则是用于赋值某个元素并传入新的props

Vite

• Vite是一种新型的前端构建工具, 它可以显著改善前端的开发体验
• vite支持旧浏览器
• Vite具有了快速冷启动.按需编译.模块热更新等优良特质
• Vite支持JSON、SASS、TS、组件库