zoukankan      html  css  js  c++  java
  • Vue 数据相关实例方法vm.$watch、vm.$set、vm.$delete

    Vue数据相关实例方法

    vm.$watch

    观察vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。

    //写法一:
    this.$watch('a.b.c', function (newVal, oldVal) {})//键路径
    vm.$watch( function () { this.fullName=this.firstName+' '+this.lastName; } )//函数
    //写法二: watch:{ a:function(val,oldVal){}, "a.b":{ handler:function(newVal,oldVal){}, deep:true//如果监听的是一个对象,对象内部值发生变化,需要设置deep=true; },    c:{    handler:function(newVal,oldVal){}, immediate:true//该回调将会在监听开始之后立即调用    } }

    vm.$set

    向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新

    语法:vm.$set( target,key,value )

    对于对象,propterty必须在data对象上存在才能让Vue将它转换为响应式的

    var vm = new Vue({
        data:{
            a:1
          }
    })
    vm.a = 1  // 响应式的
    vm.b = 2  // 非响应式的
    //Vue不允许添加根级别的响应式属性,但是可以使用
    this.$set(this.someObject, "b", 2)||Vue.set(vm.someObject, "b" ,2)

    对于数组,Vue不能检测以下数组的变动

    var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的
    this.Sset(this.items,1,"x");//处理方法

    vm.$delete

    删除对象的属性,如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开vue不能检测到属性被删除的限制。

    语法:vm.$delete(target,key)
    var vm = new Vue({..})
    vm.delete(this.info, "age")
  • 相关阅读:
    nginx的url重写[rewrite规则和参考]
    nginx虚拟主机配置
    redhat 5下源码安装nginx服务
    apache服务器参数设置
    java实现全排列
    自定义栈类型,具有找到站内最小元素的min函数 ,且min(),pop(),push()函数的时间复杂度为O(1)
    如何学习一门新语言
    2018 中印诗人分享会
    C语言细节注意
    C++ vector 多次删除第一个元素
  • 原文地址:https://www.cnblogs.com/liangtao999/p/13714941.html
Copyright © 2011-2022 走看看