为什么Vue.js中的watch方法在道具未更改时被触发?
我了解,当更改/重新分配正在监视的属性/数据时,会触发该属性/数据的监视方法 然而,在这段代码片段中,initTasks的watch方法被触发,尽管initTasks没有被更改/触摸(或者看起来是这样) 此代码段应该在每次添加任务时增加“估计值”。但是,估计值不会增加,因为每次估计值都会被initTask的watch方法覆盖为什么Vue.js中的watch方法在道具未更改时被触发?,vue.js,Vue.js,我了解,当更改/重新分配正在监视的属性/数据时,会触发该属性/数据的监视方法 然而,在这段代码片段中,initTasks的watch方法被触发,尽管initTasks没有被更改/触摸(或者看起来是这样) 此代码段应该在每次添加任务时增加“估计值”。但是,估计值不会增加,因为每次估计值都会被initTask的watch方法覆盖 Vue.component('customcomponent'{ 道具:['initTasks','initEstimate'], 数据(){ 返回{ 任务:[], 估
Vue.component('customcomponent'{
道具:['initTasks','initEstimate'],
数据(){
返回{
任务:[],
估计:0,
}
},
模板:`
-
{{task.text}
你需要{{估计}个小时才能完成所有这些
添加任务
`,
方法:{
初始化(){
this.tasks=this.initTasks;
this.estimate=this.initEstimate;
},
addTask(){
Vue.set(this.tasks,this.tasks.length{
文本:“执行此新任务”
});
这个.估计++;
}
},
观察:{
initTasks:函数(oldval、newval){
log('watchforinittasks触发器!');
这是初始化();
}
},
安装的(){
console.log('mounted()已触发!')
这是初始化();
},
创建(){
console.log('created()triggered!')
},
更新的(){
console.log('updated()triggered!')
},
销毁(){
console.log('updated()triggered!')
}
});
新Vue({
el:“应用程序”,
数据:{
任务:[
{text:“学习JavaScript”},
{文本:“学习Vue”},
{text:“在JSFiddle中玩”},
{文本:“构建一些很棒的东西”}
],
估计数:5
}
});代码>
如果将初始化方法更改为:
initialize() {
this.tasks = this.initTasks.slice();
this.estimate = this.initEstimate;
}
一切都会好起来的。我认为监视程序被触发是因为当您更改任务数组时,initTasks也会被更改,因为数组是
如果您正在使用es2015及更高版本,您可以:
this.tasks=…[this.initTasks]代码>或
this.tasks=Array.from(this.initTasks)代码>