1、监听基本数据,第一次进来不会执行打印,有变化时才执行打印
watch: { data(newValue, oldValue) { console.log('新值', newValue);
console.log('旧值', oldValue); } }
2、监听基本数据,第一次进来就立即执行一次打印,有变化了再次执行打印
immediate: true(最初绑定值的时候也执行函数);不写或者 immediate: false(最初绑定值的时候不执行函数)
watch: { data: { handler(newValue, oldValue) { console.log('新值', newValue);
console.log('旧值', oldValue); }, immediate: true } }
3、监听对象的内部属性改变,属性的添加、删除
普通的watch方法无法监听到对象内部属性的改变,需要配合deep属性使用
deep: true(深度监听内部属性);不写或者 deep: false(无法监听对象内部属性的改变)
watch: { obj: { handler(newVal) { // 逻辑 }, deep: true } }
4、监听对象的内部某个特定属性的值的变化
此时会对象的全部属性都加上深度监听,对象的每一个属性值的变化都会执行handler函数。若是只须要监听对象中的一个属性值,可使用字符串的形式监听对象属性
普通的watch方法无法监听到对象内部属性的改变,需要配合deep属性使用
deep: true(深度监听内部属性);不写或者 deep: false(无法监听对象内部属性的改变)
watch: { 'obj.name': { handler(newVal) { // 逻辑 }, deep: true } }
5、通过watch监听某数据的变化,数据发生变化时,执行定义在 methods 里的方法
watch: { data: 'changeData' // 值可以为methods的方法名 }, methods: { changeData(newValue, oldValue){ console.log('新值', newValue);
console.log('旧值', oldValue); } }
watch中的函数是不需要调用的
watch为监听,监听某数据的变化
主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作
当一条数据影响多条数据的时候就需要用watch