Vue2,Vue3,React的对比

最新推荐文章于 2024-05-28 10:54:31 发布

SpringHeather

最新推荐文章于 2024-05-28 10:54:31 发布

阅读量2.1k

点赞数 4

分类专栏：前端文章标签： java

本文链接：https://blog.csdn.net/u010247622/article/details/120349483

版权

1.网页依赖

Vue2：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Vue3：

<script src="https://unpkg.com/vue@next"></script>

React：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

2.安装和脚手架

添加镜像和cnpm

npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue2：

$ cnpm install vue
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
$ cd my-project
$ cnpm install
$ cnpm run dev
#打包
$ cnpm run build

Vue3：

$ cnpm install vue@next
# 全局安装 vue-cli
$ cnpm install -g @vue/cli
$ cnpm install -g @vue/cli-init
$ vue init webpack hello-vue3
# 这里需要进行一些配置，默认回车即可
#或者使用 vue create hello-vue3
# select vue 3 preset
$ cd hello-vue3
$ cnpm install
$ cnpm run dev
#打包
$ cnpm run build

React：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
安装依赖：cnpm install 
启动项目：cnpm start 
编译：cnpm run build

3.生命周期

Vue2:

beforeCreate ：数据还没有挂载呢，只是一个空壳

created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数

beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated

mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了

beforeUpdate:重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染

updated:数据已经更改完成，dom也重新render完成

beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...

destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后

常用的生命周期:created,mounted,beforeDestory

Vue3：

说明：由于Vue2中的beforeCreate和created生命周期的执行几乎与VUE3中的setup在同一时间执行，所以在Vue2中写在created和beforeCreate中的代码可以直接写在setup()方法中

总之：

beforeCreate()和created()构造函数都应该写在setup()函数中
修改了部分钩子函数的名称
BeforeDestroy变成了onBeforeUnmount,destroyed变成了onUnmounted
新增了两个调试用钩子函数

onRenderTracked,onRenderTriggered

例子：

<template>
  <div>Hello World</div>
</template>
<script>
  export default {
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
  };
</script>

React:

1) react初始化的顺序是，constructor然后是componentWillMount（相当于vue 的beforeMounted）然后是 render渲染函数再然后是componentDidMount（相当于vue的mounted ）

2) 更新的时候：componentWillUpdate、render、componentDidUpdate（跟vue一样平时没在用到更新的钩子函数）

shouldComponentUpdate，其实在更新的时也会触发这个钩子函数，你不写默认就是true，数据改变会执行更新的钩子函数，如果你要组织他更新的话就写这个钩子函数写成false,意思就是不让更新.

3) 销毁的时候： componentWillUnmount（vue的话一般用beforeDestroy用来清除定时器等）

这里还有一个比较少用的钩子函数，

在父组件里面改变props传值的时候触发的：componentWillReceiveProps

例如，组件需要以props中的某个属性作为与服务器通信时的请求参数，当这个属性值发生更新时，组件自然需要重新与服务器通信。不难发现 componentWillReceiveProps非常适合做这个工作。

react16.4后使用了新的生命周期，使用getDerivedStateFromProps代替了旧的componentWillReceiveProps及componentWillMount。使用getSnapshotBeforeUpdate代替了旧的componentWillUpdate。

最常用的还是

componentDidMount（对vue2--mounted，vue3-onMounted）.componentWillUnmount（对vue2--beforeDestroy，vue3-onBeforeUnMount）

例子：

function component

function MyReactComponent() {
  // componentDidMount
  useEffect(() => {}, []);
  // componentDidUpdate + componentDidMount
  useEffect(() => {});
  // componentWillUnmount
  useEffect(() => {
    return () => {...}
  }, []);
  // 在渲染之后但在屏幕更新之前同步运行
  useLayoutEffect(() => {}, []);
  return <div>Hello World</div>;
}

//Class component
class MyReactComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {}
  componentDidMount() {}
  shouldComponentUpdate(nextProps, nextState) {}
  getSnapshotBeforeUpdate(prevProps, prevState) {}
  componentDidUpdate(prevProps, prevState) {}
  componentWillUnmount() {}
  render() {
    return <div>Hello World</div>;
  }
}

4.基本目录

vue2：

├── build/               # Webpack 配置目录
├── dist/                # build 生成的生产环境下的项目
├── src/                 # 源码目录（开发都在这里进行）
│   ├── assets/            # 放置需要经由 Webpack 处理的静态文件
│   ├── components/        # 组件
│   ├── filters/           # 过滤器
│   ├── store/    　　　　 # 状态管理
│   ├── routes/            # 路由
│   ├── services/          # 服务（统一管理 XHR 请求）
│   ├── utils/             # 工具类
│   ├── views/             # 路由页面组件
│   ├── app.js             # 启动文件
│   ├── index.html         # 静态基页
├── static/              # 放置无需经由 Webpack 处理的静态文件
├── .babelrc             # Babel 转码配置
├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc            # ESLint 配置
├── .gitignore           # （配置）需被 Git 忽略的文件（夹）
├── package.json         # （这个就不用多解释了吧）
├── package-lock.json    # （以记录当前状态下实际安装的各个npm package的具体来源和版本号)

Vue3：

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件