vue之watch的踩坑

最新推荐文章于 2024-07-10 13:39:14 发布
最新推荐文章于 2024-07-10 13:39:14 发布
阅读量2k 收藏
点赞数
分类专栏： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37339364/article/details/82755475
版权

vue之watch的踩坑

watch中箭头函数和function的区别

在这里插入图片描述

在上述代码中，当watch中allobj是箭头函数时，访问不到data中的this.allobj，但是参数val是有值的，普通函数function可以访问到外部的值，也就是说：vue的watch中，最好使用function，箭头函数有局限性。访问不到外部的data！

原鑫@博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE Watch
w_t_y_y的博客
07-14 1004
一、watch用法： 1、基础写法 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou'
Vue中的watch笔记
killbee365的博客
04-30 162
Watch的简单理解 引用官方解释就是：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 watch()，遍历watch对象的每一个property。语法：vm.watch()，遍历 watch 对象的每一个 property。 语法：vm.watch()，遍历watch对象的每一个property。语法：vm.watch( e...
Vue3 watch函数中的坑
qq_60248719的博客
09-30 694
<template> <h1>当前n值为：{{n}}</h1> <h1>当前求和为：{{sum}}</h1> <button @click="sum++;n--">点我+1</button> <h2>姓名：{{person.name}}</h2> <h2>年龄：{{person.age}}</h2> <h2>薪资：{{person.job..
Vue3中的watch那些坑
weixin_48975022的博客
03-26 251
/情况四：监视reactive定义的响应式数据中的某个属性,不可以直接写成person.job，必须写成一个函数形式()=>person.job。},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效。console.log('person的job变化了',newValue,oldValue)console.log('person的job变化了',newValue,oldValue)//情况五：监视reactive定义的响应式数据中的某些属性。
初学vue3与ts：watch的使用
最新发布
空&白的博客
07-10 406
如果有需要用到immediate或者deep的话。监听1个props数据。监听2个及以上的数据。
vue3中computed函数,watch函数,watchEffect函数
weixin_52005030的博客
08-14 222
需要引入函数api才可以使用 import{ref,reactive,computed,watch,watchEffect}from'vue' computed函数 setup(){ //数据 let person = reactive({ money:18, num:18 }) //计算属性——简写（没有考虑计算属性被修改的情况） person.fullName = computed(()=>{ return person.mo...
vue3 使用 watch 时陷入了个直觉陷阱
weixin_48230016的博客
06-17 697
watch监听时，不要太依赖与watch 的副作用执行，请多加一层判断
Vue-Watch中获取节点——使用elementUI的table组件渲染
Csea的博客
05-29 1277
近一次项目中需要监听传入的Id变化，所以使用了computed和watch结合的方式来进行监听 computed: { listenId: function() { return this.form.interviewId } }, watch: { listenId(val, oldVal) { } }, 因为涉及到表单渲染的问题，UI用的是elementUI，表单里有table表单，需要渲染多选框的问题，但是按照elementUI的ta
Vue3-Watch踩坑-watch监听无效
qq_40441489的博客
11-23 7158
从vue3源码分析watch的使用注意事项
记录vue的一些踩坑日记
m0_55546349的博客
07-29 548
记录vue的一些踩坑日记
Vue3 watch API 踩坑记录
SCUDaming的博客
01-05 5586
遇到一个很简单的需求，监听一个props属性。却遇到了问题：监听的属性变化时，没有得到预期的响应。后来看官方文档，总结如下。 1、Vue3可以使用watchAPI，写法示例： watch( () => state.count, (count, prevCount) => { /* ... */ } ) ①其中第一个参数是要监听的数据源（必须是响应式的），有两种写法： 字符串string： 顶层的 data、props 或 computed property 名。 函数Function： 使用函数
vue 组件销毁并重置的实现
01-19
方法1 当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题 [removed] export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false this.$n
Vue+TS 踩坑记录与方案总结
HTML网页设计
08-08 1224
vue 和 TypeScript 结合的情况下，很多写法和我们平时的写法都不太一样，这里总结我项目开发过程中遇到的问题和问题的解决方案。
vue中tab切换前端实现_vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
weixin_34175919的博客
12-29 2917
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。1、vue如何使用element-ui上一篇文章已经分享了如何在vue中使用element-ui创建tab组件切换内容(需要了解的朋友点击链接查看)2、创建相应文件。a、创建父组件 src/components/tabZujian.vueb、创建自组件(被切换的组件)src/tabComp...
vue的计算属性和watch属性和事件阻断
曹学成的博客
10-26 503
1、防止事件冒泡 <button @click.stop="print('button')">点我试试啊</button> 2、防止页面跳转 <a href="http://www.baidu.com" @click.prevent ="print('我是百度')">百度一下，你就知道</a> 3、计算属性和watch属性 cons...
vue的生命周期
李特成的博客
07-13 175
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;生命周期&lt;/title&gt; &lt;/head&gt; &lt;body&
vue 中 computed、methods 和 watch 属性的使用和对比
长岛冰茶的博客
07-15 190
computed、methods 和 watch 属性的使用 下面使用一个姓名拼接案例来演示用法 1.methods <div id="app"> {{ fullname() }} </div> <script> var app = new Vue({ el: '#app', data: { firstName: 'Yudong', ...
【vue】watch监听取不到this指向的数？
galaxyJING的博客
04-11 933
今天同事问我，watch里this指向的数值，别的地方却可以打印出来。监听的数据在组件创建之前已经被定义，否则可能无法触发。指向的数据，有可能无法获取到数据，因为。的指向在箭头函数中不会指向Vue实例。在Vue组件中，如果你在。懒得打字了直接上截图吧。
vue watch监听不管用
热门推荐
梦幻般的菜鸟的博客
08-09 1万+
遇到一个逗比问题 项目里面watch监听一个父元素传来的属性值data(data是个数组)，但是没有监听到 props里面也并没有写错，代码并没有报错 props: { data: { type: Array, default: () =&gt; { return [] } } } 后来发现父元素在使用这个子组件的时候给容器加了 &lt;d...
vue之watch用法
07-27
你可以使用 `watch` 选项来观察 Vue 实例中的数据变化。`watch` 选项接收一个对象，对象的属性是你要观察的数据，值是一个回调函数，用于处理数据变化时的操作。 下面是一个示例： ```javascript watch: { // 观察 msg 数据的变化 msg(newValue, oldValue) { // 在数据变化时执行的操作 console.log('msg 变为:', newValue); } } ``` 在这个示例中，`watch` 选项中定义了一个属性 `msg`，它是要观察的数据。当 `msg` 发生变化时，回调函数会被调用，并且会传入两个参数：新值 `newValue` 和旧值 `oldValue`。你可以在回调函数中执行一些操作，比如更新其他数据、发送网络请求等。 除了基本的观察数据变化外，你还可以使用深度观察（`deep: true`）来观察对象或数组的变化，以及使用立即触发（`immediate: true`）来在初始化时立即执行回调函数。 希望能帮到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值