Vue之侦听器-优快云博客

本文链接：https://blog.youkuaiyun.com/CSNMD/article/details/144571299

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue学习</title>
  <script src="../lib/vue2/vue.js"></script>

</head>

<body>
  <!-- 
  1、在大多数场景下都更加适合使用计算属性解决需求，因为计算属性内部会自动监听依赖的响应式变量，也实现了侦听器的效果，更偏向于可以自动获取某个结果需求。
  2、监听器主要用在触发一个异步操作，计算时间过长的操作。更偏向于触发某个操作的考虑而不是获取结果
  -->
  <div id="app">
    今天天气很 {{weatherCn}}<br />
    <button @click="changeWeather">切换天气</button>
  </div>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false
    const vm = new Vue({
      data() {
        return {
          isHot: true,
          weatherCn: '炎热'
        }
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        }
      },
      watch: {
        isHot(newValue, oldValue) {
          console.log('newValue:', newValue)
          console.log('oldValue:', oldValue)
          this.weatherCn = newValue ? '炎热' : '凉爽'
        }
      }
    })

    vm.$mount('#app')
  </script>
</body>

</html>