Vue3.0面世已近一两年了，诸位小伙伴们都有精心安排上自学没，想控制技术高阶的老师急忙自学出来吧。
假如你对vue3并非不光介绍，或是急于去自学，能看一看上面的撷取，期望对我们略有协助！
建立工程项目
具体来说预览vue-cli到新一代版。
npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset工程项目变动
vue2.x和vue3.x产品目录内部结构没甚么变动，而已许多采用方式变了，所以预设是加装了TypeScript。
vue2.x采用import Vue from vue，接着采用new Vue()建立示例。vue3.x则是import {createApp} from vue，透过createApp()来建立示例了。
这就引致了许多的应用程序或UI模块库无法采用，比如说ElementUI、iView…
vue3.x需要引入createRouter建立地址路由器。createWebHashHistory对应之前的hash，createWebHistory对应之前的history。
vue3.x中状态管理的建立方式变为了createStore 。代码内部结构更精简合理。
这个是vue3.x变动最大的地方，vue2.x数据存放在data，方式在methods，透过this去调用。但是在vue3.x这些都没了，所有的代码全部都在 setup 里面实现，你页面需要哪些方式，就要在当前页引入即可。
vue3.x的生命周期也发生了许多变动，我们能看上面这张图。
在工程项目中具体的采用方式。
采用介绍
setupsetup有两个参数 props 和 context
props：接受父模块传的值context：vue3.x里面建立一个响应式的基础类型，只能监听number、String、boolean等简单的类型，该属性一旦发生更改，都会被检测到。
<template> <div>{{count}}</div> // 1 </template> import {ref} from “vue”setup(){const count =ref(0) count.value++ //必须要加.value return{ count //一定要return 出去 } }reactive 声明响应式数据对象<template> <div>{{count.name}}</div> // 857 </template> import {reactive} from “vue” setup(){ constcount =reactive({name:369 }) count.name=857 return{ count } }computed 计算属性computed 和vue2.x差不多，而已采用前要先引入。
透过ref或是reactive去建立多个响应式的值，当任何一个值发生改变的时候，立即触发这个函数。
watchEffect方式会返回一个stop handle停止监听。
好了，就先分析到这么多，后续也会陆续撷取许多新变动。欢迎一起交流讨论！
