vue watch使用了immediate之后，handler的this指向问题

最新推荐文章于 2024-04-29 16:39:25 发布
原创 最新推荐文章于 2024-04-29 16:39:25 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

探讨Vue中watch使用immediate选项后，handler方法this指向问题。若遇到this指向不正确，应避免使用箭头函数，改用传统function解决，确保handleListData方法能正确访问。

watch使用了immediate之后，handler的this指向问题？？

  这里的handler方法不能使用箭头函数，改成传统function就可以了

 list: {
      handler: function (newList, oldList) {
        this.handleListData(newList, oldList)
      },
      deep: true,
      immediate: true
},

 

Vue - watch 三种不同写法及场景用法（immediate、handler / deep）
🏆 前端领域优质创作者
01-10 2426
前言 官方文档（侦听器）：https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8 通过使用 watch 来监听或响应数据的变化，大致用法有如下几种， 每种写法没有好坏之分，只是使用场景不同而已。 一、常规监听 注意：这种监听方式，当值首次绑定的时候，不会执行监听函数。 —— 例如，父组件向子组件 动态传值（props） 时，子组件 props 首次获得传值后，不会触发监听。 很常见的写法，后续每当变量（对象同理）
vue项目中使用watch监听 immediate
seimeii的博客
12-21 1491
标题
【Vue项目】watch中为什么取不到this？？？
feng的博客
08-17 1941
箭头函数绑定了父级作用域的上下文，从而不会拿到Vue实例。所以在使用watch设置监听的时候，handler函数不应该使用箭头函数。运行结果：Error "$nextTick" ........输出一下this，发现是undefined。1.问题重现：先来看下这段代码。
[vue] 监视属性，天气小案例， 箭头函数和普通函数的this指向问题
qq_14993591的博客
11-02 585
天气案例 效果 用插值语法写 <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="{{isHot = !isHot}}">切换天气</button> </div> const vm = new Vue({ el: '#root', data: {
vue常见的问题
m0_64848887的博客
10-13 363
给第三方组件添加v-if标签，在修改初始化数据的时候，可以使用v-if强制刷新组件。在vue中 filters里面是无法使用this关键字的 可以使用。里面调用this.$refs.frommaking。注意：在mounted里面调用也需要写在。refs中发现frommaking存在。methods方法中调用this.发现未定义，但是打印。
Vue watch 的handler,immediate,deep属性
棠樾的博客
01-15 2604
watch除了可以监听data中数据的变化，还可以监听路由的变化。 监听$route.path属性。 watch:{ '$route.path':function(newVal,oldVal){ //console.log(newVal，oldVal); } }
vue中watch的handler，deep，immediate用法详解
热门推荐
qq_42975998的博客
02-28 2万+
我们使用watch监听数据时，有三个选项，handler，deep，immediate handler 我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handler（可参考我上篇文章的watch） watch: { // 通过输入框文字的变化，来改变下面的数据 ipt: { handler(newVal,oldVal) ...
详解Vue的watch中的immediate与watch是什么意思
12-13
immediate immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，当然此时页面上的数据我们还没来得及手动让其发生变化，所以在控制台输出的newValue为我们在代码中默认设置的值...
Vue进阶（八十九）：watch 用法详解_vue watch冻结是什么
2401_84411018的博客
04-29 429
第一种方式有一个缺点： 就是当值第一次绑定的时候不会执行监听函数，只有当值改变的时候才会执行。此时会给cityName的所有属性都加上监听函数，如果属性较多时，每个属性值的变化都会执行。首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将。如果我们想在第一次绑定的时候就执行此监听函数，则需要设置。方法无法监听到对象内部属性的改变，只有。中的数据才能够监听到变化，此时就需要。当需要监听一个对象的改变时，普通的。一样，在数据发生变化的时候才执行。此时，你可以删除原有键，再。中首次绑定的时候，是否执行。
watch中this指向
weixin_72329752的博客
02-20 780
【代码】watch中this指向。
Vue-侦听属性watch(handler方法,immediate和deep属性)
陈坚泓的博客
11-07 5687
Vue-侦听属性watchwatch选项handler方法和immediate属性deep属性字符串形式监听注销watchwatch监听路由 watch选项 当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 <div id="app"> <p>FullName: {{ fullName }}</p> &lt...
vue 执行函数this_vue回调函数中this无效
weixin_34374684的博客
12-24 1886
在vue中使用回调函数，发现函数体中使用this无效，无法调到methods里面定义的getCurrentExtent()函数。handler.setInputAction(function(wheelment) {var extent = this.getCurrentExtent(viewer);console.dir(extent);}, Cesium.ScreenSpaceEventTyp...
vue中的箭头函数的this
wanghuohuo1998的博客
07-05 753
在vue中箭头函数没有自己的this，所以，当箭头函数中有this的时候他会往外找，从而确定它的this的值 vm.$watch('firstName',{ immediate:true, //若immediate为true则handler在初始化时，就会调用一次，以后就看firstName的改变了 handler(newValue,oldValue){ setTimeout(()=>{ //此处定时器的回调一定要写箭头函数 t
理解Vue中的methods对象方法里的this指向，并解读源码
qq_41308489的博客
10-18 4740
Vue3的版本 "version": "3.2.20" 阅读区域 618 - 645 解决疑惑 1. methods 对象的 this指向 2. methods 对象的里的 方法 为什么不能用箭头函数 代码 // 当 methods 有方法时 if (methods) { // 对methods对象中的每一个方法遍历 for (const key in methods) { // 取出每一个方法 const methodHandler = (methods
Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options（Vue源码解读）
milugloomy的博客
09-10 1842
起因 先看一段Vue的代码，在Vue的原型链上增加了一个setData方法，然后实例化Vue对象，传入一个Object类型的参数 Vue.prototype.setData = function (key, val) { if (this.data) { this.data[key] = val } else { this.data = { [key]: ...
watch 深度监听 immediate，handler，deep的使用
winxin_58206976的博客
10-20 444
我们使用watch监听数据时，有三个选项，handler，deep，immediate 使用 immediate和handler 这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。 handler 我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handler watch: { // 通过输入框文字的变化.
vue中watch监听对象需注意
qq_45447899的博客
08-17 519
vue中watch监听对象 data () { return { authStepPersonalData: { userName: '', // 姓名 certNo: '', // 身份证号码 address: '', // 联系地址 vocation: '', // 职业 mobileNumber: '', // 联系方式 auctualCtrlName: '', // 实际控制人
【Vue】this代表什么含义
欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
05-19 3990
vuejs中this代表的含义：1、vue组件或者实例中，this代表调用它的Vue实例；2、回调函数中，this代表父级组件；3、箭头函数中，this代表定义它时所处的对象，即宿主对象。 Vuejs中的this变量 1 vue组件中 在Vue所有的生命周期钩子方法（如beforeCreate，created，beforeMount，mounted，beforeUpdate， updated，beforeDestroy以及destroyed）里使用this，this指代调用它的Vue实例，即（new V.
解决vue beforeRouteEnter函数中无法使用this关键字的问题
weixin_53318151的博客
07-04 445
在next函数中传递一个箭头函数为参数，箭头函数会被自动传入一个this作为参数，可以像在普通vue代码中使用this一样使用这个参数。
vue2watch监听immediate
最新发布
03-08
### Vue 2 中 `watch` 选项设置 `immediate` 属性 在 Vue 2 中，通过配置 `watch` 选项可以实现对数据属性变化的监听。当希望在初始化时也触发一次监听器对应的处理函数，则可以通过设置 `immediate: true` 来达成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值