vue3.0的发布的已经有三个月，三个月中作者尝试着vue3.0的完成一些模块的开发。这里分享一下vue3.0为什么有人说不太好用。

一、完全抛弃options api的作风，改用composition api的写法

了解vue2.0的都知道vue2.0是基于配置参数的风格去开发的，所有的代码都会已配置为入口，如data, method, computed, filter,watch这样的操作都是需要配置入口的，但是vue3.0完全抛弃这样的做法。采用了类似react的hooks的作风，如reactive, coumputed这个的hooks，这中做法无疑是让vue2.0但有不熟悉react的玩家很是头疼，同时在代码编写过程增加了一些工作量。但是普通的玩家是无法明白尤雨溪为什么采用这样的方式来改造vue2.0，其实在vue3.0的创作初期，尤雨溪依然是采用的options api开发，但是进过社区的反馈和实际的实验，发现options api在一些情况下会造成问题，当项目庞大时，无法做代代码的抽离和调度，虽然在vue2.0中提供了mixins这样的options但是大量的mixins的使用会造成代码的混乱和难以维护性，因此尤雨溪还是才做用了类似react的composition api的作风。如果使用react的hooks来开发的玩家就知道react为什么要推崇hooks而放弃类组件模式开发。这里vue3.0的道理是一样的。

二、那么为什么那么多人去吐槽vue3.0呢

举个例子

vue2.0的写法

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="handleClick">{{count}}{{doubble}}</button>
  </div>
</template>
<script>
	export default{
		data(){
			return {
				count : 0,
				doubble : 0
			}
		},
		creaed(){
			
		},
		updated(){
			this.doubble = this.count * 2;

		},
		methods : {
			handleClick(){
				this.count++;
			}
		}
	}
</script>

vue3.0的做法

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="handleClick">{{state.count}}{{state.doubble}}</button>
  </div>
</template>
<script>
	import {reactive, computed} from "vue"
	export default{
		setup(){
			const state = reactive({
			count: 0,
			doubble: computed(() => state.count * 2)
		});

		function handleClick() {
			state.count++;
		}
		return {
			state,
			handleClick
		}
		}
		}
</script>

从上面两个看起来vue3.0的好麻烦，实现一个点击器的功能居然需要这么麻烦的操作才可以完成。只能说你太小看composition的厉害了，太假可以是试想一下，有一天你的一个页面需要完成的功能非常复杂，可能会出现几十个定义的参数或者是方法，你还想使用option这样的方式么？定义一段超级长的参数和方法人、，然后过两天就忘完了。但是如果你是用composition的方式你会发现你完全可以将hooks进行抽离出去进行统一管理。

例如以下操作

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="handleClick">{{state.count}}{{state.doubble}}</button>
  </div>
</template>
<script>
	import {useCount} from "../hooks/useCount.js"
	export default{
		setup(){
			let {state, handleClick} = useCount();

			return {
				state,
				handleClick
			}
		}
	}
</script>

<!--hooks的文件useCount.js-->
import {
	reactive,
	computed
} from "vue"

export function useCount() {
	const state = reactive({
		count: 0,
		doubble: computed(() => state.count * 2)
	});

	function handleClick() {
		state.count++;
	}
	return {
		state,
		handleClick
	}
}

这样看起来将来项目越来越庞大，option越来越多的时候，我们是不是很好解决杂乱的问题了？虽然这样的做法从开发时间上增加了工作量，但是我们从软件工程里的角度上思考，这样的做法不仅治理了软件开发杂乱出现的焦油坑同时有效的提高健壮性和可维护性，提高代码的质量。

三、配套的一些工具

由于composition api的诞生导致了vue其他工具的使用也存在了一些差异，我们之前使用vuex，vue-router的时候都是基于option的方式，那么现在使用的话都是需要基于composition的方式开发，看一个案例。

import { createStore } from "vuex";
<!--采用函数传参的方式创建vuex的对象-->
export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
});
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";
<!--采用函数传参的方式创建router对象-->
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

export default router;

总结

其实这么看来vue3.0在设计思想上的确更近一步，解决了跟多工程呢规划的事情，但是也增加了开发者的学习成本和编写的实用性，对于一个完成高质量的项目我的介意还是需要使用vue3.0，那么你的项目不要需要考虑性能或者是工程化，健壮性和维护性那么你依旧可以考虑使用vue2.0，但是如果你想要尝试composition api但是依然想要使用vue2.0composition-api这里面提供了在vue2.0也可以使用composition的开发方式