监听属性
简单监听
点击切换名字，来回变更Tom/Jerry，输出
你好，Tom/Jerry
- 代码
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>监听属性</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>监听属性</h1>
<div>
<h2>你好，{{name}}</h2>
<button @click="changeName">切换名字</button>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
const vm = new Vue({
el: "#root",
data: {
isTom: true
},
computed: {
name(){
return this.isTom ? "Tom" : "Jerry"
}
},
methods: {
changeName(){
this.isTom = !this.isTom
}
},
watch: {
// isTom:{
// immediate:true, //初始化就执行handler方法
// // isTom发生改变时执行
// handler(newValue,oldValue){
// console.log("isTom切换了", oldValue + "->" + newValue)
// }
// },
name:{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("名字切换了", oldValue + "->" + newValue)
}
}
},
});
vm.$watch('isTom',{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("isTom切换了", oldValue + "->" + newValue)
}
})
</script>
</html>- 效果
深度监听
监听对象发生变更 numbers:{x:1,y:1}
对象某个属性监听 (x)
- 代码
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>监听属性</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>监听属性</h1>
<div>
<h2>你好，{{name}}</h2>
<button @click="changeName">切换名字</button>
<h2>单属性监听</h2>
<button @click="numbers.x++">监听x+1</button>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
const vm = new Vue({
el: "#root",
data: {
isTom: true,
numbers:{
x:1,
y:2
}
},
computed: {
name(){
return this.isTom ? "Tom" : "Jerry"
}
},
methods: {
changeName(){
this.isTom = !this.isTom
}
},
watch: {
// isTom:{
// immediate:true, //初始化就执行handler方法
// // isTom发生改变时执行
// handler(newValue,oldValue){
// console.log("isTom切换了", oldValue + "->" + newValue)
// }
// },
name:{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("名字切换了", oldValue + "->" + newValue)
}
},
'numbers.x':{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("x变更了", oldValue + "->" + newValue)
}
},
numbers:{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("numbers变更了", oldValue + "->" + newValue)
}
}
},
});
vm.$watch('isTom',{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("isTom切换了", oldValue + "->" + newValue)
}
})
</script>
</html>- 效果
发现变更x, 并没有监听到numbers变更
属性变更能监听到整个对象的变化
深度监听
deep:true可以监听对象内部的值改变（支持多层级）
- 代码
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>监听属性</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>监听属性</h1>
<div>
<h2>你好，{{name}}</h2>
<button @click="changeName">切换名字</button>
<h2>单属性监听</h2>
<button @click="numbers.x++">监听x+1</button>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
const vm = new Vue({
el: "#root",
data: {
isTom: true,
numbers:{
x:1,
y:2
}
},
computed: {
name(){
return this.isTom ? "Tom" : "Jerry"
}
},
methods: {
changeName(){
this.isTom = !this.isTom
}
},
watch: {
// isTom:{
// immediate:true, //初始化就执行handler方法
// // isTom发生改变时执行
// handler(newValue,oldValue){
// console.log("isTom切换了", oldValue + "->" + newValue)
// }
// },
name:{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("名字切换了", oldValue + "->" + newValue)
}
},
'numbers.x':{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("x变更了", oldValue + "->" + newValue)
}
},
numbers:{
immediate:true, //初始化就执行handler方法,
deep:true,// 可以监听对象内部的值改变（支持多层级）
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("numbers变更了", JSON.stringify(oldValue) + "->" + JSON.stringify(newValue))
}
}
},
});
vm.$watch('isTom',{
immediate:true, //初始化就执行handler方法
// isTom发生改变时执行
handler(newValue,oldValue){
console.log("isTom切换了", oldValue + "->" + newValue)
}
})
</script>
</html>- 效果
简写
前提条件：不需要特殊配置（deep、immediate）方可简写
- 代码
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>监听属性</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>监听属性</h1>
<div>
<h2>你好，{{name}}</h2>
<button @click="changeName">切换名字</button>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
const vm = new Vue({
el: "#root",
data: {
isTom: true,
},
computed: {
name() {
return this.isTom ? "Tom" : "Jerry";
},
},
methods: {
changeName() {
this.isTom = !this.isTom;
},
},
watch: {
// 常规操作
// name:{
// immediate:true, //初始化就执行handler方法
// // isTom发生改变时执行
// handler(newValue,oldValue){
// console.log("名字切换了", oldValue + "->" + newValue)
// }
// },
// 简写
name(newValue, oldValue) {
console.log("名字切换了", oldValue + "->" + newValue);
},
},
});
// 正常写法
// vm.$watch('isTom',{
// immediate:true, //初始化就执行handler方法
// // isTom发生改变时执行
// handler(newValue,oldValue){
// console.log("isTom切换了", oldValue + "->" + newValue)
// }
// })
// 简写
vm.$watch("isTom", function (newValue, oldValue) {
console.log("isTom切换了", oldValue + "->" + newValue);
});
</script>
</html>- 效果
