最近vue3发布了 带你们掌握下vue3的快速使用

安装最新版vue-cli   npm install -g @vue/cli
vue -V 查看vue的版本 
vue create建立项目
手动选择功能,选择router vuex 和 css预处理,其它选择默认
命令行进入项目   这里 vue-cli 建立的是vue2.6版本的项目
vue add vue-next 升级咱们的vue到3.0版本
能够看到成功的安装了 vue-cli-plugin-vue-next插件
vscode 打开咱们的项目 打开package.json文件
能够看到vue升级到3.0beta版本
vue-router vuex 也是 4.0 alpha版本
vue3.0模版的编译插件 vue-next插件
打开项目入口文件main.js 
能够看到新版本咱们使用  createApp 建立vue实例
以前vue2.6版本使用new Vue构造方法建立实例
use方法挂载 router和store  mount方法挂载到id为app的节点
打开router.js  同步组件home   异步组件about
createRouter建立路由对象 以前vue2.6版本使用 new Router构造方法建立实例
打开home组件  看到home组件使用了helloworld自组件
打开helloworld组件 将组件精简一下
npm run serve运行项目
浏览器访问咱们的项目   img是咱们的logo  文本信息是helloworld组件的内容
二。打开helloworld组件
组件的msg属性绑定再h1标签上
咱们使用 vue3 api声明组件的state状态
导入reactive方法
reactive 数据响应式函数，内部经过es6的proxy api 来实现的，
setup 方法  用来替代 vue2.6中的 beforeCreate created
给你们提供一张vue2.6 和vue 声明周期的对应关系图
定义一个count state  定义自加方法来改变状态
定义button绑定方法    
使用computed方法计算属性  计算count 二倍的数值
使用watch方法监控状态的改变
能够看到state方法改变触发了咱们的watch
经过ref方法关联咱们的节点
只有在组件 onMounted 后才能使用节点
咱们改变下节点的颜色
watch方法 能够经过参数value查看改变的值
三。切换到about路由
咱们在about组件里演示vuex的使用
打开store.js  store里的定义跟以前vue2.6同样
咱们定义一个count状态
定一个改变count的方法inc
打开about组件
vuex提供useStore方法来引用咱们的store
咱们定一个一个计算属性关联到store的state
绑定咱们的count 能够看到store里的count展现在了页面上
commit mutation来改变咱们的store状态

总体演示就到这里 望你们有所收获

文首发微信公众号：ITvlog 公众号里有vue3的极速视频操做

欢迎扫描二维码关注公众号，天天有3-5分钟的视频 让你极速学习