欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中的侦听器-监听复杂类型

程序员文章站 2022-03-03 10:03:41
...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>
        {{house.name}} ----- {{house.location}}
      </h1>
    </div>
    <script src="vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
          house: {
            name: '海景房',
            location: '*'
          }
        },
        watch: {
          // 处理监听的逻辑,这个函数会在msg发生改变的时候执行
          // value: 修改后的值
          // oldValue: 修改前的值
          msg: function(value, oldValue) {
            console.log('你变了', value)
          },

          // watch在监听复杂类型的时候,没有监听到
          // watch监听的是house属性。house是一个对象
          // 就想监听到house中属性的变化
          // 深度监听: 不仅会监听地址,还会监听对象的值的变化
          // house: function(value) {
          //   console.log('你变了', value)
          // }
          house: {
            // 深度监听house, 不管是地址还是值发生了改变,都可以监听到
            deep: true,
            // 立即,页面一加载,会先执行一次
            immediate: true,
            // 当监听到变化了,这个函数就会会执行
            handler: function(value) {
              console.log('你变了', value)
            }
          }
        }
      })
      /* 
        watch: 监听属性
        监听简单类型: 
          watch: {
            msg: function(value) {}
          }
        监听复杂类型
          watch: {
            house: {
              deep: true,
              handler: function(value) {

              },
              // 立即,页面加载就执行一次
              immediate: true
             }
          }
      */
    </script>
  </body>
</html>
相关标签: javascript vue.js