vue2中侦听器watch的使用
什么是侦听器?
在开发中我们在data返回的对象中定义了数据,这个数据通过插值语法(mustache语法)等方式绑定到template中,当数据发生变化时,template会自动进行更新来显示最新的数据
但是在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这时就需要用侦听器watch来完成了
在开发中,一般用侦听器监听props的情况比较多
侦听器的基本使用
我们希望用户在input框中数据内容的时候,每次输入我们都可以获取到最新的内容,之后去访问服务器来输出答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
请输入您的问题:<input type="text" v-model="userQuestion">
<!-- <button>百度一下,查找答案</button> -->
您的答案是:{{answer}}
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
userQuestion:'',
answer:''
}
},
watch: {
// userQuestion是我们要侦听的数据名称
userQuestion(newValue,oldValue){
// 第一个参数是新值,第二个参数是旧值
console.log(`新值:${newValue},旧值:${oldValue}`);
// 之后发起数据请求,渲染页面的答案
this.answer=`我是问题${newValue}的答案`
}
},
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
watch的配置选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<h2>{{info.name}}</h2>
<button @click="changeInfo">改变当前监听的info</button>
<button @click="changeInfoName">改变info.name</button>
<button @click="changeInfoNbaName">改变info.nba.name</button>
</template>
<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: { name: "why", age: 18, nba: {name: 'kobe'} }
}
},
watch: {
// 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听)
// info(newInfo, oldInfo) {
// console.log("newValue:", newInfo, "oldValue:", oldInfo);
// }
// 深度侦听/立即执行(一定会执行一次)
info: {
handler: function(newInfo, oldInfo) {
console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
},
deep: true,
// 深度侦听（可以监听到当前监听对象 内部数据的改变）
// immediate: true
// 立即执行（如果开启立即执行，那么会在页面刚开始加载的时候先执行一次）
},
'info.name':function(newInfo, oldInfo){
console.log(newInfo,oldInfo);
//我们也可以监听对象中的某一个属性
}
},
methods: {
changeInfo() {
this.info = {name: "kobe",age: 18, nba: {name: 'kobe'}};
},
// 改变我们当前侦听的对象，侦听属性可以侦听到
changeInfoName() {
this.info.name = "kobe";
},
// 改变当前侦听对象里面的一个属性，侦听属性侦听不到
// 这个时候就需要添加deep：true了
changeInfoNbaName() {
this.info.nba.name = "james";
}
// 当添加过深度侦听之后，即使是内部还有嵌套的对象，依然是可以监听到的
}
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>