目录

监听属性

前提

我们根据前面学过的知识，今天点击一个按钮，页面上面的数据进行变化，直接给按钮一个点击事件，写法是

<!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 type="text/javascript" src="../js/vue.js"></script>

    <style> .div1{
      width: 100px; height: 50px; background-color: aquamarine; } .div2{
      width: 90px; height: 20px; background-color: blueviolet; } .list{
      width: 200px; height: 200px; background-color: blueviolet; overflow: auto; } li{
      height: 100px; } </style>
</head>
<body>
    <div id="root">
        <h2> 天气{
  {info}}</h2>
        <button @click = "changemet">切换天气</button>

    </div>

   
    <script > Vue.config.productionTip = false new Vue({
      el: '#root', // data:function(){
      return{
      isHot:true } }, computed:{
      info(){
      return this.isHot ? '炎热' : '凉爽' } }, methods:{
      changemet(){
      this.isHot = !this.isHot } } }) </script>
</body>
</html>

以上的代码我们不仅仅使用了计算属性，还用了方法，我们可以将方法去掉，直接这样写


但是这是简单的逻辑，可以这样写，如果逻辑多，一定不要这样写，可以这样写，以分号的形式隔开，但是没人这样写。

使用监视属性的代码（第一种方法监视）

上面那个例子，没有使用监视属性，现在进行使用

监视也就是监视data里面变量的变化。就是我们不需要点击某一个按钮进行变化了，现在是只要data里面的数据变化，那么就可以执行一定的逻辑

使用的场景：

当一个data数据变化之后，我们可以拿到变化之前的数据和变化之后的数据，进行对比之后进行后续的操作，比如对变化的温度，当变化超过30度，就开始进行预警。

也就是在watch这个属性里面的和data同名的配置里面，有很多的属性
第一个是handler

handler


只要data里面的变量变化，就会执行这个里面的逻辑

immediate

deep

第二种方法监视

监视的范围

不仅仅监视data里面的数据的变化，而且还可以监视 计算属性的变化

总结

监听多级结构中某个属性的变化

我们data里面的数据是一个对象咋办，比如


我们只是要监听a变化之后，要有一定的操作，不监听b


以上是多级里面只有几个属性，现在要有一百个，咋办，所以，我们要这样写


只要numbers这个对象里面一个属性变化，那么就可以监听到了。

也就是监听所有数据，深度监听

监视属性的简写方式

当配置项里面只是需要handler的时候，才可以开启简写方式，如果有其他的，比如deep属性，那么就不可以进行简写

简写方式：

计算属性和 监听属性的区别

两个都可以实现具体的功能，大多数的功能随便选择一个就可以实现。那么两个有什么具体的区别呢？

计算属性里面不能开启异步任务，监听属性是可以的。

比如数据变化之后，等几秒才有操作，那么只能使用监听属性

总结

为什么vue项目里面的定时器，一般写成箭头函数，其他的写成普通函数

是浏览器调用定时器函数，如果写成普通函数，那么这个定时器里面是有this的，这个this指的是window，如果写成箭头函数，里面就找不到this了，只能向外找。外面的函数的this是谁，里面的就是谁。

所以，vue项目里面的定时器，一般写成箭头函数，其他的写成普通函数