监视属性watch
示例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <h2>今天添加很--{{ishot?'炎热':'凉爽'}}</h2>
<hr> -->
实现方式一：
<button @click="changeWeather">切换天气1</button>
<h2>今天天气很--{{wetherInfo}}1</h2>
<hr>
实现方式二：
<button @click="isHot=!isHot">切换天气2</button>
<h2>今天天气很--{{wetherInfo}}2</h2>
</div>
</body>
</html>
<script type="text/javascript">
//console.log(vm)
const vm = new Vue({
el: '#root',
data: {
isHot: true,
},
computed: {
wetherInfo () {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather () {
this.isHot = !this.isHot
},
},
})
</script>
示例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监视属性watch</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
实现方式一：
<button @click="changeWeather">切换天气1</button>
<h2>今天天气很--{{wetherInfo}}1</h2>
<hr>
</div>
</body>
</html>
<script type="text/javascript">
//console.log(vm)
const vm = new Vue({
el: '#root',
data: {
isHot: true,
},
computed: {
wetherInfo () {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather () {
this.isHot = !this.isHot
},
},
// watch 监视
watch:
{
// 监视普通属性
isHot: {
immediate: true,//初始化时让handler调用一下
handler (newValue, oldValue) {//当属性被更改时，调用
console.log('isHot 被修改了' + this.isHot)
console.log(newValue + ' isHot被修改了 ' + oldValue)
}
},
// 监视计算属性
wetherInfo: {
immediate: true,//初始化时让handler调用一下
handler (newValue, oldValue) {//当属性被更改时，调用
console.log(' wetherInfo 被修改了 ' + this.isHot)
console.log(newValue + ' wetherInfo 被修改了 ' + oldValue)
}
},
}
})
// vm对象监视
vm.$watch('wetherInfo', {
immediate: true,//初始化时让handler调用一下
handler (newValue, oldValue) {//当属性被更改时，调用
console.log(newValue + ' wetherInfo 被修改了--vm对象监视 ' + oldValue)
}
})
</script>
总结：监视属性watch
- 当被监视属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视
- 监视的两种写法：
- new Vue时，使用传入watch配置
- 通过vm对象 vm.$watch方式监视
深度监视
- Vue的watch默认不监测对象内部值的改变(一层)
- 配置deep:true可以监视对象内部值的改变(多层)
备注：
- Vue自身可以监测对象内部值的改变，但Vue提供的wathc默认不可以
- 使用watch时根据数据的具体结构，决定是否采用深度监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深度监视属性watch</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
实现方式一：
<button @click="changeWeather">切换天气1</button>
<h2>今天天气很--{{wetherInfo}}1</h2>
<hr>
<h2>x的值是：{{numbers.x}}</h2>
<button @click="numbers.x++">点我x++</button>
<hr>
<h2>y的值是：{{numbers.y}}</h2>
<button @click="numbers.y++">点我y++</button>
</div>
</body>
</html>
<script type="text/javascript">
//console.log(vm)
const vm = new Vue({
el: '#root',
data: {
isHot: true,
numbers: {
x: 1,
y: 1,
}
},
computed: {
wetherInfo () {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather () {
this.isHot = !this.isHot
},
},
// watch 监视
watch:
{
// 监视多级结构中某个属性的变化
'numbers.x': {
handler () {//当属性被更改时，调用
console.log(' numbers.x 被修改了')
}
},
// 监视多级结构中所有属性的变化
numbers: {
deep: true,
handler () {//当属性被更改时，调用
console.log('numbers 被修改了')
}
},
// 监视普通属性
isHot: {
immediate: true,//初始化时让handler调用一下
handler (newValue, oldValue) {//当属性被更改时，调用
console.log('isHot 被修改了' + this.isHot)
console.log(newValue + ' isHot被修改了 ' + oldValue)
}
},
// 监视计算属性
wetherInfo: {
immediate: true,//初始化时让handler调用一下
handler (newValue, oldValue) {//当属性被更改时，调用
console.log(' wetherInfo 被修改了 ' + this.isHot)
console.log(newValue + ' wetherInfo 被修改了 ' + oldValue)
}
},
}
})
</script>
监视简写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监视属性简写</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很--{{wetherInfo}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>
</html>
<script type="text/javascript">
//console.log(vm)
const vm = new Vue({
el: '#root',
data: {
isHot: true,
},
computed: {
wetherInfo () {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather () {
this.isHot = !this.isHot
},
},
// watch 监视
watch:
{
// 监视普通属性
/* 正常写法
isHot: {
// immediate: true,//初始化时让handler调用一下
// deep: true,//深度监视
//简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
handler (newValue, oldValue) {//当属性被更改时，调用
console.log('isHot 被修改了' + this.isHot)
console.log(newValue + ' isHot被修改了 ' + oldValue)
}
}, */
// 简写
isHot (newValue, oldValue) {
//简写方式 只能有 handler 不能有其他设置，如上代码deep: true,存在的话，则不可简写
// console.log('isHot 被修改了' + this.isHot)
console.log(newValue + ' isHot被修改了 ' + oldValue)
},
}
})
// 完整写法 vm对象监视
/* vm.$watch('isHot', {
immediate: true,//初始化时让handler调用一下
deep: true,//深度监视
handler (newValue, oldValue) {//当属性被更改时，调用
console.log(newValue + ' isHot 被修改了--vm对象监视 ' + oldValue)
}
}) */
// 简写
// vm.$watch('isHot', function (newValue, oldValue) {
// console.log(newValue + ' isHot 被修改了--vm对象监视 ' + oldValue)
// })
</script>
标签：Vue,console,log,16,watch,isHot,oldValue,监视 From： https://www.cnblogs.com/YYkun/p/18034374