精华内容
下载资源
问答
  • vue路由监听失效
    2021-08-26 15:15:34

    场景:"vue": "2.6.10"    "vue-router": "3.0.2",

    写法一

      watch: {
         $route(to, from) {
          debugger;
        },
      },

    亲测,监听失效

    写法二

    watch: {
      $route: {
        handler: function(val, oldVal){
          console.log(val);
        },
        deep: true // 深度观察监听
      }
    },

    亲测,监听失效

    写法三

    watch: { //写成一个方法
      '$route':'getPath'
    },
    methods: {
      getPath(){
        console.log(this.$route.path);
      }
    }

    亲测,监听失效

    写法四  

      watch: {
         $route: {
           immediate: true, // 一旦监听到路由的变化立即执行
           handler(to, from) {
             debugger
             console.log("监听路由:" + JSON.stringify(to.name));
           },
         },
    
      },

    能获取到to的数据,获取不到from的数据,在特定的场景下还是不能使用

    方法五  重点来了

    通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

    <script>
      export default {
        name: 'app',
        // 监听,当路由发生变化的时候执行
        beforeRouteEnter (to, from, next) {
          // 在渲染该组件的对应路由被 confirm 前调用
          // 不!能!获取组件实例 `this`
          // 因为当钩子执行前,组件实例还没被创建
        },
        beforeRouteUpdate (to, from, next) {
          // 在当前路由改变,但是该组件被复用时调用
          // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
          // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
          // 可以访问组件实例 `this`
        },
        beforeRouteLeave (to, from, next) {
          // 导航离开该组件的对应路由时调用
          // 可以访问组件实例 `this`
        }
    </script>

    亲测能监听路由的变化,可以获取到路由变化的数据from和to,再添加具体的业务数据

     

    更多相关内容
  • 使用过watch的,应该起码经历过一次失效。比如,我们监听对象的时候,在没有踩坑之前,很容易这样写:但是,❌,这里的watch是无效的!!!因为 obj 是引用类型!!!引用类型的指针是固定的,所以如果不是重新赋值,...

    使用过watch的,应该起码经历过一次失效。

    比如,我们监听对象的时候,在没有踩坑之前,很容易这样写:

    6b335bddef8a1a432a3cffc2a0526802.png

    但是,❌,这里的watch是无效的!!!

    因为 obj 是引用类型!!!

    引用类型的指针是固定的,所以如果不是重新赋值,那么其赋值的变量自然也不会发生变化。

    举个例子:

    let obj = { a: 1 };

    let obj1 = obj;

    let obj2 = { ...obj };

    obj1.a = 2;

    obj2.a = 3;

    // 这里肯定是true,因为obj和obj1都是同一个指针,不明白的搜下引用类型

    console.log(obj1 === obj);

    // 这里肯定是false,因为指针不同

    console.log(obj2 === obj);

    怎么解决呢?也简单!

    设置deep:true,这样obj中的属性发生变化(可被监测到的),便会执行 handler 函数;。

    67413dfc57d3817d0fcec951d7a93150.png

    !!!注意,因为是引用类型,所以newValue 和oldValue始终相等,千万不要犯傻的写相等就return,那就永远也不往下走了。。。。

    监测数组

    引用类型,除了对象,很容易想到数组,那数组是不是也需要这样写呢。

    话分两头:

    数组项是对象类型,就需要deep

    数组项是值类型,就不需要deep

    因为vue2里,数组被特殊处理了,跟 obj 不等同,所以需要分情况。

    也就是数组项是值类型的话,直接这么写就行:

    fe6673995a52978a665ccc5033f37952.png

    对象类型的话,上面是不行的,先举个错误 ❌ 的例子:

    b21794c2ef2c12973863d9558f0957e9.png

    不打印的原理,依然是数组项是对象类型,想watch对象类型,必须加deep

    正确做法 ✅:

    watch:{

    arr: {

    handler(newValue) {

    // 这里就可以打印了

    console.log(newValue);

    },

    deep: true

    },

    }

    总结

    watch失效的场景:

    对象类型

    数组项为对象类型的数组

    解决方案:加deep:true。

    watch的其他属性

    官网文档

    一开始就需要执行watch的话,可 immediate属性

    handle可以是一个数组

    取消watch的话,this.$unwatch

    watch对象的某个属性的话,"obj.key"(){}

    如果想同时检测两个属性,懒得一个个写的话,有个偷懒的法子用computed做中间层。

    computed:{

    fullName(){return this.firstName + this.lastName}

    },

    watch:{

    fullName(){...}

    }

    引用

    watch的用法

    总结

    到此这篇关于vue.js watch经常失效的场景与解决方案的文章就介绍到这了,更多相关vue.js watch失效的场景与解决内容请搜索云海天教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持云海天教程!

    展开全文
  • 首先我在项目中所出现的问题 # 项目场景: watch: { alert: { handler(newVal, oldVal) { this.alterSon = newVal; }, deep: true, // 深度侦听 ...考虑到数据值和值的属性都可能改变,所以使用...使用普通监听

    首先我在项目中所出现的问题

    # 项目场景:
    
       watch: {
          alert: {
          handler(newVal, oldVal) {
              this.alterSon = newVal;
          },
          deep: true, // 深度侦听
        },
    

    问题分析:

    考虑到数据值和值的属性都可能改变,所以使用深度监听。

    这里我的alter(数据地址值改变)改变,但this.alterSon却一直是第一次赋的值。。


    解决方案:

    使用普通监听该值可以改变;

    alert(){
           this.alterSon = this.alter;
         }
    

    但属性值改变监听不能触发,(之后看了官方文档,百度都没有找到原因);
    进过多次测试得出结论:watch深度监听内部属性改变会触发,而原始地址值改变不会触发(数据改变了整体值就不要用深度监听,不会触发) ;

    展开全文
  • 首先得明确,数据监听vue在创建实例时通过Object.defineproperty方法进行监听。当vue实例创建以后,自己手动通过obj.b = 10的方式新增对象属性是不会通过defineproperty方法定义监听,因此是不会被监听到的,就...

    首先得明确,数据监听是vue在创建实例时通过Object.defineproperty方法进行监听。当vue实例创建以后,自己手动通过obj.b = 10的方式新增对象属性是不会通过defineproperty方法定义监听,因此是不会被监听到的,就不会引起视图重新渲染
    如果想被监听到时,可以通过 this.$set(this.obj,'num',3)的方式进行属性新增。

    接下来我们对一段有趣的代码进行分析:
    Html:
    在这里插入图片描述

    Data数据:
    

    在这里插入图片描述

    Test方法:
    

    在这里插入图片描述

    执行点击后结果:

    既然this.obj.flag定义属性方法会失效,为什么这里的flag属性会被渲染到dom上呢?
    其实通过this.obj.flag虽然并不会引起视图的重新渲染,但是这个属性其实是被添加上去了。而通过this.$set方法去定义属性时是可以被监听到的,就会引起视图的重新渲染,此时就会顺便把之前改变了数据但是没有被渲染的flag属性一起渲染上。
    那么我们把两句代码的位置换一下结果会不会符合我们的预期呢?
    在这里插入图片描述
    在这里插入图片描述

    然而结果还是和之前一样。
    结果分析: dom渲染是异步渲染,它会等待同步任务执行完之后再执行,所以等视图进行更新的时候flag属性已经被添加上了,就会被一起渲染上。实际上视图更新会等待同步任务之后,宏任务执行,微任务执行队列被执行清空之后再进行渲染。而这样做是因为vue的虚拟dom机制。

    展开全文
  • <template> <div> <VueDeepWatch :objectValue="objectValue" :arrayValue="arrayValue" />...import VueDeepWatch from '@/components/vueDeepWatch.vue' export default { data () { return {
  • 之前我也遇到过这样的问题,监听路由时生效时不生效,这是因为从别的页面跳转过来,和你监听路由的那个页面是在同级别,下面直接上代码解决问题 watch: { $route: { immediate: true, // 监听到路由的变化立即...
  • 主要介绍了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
  • watch监听$route失效问题
  • 问题很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了。解决为啥出现这种问题?受 ...
  • 1、使用[removed]之类的API [removed] = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的...2、在生命周期钩子中注册监听事件 methods: { beforeunloadHandler (e) { // ... } } 在 mounted
  • vue 监听浏览器关闭事件 用vue做的项目,有个需求就是关闭浏览器的时候,需要往后台提交有个接口,来监听这个账号有没有下线。 第一步 data里放好要用到的变量 //声明遍历 data() { return { _beforeUnload_time:'...
  • vue监听scroll事件失效的问题

    千次阅读 2020-08-21 18:06:03
    vue项目中遇到需要监听页面某个元素距顶部距离实现吸顶效果,正常的window.addEventListener('scroll', this.handleScroll)完全失效,经过一段时间的探索发现这个事件在子组件中会遇到问题。 可以用元素上的 @scroll...
  • 一、取值undefined 网上很多都是直接取值的:this.$store.state....二、监听 先贴代码吧,为我还不能肯定这个能用 import { mapGetters } from 'vuex' export default { name: "", compu...
  • 代码可直接复制: <template> <div> <div /> </div> </template> <script> export default { mounted () { window.addEventListener('beforeunload', this.beforeunloadHandler) /* 这里需要注意一下,在vue里我们...
  • 1.vue 监听网页关闭/浏览器关闭事件 <script> export default { name: 'App', mounted(){ //添加监听事件 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) }, methods:...
  • 在dom元素上加ref,利用this.$refs.content获取到元素,添加滚动监听事件,希望得到的结果是滚动触发事件scrollHander,现在情况是失效,并没有监听到滚动动作,或者说滚动动作并没有出发事件 问题:监听事件的参数...
  • 有个项目中用了vue,然后去监听对象,发现newvalue和oldvalue 值是一样的,没有变化。 var Vm = new Vue({ el: '#app', data: { fp: { zzsfp: "", sl: "", fzzsfp: "", }, zit: false },
  • 关于vue中滚动监听失效问题

    千次阅读 2017-09-09 08:54:00
    监听window滚动失效;并且document.body.scrollTop一直是0的情况! 查找了许多资料;并没有找到合理的解决方案; 最中发现,在index.html设置了html,body的宽高设置成了100%; 这样会造成window.onscroll监听不到正确的...
  • watch: { $route: { immediate: true, // 一旦监听到路由的变化立即执行 handler() { //操作 //深度监听,同时也可监听到param参数变化 }, deep: true, } },
  • 监听对象 plinedata: {}, 赋值部分 //创建plinedata键,赋值为列表 if (!this.plinedata[analysisobj.ID]) { this.plinedata[analysisobj.ID] = [] } //像plinedata对象对应设备ID添加坐标对象 this.plinedata...
  • 背景:使用element-plus插件时,有个元素设置了overflow:auto,导致滚动的并不是window,而是这个元素 未生效写法: const handleScroll = () => { let scrollTop = window.pageYOffset console.log...
  • 1、安装 npm install element-resize-detector 2、import elementResizeDetectorMaker from ‘element-resize-... //监听id为box的元素 重绘echarts erd.listenTo(document.getElementById("box"),(element)=&g
  • 绑定在window上 addEventListener 事件需要 第三个参数设置为true,不然事件不起作用 mounted() { window.addEventListener('scroll',this.handleScroll,true) } methods: { handleScroll(){ ...
  • Vue监听vuex中的数据变化

    千次阅读 2020-08-10 19:48:38
    Vue-监听-vuex 在我们日常的电商软件中,购物车中的最后就是一个推荐商品的组件,那我们如何在组件中直接添加到购物车,并完成购物车的渲染呢? 这就要用到Vue中的watch了 watch主要作用是监听数据的变化 假如我们的...
  • store.state中的对象属性发生改变,引用state的组件中却监听不到变化,深度监听也不起作用,如下代码: // state.js noticeParams: [ { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null}, { CODE...
  • 前端使用技术为VUE 踩坑记录 最近在项目里,因为需要监听滚动事件,就直接写监听代码如下: 尝试一、 html: <div id="scroll-div" @scroll="scrollHandle"> 监听我的滚动 <div> js: scrollHandle() { ...
  • Vue-cli watch监听$route失效

    千次阅读 2020-05-14 16:49:16
    使用官网的例子使用无效: '$route' (to, from) { console.log(to.path); //当前路由 ...这是因为在某个路由下所要监听的路由只能是他的子路由,比如你在/a下只能监听/a这个路由的子路由的变化。 ...
  • Vue监听键盘,直接用@绑定就可以,而且Vue为几个常用的按键提供了别名,不用去查询按键的keyCode全部的按键别名.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right一、input标签绑定esc键 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,842
精华内容 2,336
关键字:

vue监听失效