精华内容
下载资源
问答
  • vue watch对象内的属性

    万次阅读 2018-01-18 16:54:26
    vue可以通过watch监听data内数据的变化。通常写法是: new Vue({ data: { a: 100, msg:{ channel:'音乐', style:'活泼' } }, watch: { a: function (newval, oldVal) { console.log('new: %

    vue可以通过watch监听data内数据的变化。通常写法是:

    new Vue({
      data: {
        a: 100,
        msg:{
            channel:'音乐',
            style:'活泼'
        }
      },
      watch: {
        a: function (newval, oldVal) {
          console.log('new: %s, old: %s', newval, oldVal)
        }
      }
    })

    但是如果你要监听的数据是对象内的某一属性,直接watch对象的属性(eg:msg.channel)就会报错了
    这里写图片描述
    而监听整个对象的时候(eg:msg)会发现无论何时newval和oldVal的值都是一样的,这是因为msg这个对象的指向并没有发生改变,所以需要深度监测

    watch: {
      msg: {
        handler(newValue, oldValue) {
          console.log(newValue)
        },
        deep: true
      }
    }

    如果监听对象内的某一具体属性,可以通过computed做中间层来实现

      computed: {
      channel() {
        return this.msg.channel
      }
      },
      watch:{
        channel(newValue, oldValue) {
        console.log('new: %s, old: %s', newval, oldVal)
        //这里面可以执行一旦监听的值发生变化你想做的操作
      }
      }
    展开全文
  • 发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了。 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。请参照...

    问题

    很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了。

    解决

    • 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。请参照https://v1-cn.vuejs.org/guide/reactivity.html
    • 解决方式:
      • 通过vue的this.$set(object, key, value)方法
      • 通过Object.assign()重新创建一个对象, 例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

    代码实例

    <template>
      <div>
        <p @click="fun1" style="color: blue">方式一</p>
        <p @click="fun2" style="color: blue">方式二</p>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          p: {a: 1}
        }
      },
      methods: {
        fun1 () {
          console.log('click 1111')
          // this.p.b = 2 // 通过点方法赋值,发现观察不到p的变化
          this.$set(this.p, 'b', 2) // 第一种解决方式,可以查看日志看到已经监听到了变化
        },
        fun2 () {
          console.log('click 2222')
          this.p = Object.assign({}, this.p, {c: 3})
        }
      },
      watch: {
        p: {
          handler (cval, oval) {
            console.log('--------')
            console.log(cval, oval)
          },
          deep: true
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    

    总结

    个人推荐使用第二种解决方式,代码写起来更优雅。第一种解决方式如果有多个值会出现,多行$set()语句。

    展开全文
  • vue提供了watch方法,用于监听实例内data数据的变化。通常写法是: new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { ...

    vue提供了 watch 方法,用于监听实例内 data 数据的变化。通常写法是:

    new Vue({
      data: {
        count: 10,
        blog:{
            title:'my-blog',
            categories:[]
        }
      },
      watch: {
        count: function (newval, oldVal) {
          console.log(`new: %s, old: %s`, newVal, oldVal);
        }
      }
    })

    上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内的某一属性值的变化,直接watch对象blog是检测不到变化的,这是因为blog这个对象的指向并没有发生改变。有几个解决方法

    1.深度监测

    new Vue({
      data: {
        count: 10,
        blog:{
            title:'my-blog',
            categories:[]
        }
      },
      watch: {
        blog:{
            handler(newVal,oldVal){
                console.log(`new: ${newVal}, old: ${oldVal}`);
            },
            deep:true
        }
      }
    })

     里面的deep设为了true,这样的话,如果修改了这个blog中的任何一个属性,都会执行handler这个方法。不过这样会造成更多的性能开销,尤其是对象里面属性过多,结构嵌套过深的时候。而且有时候我们就只想关心这个对象中的某个特定属性,这个时候可以这样

    2.用字符串来表示对象的属性调用

    new Vue({
      data: {
        count: 10,
        blog:{
            title:'my-blog',
            categories:[]
        }
      },
      watch: {
        'blog.categories'(newVal, oldVal) {
            console.log(`new:${newVal}, old:${oldVal}`);
        }, 
      }
    })

    3.使用computed计算属性

    new Vue({
      data: {
        count: 10,
        blog:{
            title:'my-blog',
            categories:[]
        }
      },
      computed: {
        categories() {
          return this.blog.categories;
        }
      },
      watch: {
        categories(newVal, oldVal) {
          console.log(`new:${newVal}, old:${oldVal}`);
        }, 
      },
    })

     

    展开全文
  • 需求:如果想监听对象 form中 属性 type的变化: <script> export default{ data(){ return{ form:{ name:"", type:"" } } } } </script> 一、可以使用watch 结合 computed computed:{ ...

    需求:如果想监听对象 form中 属性 type的变化:

    <script>
    export default{
        data(){
            return{
                form:{
                    name:"",
                    type:""
                }
            }
        }
    }
    </script>
    

    一、可以使用watch 结合 computed

    computed:{
        type(){
            return this.form.type
        }        
    },
    watch:{
        type(val){
             console.log(val)
        }

    二、使用 deep

    watch:{
      form:{
          handler(newVal){
              console.log(newVal)
          },
          deep:true
      }
    
    }
    
    展开全文
  • vue中watch对象的深度监听

    千次阅读 2019-01-05 21:50:57
    #代码: ...###注意:immediate属性不设置,若是在mounted中改变data中监听对象的属性,是可以触发watch执行的 #watch用来监听data中属性的变化 当message变化的时候触发,但是在data中直接给me...
  • vue中watch对象内部属性失效解决

    千次阅读 2019-06-16 09:46:56
    Vue开发中遇到的坑 今天开发vue的时候,遇到了坑,现总结如下:...我在data里初始化了一个对象,然后,想要watch对象的内部属性? data:function(){ return { form:{ name:'' } } }, <input type="text...
  • vue watch对象或者数组的问题

    千次阅读 2018-09-08 17:48:08
    普通的watch是这个样子的: data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 数组的watch是这个样的: data() { return {...
  • vue watch对象数据内数据的变化

    千次阅读 2018-01-17 11:59:24
    需求 需要根据 数据的变化而...直接用 watch 观察该对象数据,需要加上deep,否则观察不到对象内部数据变化。然后比较需要观察的内部数据的变化。 export default {  data(){  return {  example:{  inner0:
  • 因为watch虽然监听到对象(或数组)内部变化,但是由于新旧值同源,导致没有更新。可采用computed计算属性进行对源对象的深拷贝,完成新值更新。如下: let vm = new Vue({ el:"#box", data:{ list:[], isShow:...
  • Vue.js - watch对象的属性在IE9下失效

    千次阅读 2017-07-25 18:41:10
    实际问题就是监听不到 ‘cashierData.mobile’(对象里的属性)了,但是可以监听到对象, (是不是觉得IE9这货很神奇??对象可以但是对象的属性不可以!我也很绝望啊!)这里提个题外话,当watch监听
  • watch : { p : { handler ( cval , oval ) { console . log ( '--------' ) console . log ( cval , oval ) } , deep : true } } } < / script > < ...
  • 参考watch的深度监听玩法:https://blog.csdn.net/qq_17757973/article/details/78721553 深度监听参考官方:https://cn.vuejs.org/v2/api/#watch <template> <view> <button type=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,811
精华内容 33,524
关键字:

watch对象