vue基础之7：天气案例、监视属性、深度监视、监视属性（简写）
欢迎来到“雪碧聊技术”CSDN博客！
在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！
目录
一、天气案例
1、案例介绍
2、编码
3、简写
注意：如果简写的方法，包含vue实例以外的方法，那就需要声明一下
二、监视属性
1、监视属性是干嘛的？
2、监视的两种写法
①创建vue实例时，配置watch
举例：
②vue实例已经存在，通过vm.$watch配置
举例：
3、什么属性可以被watch监视？
举例：
三、深度监视
1、案例：如何检测多级的属性
具体编码：
2、上述案例存在的问题：当numbers下面，有几百个属性，并且当任意一个属性改变时，视为numbers不变
举例：
3、如何解决上述问题？采用深度监视
举例：
4、总结
四、监视属性（简写）
1、什么情况下，能简写监视属性的代码？
举例：
2、如何简写监视属性的代码？
①通过在vue实例中，声明监视属性时
②通过vm.$watch声明监视属性时
一、天气案例
1、案例介绍
2、编码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气案例</title><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{weather}}</h2><button @click="changeWeather">点击切换天气</button></div><script type="text/javascript">new Vue({el:'#root',data:{isHot: true},methods: {changeWeather(){this.isHot = !this.isHot}},computed:{weather(){return this.isHot?'炎热':'凉爽'}}})</script>
</body>
</html>运行效果：
3、简写
注意：如果简写的方法，包含vue实例以外的方法，那就需要声明一下
二、监视属性
1、监视属性是干嘛的？
被监视的属性，发生修改时，会触发handler方法，并且能够获取到修改前、后的属性。
2、监视的两种写法
①创建vue实例时，配置watch
举例：
运行结果：
②vue实例已经存在，通过vm.$watch配置
举例：
运行结果：
3、什么属性可以被watch监视？
普通属性（data里的）和计算属性（computed里的），都可以被watch作为监视属性。
举例：
三、深度监视
1、案例：如何检测多级的属性
具体编码：
运行效果：
2、上述案例存在的问题：当numbers下面，有几百个属性，并且当任意一个属性改变时，视为numbers不变
举例：
运行效果：
3、如何解决上述问题？采用深度监视
举例：
运行效果：
4、总结
vue默认不开启深度监视，是为了效率。
如果想开启深度监视，那么就配置deep：true即可。
举例：
四、监视属性（简写）
1、什么情况下，能简写监视属性的代码？
不需要额外的配置时，即：监视属性的方法体中，只有handler方法时，才能简写。
举例：
2、如何简写监视属性的代码？
①通过在vue实例中，声明监视属性时
运行效果：
②通过vm.$watch声明监视属性时
以上就是vue中的监视属性的全部内容，想了解更多的vue知识，请关注本博主~~