• 售前

  • 售后

热门帖子
入门百科

Vue之监听方法案例详解

[复制链接]
462710480 显示全部楼层 发表于 2021-8-14 14:32:24 |阅读模式 打印 上一主题 下一主题
vue中的监听方法
  1. watch
复制代码
留意
名字 你想监听哪个属性,就要和他起一样的名字
1.作用

用来监听vue实例中的数据厘革
可以随时修改状态的厘革
2.触发条件

当你监听的属性发生厘革时,会自动调用对应的监听方法
3.使用场景

用于异步处理,开销比较大的运算
4.示例
  1.          watch:{
  2.              name(newvalue,oldvalue){
  3.                   //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值
  4.                     // this.age
  5.                     // console.log('name属性发生变化了')
  6.                     console.log(newvalue,oldvalue)
  7.                 }
复制代码
5.监听对象时
  1. <script>
  2. export default {
  3.     data() {
  4.         return {
  5.             obj: {
  6.                 name: "张三",
  7.                 age: 20,
  8.                 children: [
  9.                     {
  10.                         name: "李四",
  11.                         age: 27
  12.                     },
  13.                     {
  14.                         name: "王五",
  15.                         age: 23
  16.                     }
  17.                 ]
  18.             }
  19.         };
  20.     },
  21.     watch: {
  22.         obj: {
  23.             handler: function(newVal, oldVal) {
  24.                 console.log("newVal:", newVal);
  25.                 console.log("oldVal:", oldVal);
  26.             },
  27.             deep: true,
  28.             immediate: true
  29.         },
  30.         "obj.name": function(newVal, oldVal) {
  31.             
  32.             console.log("newVal obj.name:", newVal);
  33.             console.log("oldVal obj.name:", oldVal);
  34.         }
  35.     },
  36. };
  37. </script>
复制代码
  1. 监听对象的时候,需要加deep:true,这样才能深入底层去实时监听,如果没有加的话,对象是监听不到变化的。
复制代码
immediate属性:布尔值
immediate:true:初次加载就监听数据厘革
immediate:false:只有发生改变才监听
  1. deep:true;
复制代码
是开启深层次的监听,即所有属性都加上监听器,如果其中一个发生改变了就执行handler函数。

到此这篇关于Vue之监听方法案例详解的文章就先容到这了,更多相关Vue之监听方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章渴望各人以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作