互动网站制作自己做一个网站需要什么

概念：监听数据变化，当数据更新是自动执行函数

应用场景：搜索数据、当一个数据发生了变化需要进行二外的操作时需要用到watch。

1、语法：（与data，methods同级）

1.1、监听的变量(newVal, aldVal){}

1.2、监听的变量：{handler(newVal, aldVal){},属性}
 

2接收两个参数：

第一个newVal为改变后的数据，第二个aldVal为改变前的数据：

watch: {name(newVal, aldVal) {console.log("发生了修改。" + "修改后： " + newVal + "  修改前： " + aldVal);},
}

应用场景：

什么时候用？

当数据发生改变后，需要额外做其他的操作时（复杂逻辑应用，可能包含异步）

3属性

默认为数据发生改变后执行监听，可通过属性改变：

immediate: true 立刻监听

语法：

watch:{数据名: {handler(newVal, aldVal) {console.log("发生了修改。" + "修改后： " + newVal + "  修改前： " + aldVal);},// 立即监听属性immediate: true,},
}

deep:true 深度监听

应用场景：对象的监听

注意点：一般情况下不会用深度监听，一般直接监听对象中具体某一个属性

语法：

user: {handler(newVal, aldVal) {console.log("发生了修改。" + "修改后： " , newVal , "  修改前： " ,aldVal);},// 深度监听deep:true
},

deep优化:

直接监听对象中具体某一个属性

"obj.age": {handler(val, oldVal) {console.log(val, oldVal);},deep: true,immediate: true,		// 此时监听的数据不是一个对象，可以使用immediate
}