vue属性绑定函数何时执行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue属性绑定函数何时执行相关的知识,希望对你有一定的参考价值。

参考技术A vue属性绑定函数初始实例化之后执行。在实例初始化之后,创建之前执行created,实例创建后执行beforeMount,在挂载开始之前调用filters,载前加载过滤器computed。

vue.js监听属性watch(handler方法immediate属性deep属性)

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

handler方法和immediate属性

当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true

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

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

deep属性

watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

设置deep: true 则可以监听到newTemplateForm 的变化,此时会给newTemplateForm 的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:‘newTemplateForm .cycleUpkeep‘

 

newTemplateForm: {
  handler(val) {
    // 频次任务 table 是否为数组
    if (!Array.isArray(val.cycleUpkeep)) {
      this.newTemplateForm.cycleUpkeep = [{
        dayNum: 1,
        timeStart: ‘‘,
        timeEnd: ‘‘
      }]
    }
    // 次数大于table数据条目数
    if (val.cycleUpkeep.dayNum > val.cycleUpkeep.length) {
      console.log(1111)
      for (var i = this.newTemplateForm.cycleUpkeep.length + 1; i <= this.newTemplateForm.cycleUpkeep.dayNum; i++) {
        this.newTemplateForm.cycleUpkeep.push({
          dayNum: i,
          timeStart: ‘‘,
          timeEnd: ‘‘
        })
      }
    }
    // 时间间隔为 undefined 时
    if (!this.newTemplateForm.cycleTypeNum) {
      this.newTemplateForm.cycleTypeNum = 1
    }
    // 时间单位 可能为 0:天
    if (!this.newTemplateForm.cycleType) {
      if (this.newTemplateForm.cycleType === 0) {
        this.newTemplateForm.cycleType = 0
      } else {
        this.newTemplateForm.cycleType = 1
      }
    }
    // 次数为 undefined 时
    if (!this.newTemplateForm.cycleUpkeep.dayNum) {
      this.newTemplateForm.cycleUpkeep.dayNum = 1
    }
  },
  immediate: true,
  deep: true
},

 

viewDetials: {
   handler(val) {
   console.log(val)
   },
   immediate: true,
}

 

以上是关于vue属性绑定函数何时执行的主要内容,如果未能解决你的问题,请参考以下文章

Vue学习之路7-v-on指令学习之简单事件绑定

vue双向数据绑定原理

Azure 函数 - 我们何时需要使用 out 进行输出绑定?

vue的数据双向绑定

VUE表单元素双向数据绑定

Vue 计算属性和监视属性详解细节 class类绑定和style样式绑定