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()里面,在主页面拿到调用就行了

三。 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