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属性绑定函数何时执行的主要内容,如果未能解决你的问题,请参考以下文章