新网站seo,综合办公系统,wordpress分类目录默认模版,请上传网站应用水印图片一 侦听响应式ref
侦听响应式ref常量#xff0c;当常量的ref的value值发生改变时会触发watch
一个小栗子#xff1a;当输入框的输入内容变化时下方的文本也会跟着改变
templatediv classbox contentdiv classintroel…一 侦听响应式ref
侦听响应式ref常量当常量的ref的value值发生改变时会触发watch
一个小栗子当输入框的输入内容变化时下方的文本也会跟着改变
templatediv classbox contentdiv classintroel-input v-modelinput changeinputChange/el-input/divdiv classintroel-text{{ message }}/el-text/div
/template
script setup
import { ref, reactive, watch } from vue;
import { getCurrentInstance } from vue;const instance getCurrentInstance().proxy;const input ref();
const message ref();watch(input, (newValue, oldValue) {message.value input值发生了变化newValue newValue , oldValue oldValue;
});/** 事件回调 */
const inputChange () {console.log(input value , input.value);
}
/script
style scoped langless
.box{display: flex;flex-direction: column;margin: 10px;padding: 15px;.intro{padding: 20px;}
}
/style
二 监听reactive响应式对象
系统默认是深层监听当响应式对象的属性发生改变时会触发watch
一个小栗子当点击一次primary按钮时可以看到cmpNum的count会加3
templatediv classbox contentdiv classintroel-button typeprimary clickcmpNumChangecmpNum.count {{ cmpNum.count }}/el-button/divdiv classintroel-text{{ cmpMsg }}/el-text/div/div
/template
script setup
import { ref, reactive, watch } from vue;
import { getCurrentInstance } from vue;const instance getCurrentInstance().proxy;const cmpNum reactive({count: 0});
const cmpMsg ref();// 监听reactive响应式对象系统默认是深层监听当响应式对象的属性发生改变时会触发watch
// 当点击一次primary按钮时可以看到cmpNum的count会加3
watch(cmpNum, (newValue, oldValue) {cmpMsg.value cmpNum.cout cmpNum.count;
});// 注当监听响应式对象时不能直接监听响应式对象的value
watch(() cmpMsg.value,(value) {console.log(watch cmpMsg value , value);}
)/** 事件回调 */
const cmpNumChange () {cmpNum.count cmpNum.count 2;console.log(cmpNum.value , cmpNum.count);
}
/script
style scoped langless
.box{display: flex;flex-direction: column;margin: 10px;padding: 15px;.intro{padding: 20px;}
}
/style
三 深层侦听器
直接给 watch() 传入一个响应式对象会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发
一个小栗子 当点击button时会在回调事件中改变person的属性从而触发侦听器watch
在使用时主要是在代码中加入{deep: true}
templatediv classbox contentdiv classintroel-button typeprimary clickchangePersonNameperson name is {{ state.person.name }}/el-button/div/div
/template
script setup
import { ref, reactive, watch } from vue;
import { getCurrentInstance } from vue;const person {name: Pem, age: 20};
const state ref({person: person});// 使用deep:true属性进行对象的深层监听
watch (() state.value.person,(newValue, oldValue) {console.log(deep newValue , newValue);console.log(deep oldValue , oldValue);},{deep: true}
)/** 事件回调 */
const changePersonName () {state.value.person.name input.value .Pem;
}
/script
style scoped langless
.box{display: flex;flex-direction: column;margin: 10px;padding: 15px;.intro{padding: 20px;}
}
/style
四 即时回调的侦听器
watch在默认情况下是懒加载的仅在数据源发生变化时才会触发。但在某些场景下我们希望在创建watch时立即执行一次回调。
我们可以通过传入 immediate: true 选项来强制侦听器的回调立即执行。
一个小栗子
templatediv classbox contentdiv classintroel-input v-modelimmediateInput/el-input/div/div
/template
script setup
import { ref, reactive, watch } from vue;const immediateInput ref();// 即使回调的侦听器
/*
watch默认是懒执行的仅当数据变化时才会执行回调。但在某些场景中我们希望在创建某些侦听器时
立即执行一遍回调。举例来说我们想请求一些初始数据然后在相关状态更改时重新请求数据
在下面的例子中可以看到在页面第一次渲染出来后就可以看到在watch中设置的初始值说明这个watch
被执行了一次
*/
watch (() immediateInput.value,(newValue, oldValue) {console.log(new value , newValue);if (newValue ) {getStartValue();}},{immediate: false} //这里需要加入这句
)
function getStartValue(){immediateInput.value start base value;console.log(getStartValue);
}
/script
style scoped langless
.box{display: flex;flex-direction: column;margin: 10px;padding: 15px;.intro{padding: 20px;}
}
/style
