vue数组和对象的监听变化

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.深度监听

<template>
  <div >
    <button @click="changeAge">change</button>
  </div>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      user: { id: 1, name: '李四', age: 14, sex: '男' }
    }
  },
  watch: {
    user: {
      handler: function (val) {
        console.log(val)
      },
      deep: true
    }
  },
  methods: {
    changeAge () {
      this.user.age = 15
    }
  }
}
</script>

2..$set(obj,ket,value)

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性，如果是添加一个新的属性，可以使用$set,但是如果需要修改属性的值，$set将无效

<template>
  <div >
    <button @click="changeAge">change</button>
  </div>
</template>
<script>
export default {
  name: 'assess',
  data () {
    return {
      user: { id: 1, name: '李四', age: 14, sex: '男' }
    }
  },
  watch: {
    user (val) {
      console.log(val)
    }
  },
  methods: {
    changeAge () {
      this.$set(this.user, 'ages', 15)
    }
  }
}
</script>

3.Object.assign对象复制

原理：新建一个空对象将对象复制进空对象再赋值给监听的值，这种方法可以监听到对象属性的新增和修改

this.user = Object.assign({}, this.user)

 二、对象数组监听

1.深度监听

　　同1.1 

2..$set(obj,ket,value)替换

this.$set(this.user, 'ages', { id: 1, name: '张三', age: 13, sex: '男' })

以上是 vue数组和对象的监听变化 的全部内容， 来源链接： utcz.com/z/379875.html

回到顶部