Kros的博客 Kros的博客
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云

Kros

凡心所向,素履以往,生如逆旅,一苇以航
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云
  • CSS

  • JavaScript

  • 工具

  • Vue

    • vue批量引入组件
    • vue中watch用法
      • vue使用基础JSX语法
      • vue首页白屏
      • vue长列表优化
      • 模板文件中script、template、style存在必要性
      • popup弹窗组件
      • 使用$mount和extend扩展vue
      • 扩展toast合并popup(按需加载)
      • canvas实现弧形进度条
      • vue中使用CSS Modules
      • vue实现无限轮播图
      • vue半圆形菜单
      • 纯CSS实现圆形进度条
      • v-model简单实现
      • vue带箭头下拉框
      • vue事件修饰符
      • vue鼠标悬浮显示提示文字
      • vue添加发布版本号方法
      • vue配置全局样式文件
      • vue在env development中设置全局变量不生效
      • vue引入less或scss全局变量
      • vue中使用Keepalive
      • vue2为什么只支持一个根节点
      • vue打包优化分析工具—webpack-bundle-analyzer
      • vue使用echarts(按需加载)
      • echarts柱形图重合堆叠
      • vue使用draggable实现多列拖拽(解决空列不能拖拽问题)
      • vue禁止三方库打包到bundle中
      • npm run serve运行背后的思考
      • vxe-table树结构不允许insert
      • vue组件延迟加载
      • 多页面应用配置
      • vue项目常用优化
      • vue实现拖动拼图验证码
      • vue虚拟dom
      • canvas心形动画
      • canvas绘制玫瑰曲线
      • element表单validateField验证部分字段
      • element日期选择限制今天以后并精确到小时
      • 前端使用JSEncrypt和node-rsa进行rsa加密传输和接收解密
      • elementui日期选择器生日只选择月和日不选择年并隐藏年份
      • el-upload组件第二次点击手动submit时不生效
      • element表单内输入框使用@keyup enter native回车时会刷新页面
    • antdv踩坑记录

    • Vue3

    • 前端
    • Vue
    kros
    2020-11-18

    vue中watch用法

    说起watch大家应该都比较熟悉,watch的用法就是监听变量的变化然后触发事件。其实在实际的使用中watch是用的比较少的,因为我们程序的的机制一般都是进行某些操作后主动触发的,如果你的watch事件过多那么一定是你的程序设计有问题。废话不多说,这里主要介绍watch使用。

    # 基础用法

    data(){
    	return {
    		inputValue: ''
    	}
    }
    watch: {
    	inputValue(){
    		// dosomething
    	}
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    # 使用handler属性

    watch: {
    	inputValue: {
    		handler: //可以是一个函数,也可以是methods中定义的方法
    	}
    }
    
    1
    2
    3
    4
    5

    # 深度监听deep

    methods: {
    	handlerM(){ }
    },
    watch: {
    	inputValue: {
    		handler: 'handlerM'
    		deep: //true或false,一般对象无法监听属性变化,使用deep就可以监听内部		       //属性变化,但无法确认具体是哪个属性变化,返回结果任是整个对象
    	}
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    # 初值触发

    watch: {
    	inputValue: {
    		immediate: //true或false
    		//开启会在变量初始化的时候触发事件,也就是说监听会在初始化阶段之前执行,在此情况下,watch会先于created执行
    	}
    }
    
    1
    2
    3
    4
    5
    6
    #vue
    上次更新: 2025/09/05, 8:09:00
    vue批量引入组件
    vue使用基础JSX语法

    ← vue批量引入组件 vue使用基础JSX语法→

    最近更新
    01
    Find the next perfect square
    09-05
    02
    Regex validate PIN code
    09-05
    03
    Find the odd int
    09-05
    更多文章>
    Theme by Vdoing | Copyright © 2020-2025 kros king
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    icon-heart-o icon-heart icon-infinity icon-pause icon-play link next prev