刚刚做完一个小项目,用时大概一周左右,我迫不及待的用上了vue3,开发体验还是非常的好。自从有了组合API,逻辑代码也可以复用了,大家可以开始写祖传的代码了。
一。 搭建项目架子
具体的项目搭建和这一篇差不多,就是多加一个TypeScript,还没学过TypeScript的同学不要走,因为我也是第一次用,我愿称之为anyScript。vue3对TypeScript的支持比2.x好太多了。你也不用写class 组件,和正常的template开发没什么两样。
清风皓月:vue3.0(ant design vue 2.0) 实践记录zhuanlan.zhihu.com二。项目介绍
1。这个项目是一个数据展示页面,前端通过http轮询的方式拿到plc实时数据,然后花里胡哨的展示出来。
2. 项目的一周画页面用了5天,css用的less,写的烦烦的
3. 逻辑全是写在setup里,通过函数的方法,这样页面看起来非常简洁。就行下面这样,历史数据的逻辑写在history()里面,在主页面拿到调用就行了
三。 setup常用方法介绍
- 路由跳转
const
2. 监听路由跳转(注释:在组件中观察,通过wacth)
const
3.计算属性
这里拿个例子来讲,你去相亲了,有一个姑娘,当你的资产大于1000万时,开心,当你资产小于1000万时伤心。
<
我们在setup里写个计算属性
const
这里有很多姑娘,有的要求你资产1000万,有就是看上你的人了,钱不钱无所谓。
<
这里你不能每个人都写一个计属性了,我们可以写个传参数的计算属性,返回一个方法
const
4. watch
在姑娘们计算你的资产时,你也咋观察她们,你心里默默念到,想让我有车有房月入过万,宁配?。
这里你看中了一个姑娘,你一直在观察她的表情,万一她给你眉目传情一下,这不就有戏了
我们先来定义下这个意中人
const
让我们来观察她的神色
watch
当她神情变化时,你才能捕捉到她的眉目传情,万一她上来就对你有意思呢,我们一上来就要捕捉她的表情
watch
其实,不光是表情能代表她的对你的意思,万一她人都向你走来了,你还在呆呆的观察她的表情,岂不是太呆了。让我们来重新定义下她
const
下面我们从神情、动作、说话来观察她,我们要开启深度监听
watch(goddess,(newLook,oldLook) => {
if(newLook.look==="眉目传情"){
}
if(newLook.action==="像你走来"){
}
if(newLook.action==="像你打招呼"){
}
},{immediate: true,deep: true//深度监听})
其实,还有一种思念叫念念不忘
有一个姑娘,你只见了一面,变对她念念不忘了,你只需这样做:
watchEffect(() => console.log(goddess.look))
自此以后她神情的变化,你就了如指掌了
5. vuex 和2.x相同
const
6. 轮询方法
轮询我用的是setTimeout+递归的方法,我封装了一个函数
*
暂时就写这么多
代码地址
https://github.com/huoqingzhu/vue3-ts-antgithub.com