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

目录
  • 前言
  • 一、watch是什么
  • 二、watch不同的实际使用场景开发案例
    • 1.场景1:加载完成后登录监听
    • 2.场景2:前面不同的选择框,影响下面的不同的选择框的选项内容
    • 3.场景3:深度监听
    • 4.场景4:赋值使用
    • 5.场景5:改变标记的true和false
    • 6.场景6:页面的跳转
  • 补充:watch简写形式
  • 总结

前言

本文主要是积累一下在使用前端的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开发内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue watch监听使用的几种方法

    目录 一.watch使用的几种方法 二.watch中的immediate与handler和deep属性 一.watch使用的几种方法 1. 通过 watch 监听 msg 数据的变化. watch: { msg(oldValue, newValue) { console.log(oldValue) console.log(newValue) } } 2.通过 watch 监听 obj数据的变化.(深度监听 deep) data() { return { obj: { 'name': "赵&quo

  • Vue中watch清除过期副作用的案例详解

    在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用 通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化 就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数

  • Vue不能watch数组和对象变化解决方案

    目录 Vue 能监听数组的情况 Vue 无法监听数组变化 举例无法监听数组变化的情况 Vue 无法监听数组变化的解决方案 Vue 监听对象 Vue 设置监听对象 Vue 能监听数组的情况 Vue 监听数组和对象的变化(vue2.x) vue 实际上可以监听数组变化,比如: 直接 = 赋值 data () { return { watchArr: [], }; }, watch: { watchArr (newVal) { console.log('监听:' + newVal); } }, cre

  • Vue watch原理源码层深入讲解

    目录 添加依赖 触发依赖 总结 由于我在从源码看vue(v2.7.10)的computed的实现原理中详细的讲解过computed的实现,本篇跟computed的原理类似.我就带大家简单分析一下. 添加依赖 代码如下: <template> <div> {{a}} <button @click="addModule">新增</button> </div> </template> <script> exp

  • vue中watch监听不到变化的解决

    目录 watch监听不到对象内部的变化 解决方法: watch的handler方法的两个参数值相同 解决方法: 全部代码 watch监听不到对象内部的变化 有的时候vue会出现这种现象,无法监听到复杂对象内部的变化:当对象里面原本有某一个属性,并对这个属性操作时,watch是可以监听到当前属性的变化的.但是,若对象里面本没有这个属性的时候,在操作时将属性添加进去,同时包括之后对这个属性的操作,watch是都检测不到的.这是因为vue的watch会在初始化的时候通过object.definePro

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

  • Vue3中watch的使用详解

    目录 Vue3中watch的详解 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 Vue3中watch的详解 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from

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

    目录 前言 一.watch是什么 二.watch不同的实际使用场景开发案例 1.场景1:加载完成后登录监听 2.场景2:前面不同的选择框,影响下面的不同的选择框的选项内容 3.场景3:深度监听 4.场景4:赋值使用 5.场景5:改变标记的true和false 6.场景6:页面的跳转 补充:watch简写形式 总结 前言 本文主要是积累一下在使用前端的watch开发过程中遇到的问题点和经验. 一.watch是什么 根据本人的理解,它就是一个监听器,就是说监听的某个数据发生了变化,那么它就会执行相对

  • Android开发学习笔记之通过API接口将LaTex数学函数表达式转化为图片形式

    本文将讲解如何通过codecogs.com和Google.com提供的API接口来将LaTeX数学函数表达式转化为图片形式.具体思路如下: (1)通过EditText获取用户输入的LaTeX数学表达式,然后对表达式格式化使之便于网络传输. (2)将格式化之后的字符串,通过Http请求发送至codecogs.com或者Google.com. (3)获取网站返回的数据流,将其转化为图片,并显示在ImageView上. 具体过程为: 1.获取并格式化LaTeX数学表达式 首先,我们在这个网站输入LaT

  • Python中关于logging模块的学习笔记

    python的logging模块 python提供了一个日志处理的模块,那就是logging. 导入logging模块使用以下命令: import logging logging模块的用法: 1.简单的将日志打印到屏幕上 import logging logging.debug("This is debug message") logging.info("This is info message") logging.warning("This is war

  • 关于Vue.js一些问题和思考学习笔记(1)

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里是可以支持的,因为angular采用脏检查的方式实现双向绑定,vue和avalon都是采用setter和getter实现双向绑定 例,如下代码在一秒后不会显示出"xxcanghai"的字样 <div id="app"> <h1>{{obj.tex

  • 关于Vue.js一些问题和思考学习笔记(2)

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变量,因为此时vm还未返回,依然处于Vue内部构造函数过程中,遂只能使用this来代替vm. 若要使用typescript,可使用以下方法来实现代码智能感知 vm = vm || this; 另:其他不能用vm变量,只能使用this变量的地方,都可以通过此方法来获得Typescript的智能感知和代码

  • vue中控制mock在开发环境使用,在生产环境禁用方式

    目录 vue控制mock在开发环境使用,在生产环境禁用 说下原因 解决方案 vue中使用mock(常用方式) 前期准备 安装axios和mock.js插件 在main.js中引入 编写mock.js 调用 成功 vue控制mock在开发环境使用,在生产环境禁用 说下原因 mock拦截所有的axios请求,根据请求,做出相应的响应.平时前后端分离开发,我们使用mock获得相应的数据,但当和后端联调的时候,不禁用mock,就无法获得后端数据. 解决方案 第一步.我们设置mock在开发developm

  • vue.js源代码core scedule.js学习笔记

    vue.js 源代码学习笔记 core scedule.js,供大家参考,具体内容如下 /* @flow */ import type Watcher from './watcher' import config from '../config' import { callHook } from '../instance/lifecycle' import { warn, nextTick, devtools } from '../util/index' const queue: Array<W

  • vue中的provide/inject的学习使用

    前言 最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据.而不是局限于只能从当前父组件的prop属性来获取数据. 下面我们来验证下猜想: first:定义一个parent component <template

  • Android开发学习笔记 Gallery和GridView浅析

    一.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery还可以和ImageSwitcher组件结合使用来实现一个通过缩略图来浏览图片的效果. Gallery常用的XML属性 属性名称 描述 android:animationDuration 设置布局变化时动画的转换所需的时间(毫秒级).仅在动画开始时计时.该值必须是整数,比如:100. android:gravity 指定在对象的X和Y轴上如何放置内

  • Python中Random和Math模块学习笔记

    由于最近经常使用到Python中random,math和time``datetime模块, 所以决定花时间系统的学习一下 1. math模块 math中的函数不可以用于太过复杂的数的运算, 如果需要复杂数的运行最好使用cmath模块中同名函数, 如果想要更加高级的数学功能,可以考虑选择标准库之外的numpy和scipy模块,它们不但支持数组和矩阵运算,还有丰富的数学和物理方程可供使用 1.1. 数学常量 math.pi 这个数学常量等于 3.141592... math.e 这个数学常量 e =

随机推荐