文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中watch的实际开发学习笔记

2022-11-13 19:29

关注

前言

本文主要是积累一下在使用前端的watch开发过程中遇到的问题点和经验。

一、watch是什么

根据本人的理解,它就是一个监听器,就是说监听的某个数据发生了变化,那么它就会执行相对应的函数。它主要使用在哪些场景呢,比如:一个数据影响着多个数据的业务。

  watch:{  // 当这个workType发生改变时,就是1个数据的改变,就会影响到type5和foll的改变
    'queryParams.workType':function (newName,oldName){
      if(newName==1){
        this.type5 = this.type3,
        this.foll = true
      }else if(newName==2){
        this.type5 = this.type4,
        this.foll = false
      }
    }
  },

二、watch不同的实际使用场景开发案例

1.场景1:加载完成后登录监听

代码如下:

  watch: {
    isLoading (newVal, oldVal) { //1. 原来的值,和现在的值,是否有变化,如果有变化,触发这个函数
      console.log('2 isLoading newVal is ', newVal, ' , oldVal is ', oldVal)
 
      //2. 当加载完成时, 还需要判断用户是否已登录
      const username = getLoginedUsername(this.$store)
      if (username != undefined && username != null) {
        // 已登录时, 跳转首页
        toHomePage(this)
      }
    }
  },
 
  computed: {
    isLoading () {
      return isLoading(this.$store)
    }
  },
 
import { isLoading, getLoginedUsername } from 'utils/utils'

2.场景2:前面不同的选择框,影响下面的不同的选择框的选项内容

1.data的代码如下:

 data() {
    return {
      verifyData: this.propData,
      editBoxShow: false,
 
      type3: [{
        worksRegion: '0',
        label: '牛奶'
      },{
        worksRegion:"1",
        label: "面包"
      },
        {
          worksRegion:"3",
          label: "水果"
        }
      ],
      type4: [{
        worksRegion: '0',
        label: '炸鸡'
      },{
        worksRegion:"1",
        label: "汉堡"
      },{
          worksRegion:"2",
          label: "可乐"
        },
        {
          worksRegion:"3",
          label: "北京烤鸭"
        }
      ],
      type5:[],
     
      queryParams:{
        id:"",
        workType:'',//1开发 , 2 测试 
        foll:true
      },
 
    };
}

2.watch的监听

  watch:{  // 当这个workType发生改变时,就是1个数据的改变,就会影响到type5和foll的改变
    'queryParams.workType':function (newName,oldName){
      if(newName==1){
        this.type5 = this.type3,
        this.foll = true
      }else if(newName==2){
        this.type5 = this.type4,
        this.foll = false
      }
    }
  },

3.场景效果描述

比如:      第1个选框:开发;

                第2个选框: A,B,C

比如:      第1个选框:测试;

                第2个选框: A,B,C,D

  由上所示,当第1个选框,选择“开发”选项时,则第2个选框出现的选项内容为ABC;当第1个选框,选择“测试”选项时,则第2个选框出现的选项内容为ABCD;这时就实现了当初的上一个不同选项出现下一个不同的选项内容的效果了。

原理描述:它是主要是通过判断queryParams的里面的workType的参数的变化,来进行监听的,如果当用户点了开发这个选项,那么这个workType的newName就是1了,所以就触发了watch里面的这个函数了,那么这里就可以进行业务方面的处理即可。

3.场景3:深度监听

说明:
 
handler: 固定方法触发
deep: 开启深度监听
immediate: 页面初始化时handler立即执行一次
 
  data(){
    return {
      user: {
        userNo: "",
        sex: ""
      }
    }
  },
 
  // 监听整对象
  watch: {
        // 监听整个对象,对象里的每个属性值的变化都会执行handler,执行后获取的 newVal 值和 oldVal 值是一样的
    user: {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
 
 watch: {
       // 监听对象的某个属性,被监听的属性值发生变化就会执行函数,但获取的 newVal 值和 oldVal 值不一样
    'user.userNo': {
      handler(newVal, oldVal){
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
 
 

4.场景4:赋值使用

  watch: {
    traysNos (newVal, oldVal) {
      if ((newVal && !oldVal) || (newVal && oldVal && newVal !== oldVal)) {
        this.filterDeliverysOutLists = []
        this.deliverysOutsList = this.fullsDeliverysOutsLists
      }
    }
  },

5.场景5:改变标记的true和false

   data () {
    return {
      loading: false,
      submitsCheck: true,
    }
  },
 
 watch: {
    'order.traysNos' (val) {
      if (val == null || val == '') {
        this.submitsCheck = true
      } else if (val) {
        this.submitsCheck = false
      }
    }
  },
 

6.场景6:页面的跳转

  watch: {
    reservesNo (newVal, oldVal) {
      if ((newVal && !oldVal) || (newVal && oldVal && newVal !== oldVal)) {
        this.reservesNo = newVal // 获取到新值
        this.$router.replace({  // 跳转,注意,这种跳转,是不可以回退的
          query: {
            reservesNo: this.reservesNo  // 传新值
          }
        })
        this.findOrderNo()  // 执行其他的函数
      }
    }
  },

这个主要是深度监听的使用,如何监听某个对象中的某个属性的变化,就是上面这个案例,看业务需求来进行使用。

补充:watch简写形式

如果只是监听单个简单的数据,使用watch的简写形式就可以满足需求。

代码如下:

<script>
export default {
  name: "Home",
  data() {
    return {
      text: ""
    };
  },
  watch: {
    text(newVal, oldVal) {
      
    }
  },
};
</script>

总结

本文主要是积累一下在使用前端的watch开发过程中遇到的问题点和经验。

到此这篇关于vue中watch的实际开发笔记的文章就介绍到这了,更多相关vue中watch开发内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