Vue2.0学习—监视属性（三十五）
Posted 王同学要努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.0学习—监视属性（三十五）相关的知识，希望对你有一定的参考价值。
【Vue2.0学习】—监视属性（三十五）
- 通过
vm对象的$watch或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>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很info</h2>
<button @click="change">点我切换天气</button>
<!-- <button @click="isHot=!isHot">点我切换天气</button> -->
</div>
<script>
const vm = new Vue(
el: '#root',
data:
isHot: true
,
computed:
info()
return this.isHot ? '炎热' : '凉爽'
,
methods:
change()
this.isHot = !this.isHot;
)
</script>
</body>
</html>
一、监视属性watch
1、当被监视的属性发生变化时，回调函数自动调用，进行相关的操作
2、监视的属性必须存在，才能进行监视
监视属性的两种写法
-
new Vue时传入watch配置 -
通过
vm.$watch监视
<div id="root">
<h2>今天天气很info</h2>
<button @click="change">点我切换天气</button>
<!-- <button @click="isHot=!isHot">点我切换天气</button> -->
</div>
<script>
const vm = new Vue(
el: '#root',
data:
isHot: true
,
computed:
info()
return this.isHot ? '炎热' : '凉爽'
,
methods:
change()
this.isHot = !this.isHot;
,
// watch:
// isHot:
// immediate: true,
// //什么时候调用？当isHot发生改变时
// handler(newValue, oldValue)
// console.log('isHot被修改了', newValue, oldValue);
//
//
//
)
vm.$watch('isHot',
immediate: true,
handler(newValue, oldValue)
console.log('isHot被修改了', newValue, oldValue);
)
</script>
二、深度监视
<!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>
<script src="../js/vue.js"></script>
</head>
<!--
深度监视
1、Vue中的watch默认不能监测对象内部值的改变(一层)
2、配置deep：true可以监测对象内部值改变（多层）
注意：
Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
使用watch时根据数据的具体结构，决定是否采用深度监视
-->
<body>
<div id="root">
<h2>今天天气很info</h2>
<button @click="change">点我切换天气</button>
<!-- <button @click="isHot=!isHot">点我切换天气</button> -->
<hr>
<h3>a的值是numbers.a</h3>
<button @click="numbers.a++">点我让a+1</button>
<hr>
<h3>b的值是numbers.a</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers=a:666,b:999">彻底替换掉numbers</button> numbers.c.d.e
</div>
<script>
const vm = new Vue(
el: '#root',
data:
isHot: true,
numbers:
a: 1,
b: 1,
c:
d:
e: 100
,
computed:
info()
return this.isHot ? '炎热' : '凉爽'
,
methods:
change()
this.isHot = !this.isHot;
,
watch:
// 'numbers.a':
// handler()
// console.log('a被改变了');
//
//
//监视多级结构中所有属性的变化
numbers:
deep: true,
handler()
console.log('numbers改变了');
)
</script>
</body>
</html>
三、深度监视的简写版
以上是关于Vue2.0学习—监视属性（三十五）的主要内容，如果未能解决你的问题，请参考以下文章
Vue2.0学习—watch和computed对比（三十七）
Android 天气APP（三十五）修复BUG升级网络请求框架