zoukankan      html  css  js  c++  java
  • vue数组和对象的监听变化

    1.深度监听

    <template>
      <div id="test">
        <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 id="test1">
        <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 手动挂载 $amount()
    Redis 主从配置
    DMA分区管理
    C# 构造函数里的base和this的区别
    SQL Server 数据库性能优化
    TCP和UDP的优缺点及区别
    Django框架初步应用简述
    前端vue框架应用雏形
    接口mock之moco
    python进阶(九)~~~协程、进程池、线程/进程/协程对比
  • 原文地址:https://www.cnblogs.com/xmyfsj/p/15236263.html
Copyright © 2011-2022 走看看