vue3中watcheffect_vue3+TS+ant2.0 实践指南

刚刚做完一个小项目,用时大概一周左右,我迫不及待的用上了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()里面,在主页面拿到调用就行了

da25f30afabba6c1af0bbfe7df6f0a94.png

三。 setup常用方法介绍

  1. 路由跳转
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-ant​github.com
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值