watch监听是什么，都是怎么用的_第2页回答_第2页回答_Web前端

18条回答

2楼 · 2021-10-25 09:16

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

小小李兆佳

3楼 · 2021-10-25 10:58

1.全局变量

首先在VUE实例中进行声明变量

然后再vue实例外面进行监听属性变化vm。$ watvh（）方法，name代表要坚挺的数据模块里面的属性名称，newValue是改变以后的新值

属性oldValue是原来的值

2.vue实例内局部监听

首先在VUE实例中创建一个手表：{}监听模块，在模块中进行操作监听属性的操作，下面有好几种监听的方式

3.深度监听

主要使用在数组的时候使用深度监听，handler是深度监听，deep：false / true是进行控制是否启动深度监听的方法

————————————————

原文链接：https://blog.csdn.net/qq_35609316/article/details/80913377

IT学习助手 - qq：2676427015

4楼 · 2021-10-26 09:31

watch分为惰性监听和深度监听，当你需要监听一个对象时，惰性监听无法捕捉到对象的内部属性变化，此时你需要加deep进行深度监听。建议你多看下watch方面的api描述。

JJN

5楼 · 2021-10-29 17:45

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。
watch 侦听器的基本语法
开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下：

export default {

    data() {

return { username: ''}

  }，

watch: {

//监听username的值的变化，

//形参列表中，第一个值是"变化后的新值”，第二个值是“变化之前的旧值”

username(newVal,oldval) {

console.log(newVal,oldVal)

  },

 }，
 
}








   




 加载中...


         
            
            
                                  
            
            
            
            
            
            20200921文                               - 做更棒的自己!             
            
             
             6楼 · 2021-10-30 09:21
             
             
             
                          
             
                                                                          $watch简单使用
$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);
每个参数的说明如下：
watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

                                                                    
                                                        
            

             
             



                
                
                  
                






   




 加载中...




         
            
            
                                  
            
            
            
            
            
            py大白                                          
            
             
             7楼 · 2021-11-01 11:49
             
             
             
                          
             
                                                                          首先先在页面中写两个下拉列表框  设置了 v-model="province" 监听 province 这里就用到了 watch 属性 建立方法他下拉列表框中的 "p.id" 与 city 中的进行对比赋值 这样就实现了两个下拉列表框的联动                                                                    
                                                        
            

             
             



                
                
                  
                






   




 加载中...




         
            
            
                                  
            
            
            
            
            
            ablabla                                          
            
             
             8楼 · 2021-11-04 15:57
             
             
             
                          
             
                                                                          使用原因：比如路由这种不属于dom元素，是没有method属性的，所以无法写方法，只能通过watch进行监听路由的变化
使用watch监听数据的变化
使用方法在vm实例中添加一个watch属性
watch:{//使用这个属性,可以监视data中数据的变化,然后触发这个watch中对应的处理函数
firstname:function(newval,oldval){
this.allname=newval+this.lastname
},
lastname:function(newval){
this.allname=this.firstname+newval
}
}
函数中的两个形参，第一个表示输入的新的值，后一个表示旧的值
使用watch监听路由的变化
使用案例
watch:{
‘$route.path’:function(newVal,oldVal){
console.log(“新地址”+newVal)
console.log(“旧地址”+oldVal)
}
}


                                                                    
                                                        
            

             
             



                
                
                  
                






   




 加载中...




         
            
            
                                  
            
            
            
            
            
            帅帅马                                          
            
             
             9楼 · 2021-11-07 20:00
             
             
             
                          
             
                                                                          vue watch官方文档案例介绍
var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
这一段是vue官方文档的一段示例，如果您是vue的资深用户，请直接跳过这段，这里主要是讲当data中的数据发生改变后，在watch中声明了监听的字段会触发其回调函数，拿到当先val及改变前的oldval.

现在来讲实战中可能会用的地方,上代码

1.场景一： 如果是需要手动做校验的情况，需要监听例如表单元素变化的可以直接使用上诉例子(这里我们已组件中的写法来做演示)


[removed]
export default {
 name: 'test',
 data () {
  return {
   obj: {
    a: 'hello world'
   }
  }
 },
 watch: {
  'obj.a' (val, oldVal) {
   ...your code
  }
 }
}
[removed]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2.场景二：那么这里可能有出现如下场景，比如这个页面需要处理数据的回显，例如编辑功能需要在数据初始化的时候就要触发watch的监听做某些事情，此时应该怎么做？

代码改至如下


