首页 > 其他分享 >vue中 watch 监听器的使用

vue中 watch 监听器的使用

时间:2023-02-07 14:23:34浏览次数:42  
标签:unwatch vue 函数 watch immediate 监听器 true 表达式

watch
watch:一个对象,键是需要观察的表达式,值是对应回调函数,也可以是是方法吗或者包含选项的对象。vue 实例将会载实例化是调用 $watch(),遍历 watch 对象的每一个 property。

deep: true:将会深度监听对象的 property改变时,被调用。

immediate: true:将会载监听开始之后立即调用。

注意:不应该使用箭头函数来定义 watcher 函数(例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。

this.$watch
用法:观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式,用一个函数取代。

// 键路径
this.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})
// 函数
vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

vm.$watch 返回一个取消观察函数,用来停止触发回调:

var unwatch = this.$watch('a', cb)
// 之后取消观察
unwatch()

 


1.deep

为了发现对象内部值的变化,可以载选项参数中指定 deep:true。

this.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123

 


2.immediate

在选项中指定 immediate:true 将立即以表达式的当前值触发回调。

this.$watch('a', callback, {
immediate: true
})

 


注意在带有 immediate 选项时,你不能在第一次回调时取消监听给定的 property。你需要先检查其函数的可用性:

var unwatch = this.$watch('value', function () {
doSomething()
if (unwatch) unwatch()
},
{ immediate: true }
)

 

标签:unwatch,vue,函数,watch,immediate,监听器,true,表达式
From: https://www.cnblogs.com/yan122/p/17098208.html

相关文章

  • vue3 中好用的插件
    1.Api自动导入unplugin-auto-import自动引入compositionapi,不需要再手动引入。(npm地址)下载npmi-Dunplugin-auto-import配置vite.config.tsimportAutoIm......
  • 为在线客服系统接入chatGPT(四):chatGPT接口vue网页版,可以联系上下文语境,可以实现自己的c
    如果想实现chatGPT的网页版,调用接口就可以了,但是如果需要联系上下文语境,就需要在传递的数据的时候进行下拼接传参的时候对所有的对话数据进行拼接,拼成下面这样{"prompt":......
  • 在vue路由上添加公共的路由前缀(vite配置)
    需求后端需要在我项目路由地址上添加一个统一的前缀.实现1.根据环境的不同,可以配置不同的公共路径拿开发环境举例,如果统一的前缀是/dev就进行如下配置2.在vite.con......
  • Vue使用AbortController取消请求
    官方文档https://github.com/axios/axios#cancellationCancellationAbortControllerStartingfromv0.22.0AxiossupportsAbortControllertocancelrequestsinfe......
  • vue3.0 同一项目中调用多个域名的请求
    1.简单粗暴形式:复制多个request.js文件,设置不同的baseUrl,根据需要引用不同的request.js文件。可以解决问题,但不推荐使用2.参数配置形式:利用参数配置,可灵活的调用多个不......
  • vue3 手写dropdown
    <template><divclass="drp_component":class="classname"><p@click="openDrp"class="ws-n"ref="drpDef"title=""><slot></slot></p></div......
  • 基于Springboot+Mybatis+mysql+vue宠物到家管理平台
    @目录一、系统介绍二、功能展示1.主页(普通用户)2.登陆、注册(普通用户)3.宠物大全(普通用户)4.宠物详情(申请领养、点赞、评论)(普通用户)5.我的送养(普通用户)6.我的领养(普通用户......
  • 面试官:vue2和vue3的区别有哪些?
    一、Vue3与Vue2区别详述1.生命周期对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上+“on”,功能上是类似的。不过有一点需要注意,Vue3在组合式API(Comp......
  • 说说你对Vue的keep-alive的理解
    什么是keep-alive在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。也就是说,keep......
  • 滴滴前端一面必会vue面试题(附答案)
    实现双向绑定我们还是以Vue为例,先来看看Vue中的双向绑定流程是什么的newVue()首先执行初始化,对data执行响应化处理,这个过程发生Observe中同时对模板执行编译,找到其中......