watch 侦听器

快来打我* 2022-11-02 00:55 126阅读 0赞

[vue官方文档-watch讲解][vue_-watch]

Vue中计算属性和watch的区别

侦听字符串 和 侦听对象的属性 用法的区别

## 第 1 章：watch 侦听器 基本用法 ##

侦听字符串 和 侦听对象的属性 用法的区别

<template>
      <div class="watch">
        <input type="text" v-model="name" />
        <p>{ {  name }}</p>
        <input type="text" v-model="info.age" />
        <p>{ {  info }}</p>
      </div>
    </template>
    
    <script type="text/javascript">
    export default { 
      data () { 
        return { 
          name: '张三',
          info: { 
            age: 20
          }
        }
      },
      watch: { 
        // 情形一：监听字符串，新旧值都可以打印
        name: function (newValue, oldValue) { 
          console.log('name', newValue, oldValue);
        },
        /** * 情形二：深度监听对象里面的属性，只能打印新值，拿不到旧值 * 因为对象是引用类型，两个对象都是同一个引用地址 * 所以打印的结果都是一样的 */
        info: { 
          handler: function (newValue, oldValue) { 
            console.log('新值age', newValue);
            console.log('旧值age', oldValue); // oldValue 和 newValue 一样
          },
          deep: true
        }
      }
    }
    </script>

## 第 2 章：[watch响应数据的变化，执行异步操作][watch] ##

`Vue中计算属性和watch的区别`

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。

这就是为什么 Vue 通过 `watch` 选项提供了一个更通用的方法，来响应数据的变化。

`当需要在数据变化时执行异步或开销较大的操作时`，这个方式是最有用的。

<template>
      <div id="watch-example">
        <p>
          Ask a yes/no question:
          <input v-model="question" />
        </p>
        <p>{ {  answer }}</p>
      </div>
    </template>
    
    <script type="text/javascript">
    export default { 
      data () { 
        return { 
          question: '',
          answer: 'I cannot give you an answer until you ask a question!'
        }
      },
      watch: { 
        // 如果 `question` 发生改变，这个函数就会运行
        question: function (newQuestion, oldQuestion) { 
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer(); // [思考???]
        }
      },
      created: function () { 
        // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
        // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
        // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
        // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
        // 请参考：https://lodash.com/docs#debounce
        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
      },
      methods: { 
        getAnswer: function () { 
          if (this.question.indexOf('?') === -1) { 
            this.answer = 'Questions usually contain a question mark. ;-)'
            return
          }
          this.answer = 'Thinking...'
          var vm = this
          axios.get('https://yesno.wtf/api')
            .then(function (response) { 
              vm.answer = _.capitalize(response.data.answer)
            })
            .catch(function (error) { 
              vm.answer = 'Error! Could not reach the API. ' + error
            })
        }
      }
    }
    </script>

[vue_-watch]: https://cn.vuejs.org/v2/guide/computed.html
[watch]: https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7