[removed]
export default {
 name: 'test',
 data () {
  return {
   obj: {
    a: 'hello world'
   }
  }
 },
 watch: {
  'obj.a': {
   handler: function (val, oldVal) { /* ... */ },
   // immediate这个属性需要加上，代表该回调将会在侦听开始之后被立即调用
          immediate: true
  }
 }
}
[removed]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
仔细观察， ‘obj.a’写法由函数变成传入一个对象（这里不深究底层原理，只讲用法）。

当然如果您看到这里还未解决你碰到问题，那么我猜测您可能碰到与我一样的问题，请继续阅读

3.场景三：对于复杂的字符串监听，直接上代码
还是拿上诉例子修改


[removed]
export default {
 name: 'test',
 data () {
  return {
   obj: {
    'a.index.name': 'hello world'
   }
  }
 },
}
[removed]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data中的数据由简单的字符串变为复杂的待处理的，这种怎么办？如果还用之前的那种监听方式，可能会报下诉错误

Failed watching path: “XXXXX” Watcher only accepts simple dot-delimited paths. For full control, use a function instead.

意思是说，只接受简单的点分隔路径。 要完全控制，请改用函数。

                                                                    
                                                        
            

             
             



                
                
                  
                






   




 加载中...




上一页
1
2
3
下一页



		
				



相关问题推荐



现在的web开发的要求高吗？2020-11-01 21:57


回答 120

相对前几年来说，要高上不少了，毕竟入行的人也是越来越多了，基础的工作对应想要参与的人群基数越来越大，但是对于高端人才的需求还是很多，人才还是相对稀缺性的。所以，想要学web或者其他技术也一样，别等，别观望。web前端就业方向特别多包括web前端开发...



相对定位和绝对定位的区别是什么呢2021-04-09 11:10


回答 25

相对定位和绝对定位是定位的两种表现形式，区别如下：一、主体不同1、相对定位：是设置为相对定位的元素框会偏移某个距离。2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。二、特点不同1、相对定位：在使用相对定位时，无论是否进行移...



抓包是什么意思？2020-04-01 17:36


回答 7
已采纳
抓包（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析，可以得到有用的信息。目前流行的...



前端常用的框架有哪些？2020-11-27 10:54


回答 89

常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等



前端自学的效果怎么样2020-11-19 13:46


回答 65
已采纳
前端是目的就业前景非常不错的一个计算机技术，但是自学的话还是有一定难度的，网络上自学是碎片化的，同时互联网技术跟新换代快，自己的话比较吃力也学习不到最新的技术。



 SSR 是什么意思？2020-03-20 18:56


回答 6

SSR就是一台服务器，可以利用 SSR 在远程的服务器上配置 SSR，使其能够成为 SSR 节点，这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR（简称 SSR）是 Shadowsocks 分支，在 Shadowsocks 的基础上增加了一些数据...



现在计算机培训都有什么课程？2020-10-31 14:36


回答 52
已采纳
计算机培训方向比较多，建议找适合自己的方向选择培训编程类：JAVA、WEB、Python、C/C++、C#等测试类：软件测试运维类：云计算、网络安全设计类：UI设计、3D建模等



echarts 图表类型设置为time 时 ，设置2021-01-07 11:14


回答 11

1、代码判断xAxis: {type: &#39;time&#39;,splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time，然后设置对应X轴......



移动跨平台开发框架有哪些HTML5移动框架
2022-04-01 18:57


回答 8

HTML5 + CSS + JavaScript 开发 跨平台重用代码 



miniMobile移动端框架有什么特点HTML5移动框架
2022-04-01 18:57


回答 4

采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。



求推荐界面比较漂亮的移动开发框架HTML5移动框架
2022-03-15 16:12


回答 10

iView UI、ioni、SUI



移动端开发用什么JS框架好HTML5移动框架
2022-03-11 18:19


回答 6

 jQTouch 



现在移动端开发都用的什么框架HTML5移动框架
2022-03-11 18:19


回答 4

如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app（对应vue语法）taro（对应react） 或者纯原生 这个没有限制的，自己怎么舒服怎么来



为什么说atom和sublime都是前端开发者用的HTML编辑器
2022-01-06 15:12


回答 4

因为可以运用在网页和小程序的开饭中，而且开源，用着便宜，企业都很喜欢



前端开发用的文本编辑器有哪些？HTML编辑器
2022-01-06 15:10


回答 10

一、Visual Studio Code下载地址：https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...



如何循环淡入淡出图片css样式
2021-12-08 11:25


回答 9

jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 


没有解决我的问题，去提问

watch监听是什么，都是怎么用的_第2页回答

相关问题推荐

等你来答

热门问答

相关文章

watch监听是什么，都是怎么用的_第2页回答

相关问题推荐

等你来答

热门问答

相关文章

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间