首页 > 其他分享 >Vue:watch的多种使用方法

Vue:watch的多种使用方法

时间:2023-10-25 20:22:06浏览次数:43  
标签:多种 Vue firstName person watch newVal oldVal 属性

好家伙,

 

补了一下watch的多种用法

 

1.属性: 方法(最常用)

使用最广泛的方式是将watch选项设置为一个对象,对象的属性是要观测的数据属性,值是一个回调函数,该回调函数会在属性变化时触发。例如:

watch: {
  firstName: function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  }
}

 

 

2.属性: 数组

你可以在一个watch选项中观测多个数据属性,这可以通过将要观测的属性放入一个数组中来实现。例如:

watch: {
  'person.firstName': function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  },
  'person.lastName': function(newVal, oldVal) {
    console.log('lastName changed:', newVal, oldVal);
  }
}

 

 

3.属性: 对象

另一种观测多个属性的方式是使用对象。在这种情况下,对象的键是要观测的属性,值是一个包含处理函数、handler的对象。

该处理函数与属性值的回调函数相同,用于在属性更改时执行组件中的逻辑。它还可以包含其他选项,例如deepimmediate。例如:

watch: {
  person: {
    handler: function(newVal, oldVal) {
      console.log('person changed:', newVal, oldVal);
    },
    deep: true
  }
}

 

 

4.属性:字符串

还可以使用字符串指定要观察的属性,然后使用对应的方法名称作为回调函数。这个选项在只有一个属性需要观察的情况下非常有用。例如:

watch: {
  'person.firstName': 'firstNameChanged'
},
methods: {
  firstNameChanged: function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  }
}

 

 

5.带命名空间的watch

watch选项中可以使用字符串表示要观测的属性,可以使用.来访问对象中的属性,如'person.firstName',但是这样会导致处理函数与属性名称紧密耦合,不便于维护。

为了解决这个问题,Vue提供了一种带命名空间的watch用法,这可以通过在watch选项中使用对象来实现。

对象的每个键都代表一个观测的命名空间,值是观测该命名空间下属性的处理函数。例如:

watch: {
  person: {
    firstName: function(newVal, oldVal) {
      console.log('firstName changed:', newVal, oldVal);
    },
    lastName: function(newVal, oldVal) {
      console.log('lastName changed:', newVal, oldVal);
    }
  }
}

这里,我们可以为person对象指定两个命名空间—firstNamelastName,这些命名空间被视为person层次结构的子命名空间。

 

 

6.$watch

除了在组件选项中设置watch属性之外,Vue还允许你使用实例方法$watch来实现相同的效果。

与组件选项中设置的watch选项不同,调用$watch时可以在任何地方使用,例如在计算属性、方法或任何其他实例方法中。例如:

created() {
  this.$watch('person.firstName', function(newVal, oldVal) {
    console.log('firstName changed:', newVal, oldVal);
  })
}

 

 

7.深度观测

在默认情况下,watch只会观测对象的第一层属性的变化。这意味着在对象的嵌套层次结构中更改属性时,不会触发处理函数。要观测对象的深层属性,可以在watch选项中使用deep属性,如下所示:

watch: {
  'person.name': {
    handler: function(newVal, oldVal) {
      console.log('name changed:', newVal, oldVal);
    },
    deep: true
  }
}

在这个例子中,我们观察person对象的name属性,使用deep: true选项在对象深层次结构中更改属性时仍然能够触发处理函数。

综上所述,Vue的watch选项提供了多种方法来观测数据属性的变化,让我们能够编写更加优雅和维护性更高的代码。

 

标签:多种,Vue,firstName,person,watch,newVal,oldVal,属性
From: https://www.cnblogs.com/FatTiger4399/p/17788007.html

相关文章

  • 配置第一个vue项目
    基础环境准备参考:https://www.cnblogs.com/lelexiong/p/17787970.html1、打开vscode终端,配置脚手架vue-clinpminstall-gvue-cli2、安装webpack,它是打包js的工具npminstall-gwebpack3、vscode打开所创建的空文件夹,执行命令创建项目vueinitwebpackvue-demo4......
  • vue el-select 下拉菜单 数据回显不在清除数据可编辑状态
    思路:当点击options的时候,让select失去焦点(跳到其他的地方),添加el-input就是为了把光标跳转到其上面,然后将其隐藏掉,则为看不到光标点,但是在点击第一次之后获取焦点focus之后,隐藏掉下拉菜单的时候@blur是无效的,此时只能通过监听下拉框是否是隐藏和显示状态来让其失去焦点事件,所以......
  • 使用 content scripts 和 Vue Router 等技术在当前页面中注入和显示 Vue 单文件组件
    要在当前页面中注入和显示Vue单文件组件,您需要按照以下步骤操作:创建一个Vue项目:首先,确保您有一个Vue项目,包括您的Vue单文件组件以及相应的构建配置。将构建后的文件添加到插件目录:将Vue项目构建后生成的HTML、CSS和JavaScript文件添加到您的Chrome插件的目录中。编......
  • 【前端开发】基于vue+elemnt-ui流程图设计器解决方案
    前言越来越多的企业都在研发低代码平台,其中流程引擎是核心之一,拥有一个可以拖拽设计审批流程的设计器是相当重要的。介绍审批流程设计器是一种工具,用于创建和设计审批流程。它通常是一个可视化的设计器界面,可以方便地添加和配置审批节点、终审节点、消息节点等,并能够通过连线将......
  • Vue日历插件
    <template><divclass="page"><divclass="calendar"><divstyle="display:flex;justify-content:space-between;align-items:center;border:1pxsol......
  • 关于在vue 中翻译select 下拉数据的操作
    可以使用object.keys()import*asfiltersfrom"./filters";//globalfiltersObject.keys(filters).forEach((key)=>{Vue.filter(key,filters[key]);//eslint-disable-lineno-undef});<el-select:value="detailRow.prpLpayeeD......
  • Vue 中 axios 的使用和跨域问题的解决
    一、内容:1.Axios是一个基于promise的HTTP库,类似于jQuery的ajax,用于http请求。axios并不是vue插件,所以不能使用Vue.use()。2.它既可以应用于浏览器端,也可以应用于node.js编写的服务端。3.Axios具有以下特性: (1)支持PromiseAPI。 (2)拦截请求与响应,比如:在请求前......
  • Vue中 使用 Scss 实现配置、切换主题
    1.样式文件目录介绍本项目中的公共样式文件均位于src/assets/css目录下,其中index.scss是总的样式文件的汇总入口,common.scss是供全局使用的一些基本样式(常量),_theme.scss、_handle.scss两个文件是进行主题颜色配置的文件。如下图,将index.scss在main.js文件中引入即可全......
  • vue实现动态展开与折叠内联块元素
    功能需求当多个内联块元素(比如div)在一个固定宽度的父元素内自动排列换行时,如果这些元素的行数超过四行,那么默认折叠超出的部分,并在第四行末尾显示一个按钮供用户切换展开或折叠状态。在折叠状态下,为了确保展开/折叠按钮能够显示在第四行末尾,会隐藏第四行的最后一个元素。在展开状......
  • 29-Vue脚手架-mixin 混入
    mixin混入功能:可以把多个组件共用的配置提取成一个混入对象使用混合:1)第一步,定义混入新建一个JS文件,比如mixin.jssrc/mixin.js//分别暴露exportconsthunhe1={methods:{showName(){alert(this.name)}},mounted(){......