1.Node环境配置
推荐使用nvm 管理node.js Vue3.0及后续版本均在12x后的node版本中运行,nvm具体操作可以异步度娘
2.Vue3.0构建方式
官方给出了两种直接构建方式,前提是在cli4x之后,若脚手架版本过低可以@next升级后使用
1.> vue create xxx 传统构建方式 有npm 驱动
2.> npm install -g create-vite-app
使用 ‘create-vite-app xxx’ 的方式
区别在于传统的 create xx 方式 利用了webpack
编译周期会很长需要加载各类编译资源
而使用‘vite’构建则会利用ES6import发送请求去加载文件的特性,拦截这些请求, 做一些预编译, 省去webpack冗长的打包时间
3.环境支持 对TypeScript 有兴趣的可以在安装时选择,Vue3.0及element plus 版本支持
推荐选择第三中自定义模板安装,前两种分别对应的是2,及3版本的标准模板
和我们在Vue2.0下使用该选项的时候一样我们可以自由选择需要的工具
选择完成之后我们在这里选3.x Pre 版本安装
构建完成后外层目录其实和之前是一样的没有任何变化
展开之后我们看到原来.js文件现在都被.ts取代
打开router 发现路由创建方式已经完全被修改,import VueRouter from 'vue-router'
已经被import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
取代
传统的构建方式也被取代
进入正题我们开始分析组件的构成
除去函数式,及class 等构件方式我们最熟悉的其实也就是模板化的构建方式
在使用了TS之后我们需要特别注意的是 组件的类型需要被约束,为了支持强类型的需要我们不能直接使用export default
方式去构建驱动层,数据层; 而是需要使用defineComponent
类的帮助
export function defineComponent(options: unknown) {
return isFunction(options) ? { setup: options } : options
}
我们可以看出defineComponent
是针对Vue3.0下setup()
的封装及返回一个可以校验类型的options
对象
这样就解决了TS下需要类型强校验的问题
接下来我们看数据的定义,使用了TS之后我们在使用前需要对数据类型做定义 在steup中我们来定义需要使用的所有方法,数据,及各类变量;没有了以前的data()
我们需要定义数据变量的时候需要借助
reactive
reactive函数为我们构建并返回了一个响应式数据对象,当然我们也可以使用toRefs 的方式
将所有reactive中的对象转成普通对象并且每个对象的属性现在都含有了ref,都被变成了可以由ref获取的响应式数据
Vue3.0中不再含有data(),数据使用也不在是this.xxx的形式
这里我们要区分开来两种定义数据的形式,即
reactive <==>ref
前面我们提到了reactive
形式创建的数据是一个响应式数据且是由reactive
函数返回的,而由ref
创建的我们称之为普通对象,ref
创建的数据比较单一 const row =ref('1')
,那么在修改时需要使用的是row.value=xx
而reactive
可以直接使用定义的state.xxx
来完成修改
import { useRouter, useRoute } from 'vue-router';
组件内的路由现在由这两个函数分别对应返回
使用时const router:any=useRouter();
router.push({
path:'xx'
})
必须要明确的是同所有强类型语言一样,支持TS的Vue3.0 也为我们提供了两个可以方便使用的依赖注入
import {provide,inject} from 'vue';
私有化的声明保证了当前被provide,inject
使用的内容只能在当前setup()
活动组件内生效
provide()
和inject()
可以实现嵌套组件之间的数据传递,这两个函数只能在setup()中使用。父级组件中使用provide()函数向下传递,子组件中使用inject()获取上层传递过来的数
学习Vue3.0的核心重点放在Composition API(组合式)中 后续完成会开源整体