精华内容
下载资源
问答
  • vue3 watch深度监听
    千次阅读
    2021-02-26 14:45:48

    vue3.0 watch 设置深度监听

    <script>
    import { watch } from 'vue';
    export default {
      props:["filter"],
      setup(props){
        watch(
          () => {
            return props.filter
          },
          state => {
            getStatistics(state.value)
          },
          { 
            deep:true
            ...
          }
        )
      }
    }
    </script>

     

    更多相关内容
  • 主要介绍了vue watch普通监听和深度监听(数组和对象),文中单独通过代码给大家介绍了vue watch 深度监听的方法,感兴趣的朋友一起看看吧
  • 当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值  <input type=text v-model=a.a1.a12/>{{a.a1.a12}}  <input type=text v-model=a.a2.a22/>{{a.a2.a22}} [removed] ...
  • vuewatch深度监听

    千次阅读 2022-02-08 20:28:44
    watch深度监听的正确打开方式 1.借助deep: true深度监听 watch: { obj: { // 数据变化时执行的逻辑代码 handler(newName, oldName) { console.log(‘obj.a changed’); }, // 开启深度监听 deep: true } } watch...

    Vue提供了一个watch方法去监听某些data内的数据变动,从而触发相应的操作,当需要在数据变化时执行异步或开销较大的操作时,watch方法是最有用的

    watch深度监听的正确打开方式

    1.借助deep: true深度监听

    watch: {
    obj: {
    // 数据变化时执行的逻辑代码
    handler(newName, oldName) {
    console.log(‘obj.a changed’);
    },
    // 开启深度监听
    deep: true
    }
    }

    watch监听对象,同时用deep: true深度监听,此时只有对象中的某个值发生改变就会触发

    2.借助computed计算属性监听

    // 通过计算属性,计算出需要监听的数据
    computed: {
    changed: function () {
    return this.obj.changed
    }
    },
    // 不通过deep,仍然可以深度监听计算出来的数据
    watch: {
    changed: function () {
    console.log(this.changed)
    }
    }

    通过computed计算属性的配合,先计算出需要监听的属性后用watch监听

    从性能以及可读性考虑,个人比较推荐第二种方式

    1.watch的用法

    假设有如下代码:下面的代码的效果是,当我们输入firstName后,wacth监听firstName每次修改变化的新值,然后计算输出fullName。

    <div id="root">
        <p>FirstName: <input type="text" v-model="firstName"></p>
        <p>FullName: {{fullName}}</p>
      </div>
      <script>
        new Vue({
          el: '#root',
          data: {
            firstName: '张',
            lastName: '三',
            fullName: ''
          },
          watch: {
            firstName(newName, oldName) {
              this.fullName = newName + ' ' + this.lastName;
            }
          }
        })
      </script>
    </body>
    

    在firstName输入框中输入“李”,改变了firstName的值,则会触发watch选项中的firstName函数,执行相应操作

    2、watch方法和属性

    【1】handler方法

    watch: {
      firstName: {
        handler(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        }
      }
    }
    

    我们给 firstName 绑定了一个handler方法,之前我们写的 watch 方法其实默认执行的就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。

    【2】immediate属性

    使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

    immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。

    watch: {
      firstName: {
        handler(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        immediate: true
      }
    }
    

    在这里插入图片描述

    【3】deep属性

    当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,比如我们 data 里有一个person对象,当我们在输入框中输入数据改变person.name的值时,我们发现person监听函数是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

    <div id="root">
      <p>name: <input type="text" v-model="person.name"></p>
      <p>name: {{person.name}}</p>
    </div>
     
    <script>
      new Vue({
        el: '#root',
        data: {
          person: {
            name: ''
          }
        },
        watch: {
          person: {
            handler(newName, oldName) {
              console.log('person.name changed')
            },
          }
        }
      })
    </script>
    如果我们需要监听person对
    

    如果我们需要监听person对象的值变化呢?此时就需要deep属性对对象进行深度监听,deep属性默认值是 false,代表是否深度监听。监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改person里面任何一个属性都会触发这个监听器里的 handler函数。

    watch: {
     person: {
      handler(newName, oldName) {
       console.log('person changed');
      },
      deep: true
    }
    

    有时候我们就想关心这个对象中的某个属性,比如person.name,这个时候我们可以使用字符串形式监听。这样Vue.js才会一层一层解析下去,直到遇到person属性name,然后才给name设置监听函数。

    watch: {
     'person.name': {
      handler(newName, oldName) {
       console.log('person.name changed');
      },
     }
    }
    
    展开全文
  • vue3 watch 监听多值以及深度监听用法

    千次阅读 2022-03-06 00:09:53
    watch-监听器(侦听器),作用是用来侦测响应式数据的变化,可以得到newValue和oldValue,Vue3watch使用有了一些细微的变化,下面举几个例子看一下是如何应用的 以获取浏览器地址栏路由为例: 1.监听单个值 引入: ...

    watch-监听器(侦听器),作用是用来侦测响应式数据的变化,可以得到newValue和oldValue,Vue3中watch使用有了一些细微的变化,下面举几个例子看一下是如何应用的

    以获取浏览器地址栏路由为例:

    1.监听单个值

    引入:
    import {…, watch} from “vue”;
    import {useRouter} from ‘vue-router’;

    export default {
     setup() {
     	 const route = useRouter();
     	 //获取当前路由地址
     	 watch(
            () => route.currentRoute.value.path,
            (newVal, oldVal) => {
             console.log(newVal, oldVal);
             }
          )
     }
    }
    

    2.监听多个值
    还是上面路由的例子

    export default {
     setup() {
     	 const route = useRouter();
     	 //获取当前路由地址
     	 watch(
            () => [route.currentRoute.value.path,route.currentRoute.value.href],
            (newVal, oldVal) => {
            //此时返回的是数组,按下标获取对应值
             console.log(newVal, oldVal);
             }
          )
     }
    }
    

    2.深度监听
    还是上面路由的例子,深度监听用于监听一个复杂的对象,和vue2一样使用deep:true, 但是vue3里面要使用 {deep:true}

    export default {
     setup() {
     	 const route = useRouter();
     	 //获取当前路由地址
    	 watch(()=>route, (newVal, oldVal) => {
               console.log(newVal)
               console.log( oldVal)
             },
             //深度监听
             {deep: true}
         )
     }
    }
    

    以上就是watch的几种常见用法

    展开全文
  • vue——watch深度监听

    千次阅读 2021-07-20 16:42:39
    文章目录watch 的方法和属性【1】handler 方法【2】immediate 属性【3】deep 属性深度监听的方法有哪些?【1】使用 deep 属性【2】使用 computed 计算属性监听 watch 的方法和属性 【1】handler 方法 举个????,...


    watch 的方法和属性

    【1】handler 方法

    举个🌰,代码如下:其实我们平时写的 watch 方法都是会去默认执行这个 handler 方法的

    watch: {
      name: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        }
      }
    }
    

    【2】immediate 属性

    这个属性存在的原因在于 watch 有一个特点:当一个值第一次被绑定时,是不会执行监听函数( watch )的,只有当值发生了改变才回去执行。
    当我们需要在最初绑定值的时候,就对该值执行监听,那就用到了这个属性。
    举个🌰,代码如下:

    watch: {
      name: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        immediate: true
      }
    }
    

    【3】deep 属性

    当需要监听一个对象的改变时,以上的监听方式已经不能满足,原因是受到 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除,导致我们对一个对象的监听是无效的。
    此时,我们需要使用 deep 属性对对象进行深度监听。
    举个🌰,代码如下:

    watch: {
      obj: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        deep: true
      }
    }
    

    [注意] deep 的默认值是 false,为什么?因为使用了 deep 之后,监听器就会一层层的往下遍历,这样做可想而知对性能的开销非常的大,当我们只需要对一个对象里的某个属性进行监听时,可以使用字符串形式监听。如此,Vue 就会一层一层解析下去,直到遇到需要监听的属性,给其设置监听函数。
    举个🌰,代码如下:

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

    深度监听的方法有哪些?

    【1】使用 deep 属性

    举个🌰,代码如下:

    watch: {
      obj: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        // 开启深度监听
        deep: true
      }
    }
    

    【2】使用 computed 计算属性监听

    // 通过计算属性,计算出需要监听的数据
    computed: {
      changed() {
        return this.obj.name
      }
    },
    
    // 不通过deep,仍然可以深度监听计算出来的数据
    watch: {
      changed: {
        handler(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
      }
    }
    
    展开全文
  • vue watch深度监听

    千次阅读 2022-03-26 10:36:15
    "arr":{ handler:function(cur,old){ if(cur != ""){ this.open = false }else{ this.open = true } }, deep:true, //对象内部的属性监听,也叫深度监听 ...所谓的深度监听其实就是不但监听自身数据的变化,...
  • VUE3watch监听使用

    千次阅读 2022-03-01 23:29:17
    VUE3watch监听使用watch介绍watch监听的不同情况1 监听单个refimpl数据2 监听多个refimpl数据3 监听proxy数据4 监听proxy数据的某个属性5 监听proxy数据的某些属性总结 watch介绍 vuewatch用来监听数据的响应式...
  • vuewatch深度监听(deep:true)

    万次阅读 2020-11-14 10:12:54
    3深度监听 1、watch加上deep:true之后就是深度监听 2、handler中返回变化后端obj 3watch第一次加载不执行,数据有变化才会执行,如果需要页面加载完毕执行,那就加上immediate:true与deep同级 ...
  • vuewatch 深度监听

    2021-02-23 17:55:03
    设定watch监听,deep:true 设置深度监听 当telphone值发生变化时触发handler方法 注意:这里的function不能写成箭头函数,不然this将不在此组件内https://cn.vuejs.org/v2/api/#watch handler函数中的意思就是每次...
  • vue watch 深度监听

    2022-03-29 09:01:06
    vue watch 深度监听
  • export default { data () { return { a: { ...watch: { ...//想监听 c 此时 数 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战... 深度监听 “a.b.c”: function (newValue, oldValue) { } } } ..
  • 由于对象是引用类型地址,修改对象属性 watch正常不会监听到 值类型和引用类型的区别# (1)值类型: 1、占用空间固定,保存在栈中(当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会...
  • 一、watch 深度监听 watch: { formData: { deep: true, handler(nv) { console.log("对象发生改变", nv); }, }, }, 二、使用 $set 改变对象值 created() { // 直接赋值监听无效 // this.formData.name ...
  • Vue3watch监听的多种情况

    千次阅读 2022-02-26 22:09:20
    1.vue3中的watch为函数形式,直接在setup里面使用,有三个参数: 第一个是监听的对象 第二个是监听的回调,由于setup不需要考虑this的指向问题,所以可以直接在watch中写箭头 函数 第三个是监听的配置项;如果有...
  • 主要介绍了vue.js浅度监听和深度监听watch用法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • data中的数据如下 data: { num:10, count: 100, zhangsan:{ name:'张三', age: 12, } ...添加监听 ...watch: { num:function(newVal, oldVal){ console.log('num的值发生了变化:'+this.num);...
  • Vue中使用watch监听属性以及深度监听
  • watch可以让我们监控一个值的变化,从而做出相应的反应。 <div id="app"> 用户名:<input type="text" v-model='name'> <p>你的名字是:{{name}}</p> </div> <!-- 引入vue...
  • vuewatch深度监听

    2021-06-24 09:19:57
    查询资料得知watch里面还有一个属性 deep,默认值是 false,代表是否深度监听,然后修改如下: watch: { // 深度 watcher isdetail6: { handler: function (val, oldVal) { this.querycertificate(val.zwsId) }, ...
  • vue深度监听watch

    2022-01-25 18:04:29
    watch可以让我们监控一个值的变化,从而做出相应的反应 <div id="app"> 用户名:<input type="text" v-model='person.name'> <button @click='person.age++'>+</button> <p>你的...
  • vue-watch 深度监听!!

    万次阅读 2019-07-26 14:49:03
    Vue提供了一个watch方法去监听某些data内的数据变动,从而触发相应的操作,当需要在数据变化时执行异步或开销较大的操作时,watch方法是最有用的 一、watch用法 假设有如下代码:下面的代码的效果是,当我们输入...
  • vue3 使用watch监听数组问题

    千次阅读 2021-07-30 15:19:25
    vue3中使用watch的时候需要注意的事项很多, 其中需要一项需要注意的是在监听数组的时候 假设在setup里面有这样的结构 const test = reactive({ arr: [1,2,3,4,5] }) watch(test.arr,(now,old)=>{ ...
  • 如下所示: var vm=new Vue({ data:{ ... b:{//深度监听,可监听到对象、数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:tru
  • Vuewatch深度监听

    2021-10-19 20:58:07
    普通的监听 <input type="text" v-model="user.name"> <input type="text" v-model="user.age"> <script> export default { data(){ return { user: { name: "", age: 0 } } }, watch:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,396
精华内容 3,358
关键字:

vue3 watch深度监听