VueJS---观察-Watchers

最新推荐文章于 2025-02-09 10:00:00 发布

John的WEB前端学习日记

最新推荐文章于 2025-02-09 10:00:00 发布

阅读量1.3k

点赞数

分类专栏： VueJS

本文链接：https://blog.youkuaiyun.com/zgrkaka/article/details/53288296

版权

VueJS 专栏收录该内容

32 篇文章

订阅专栏

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。

例如：

     
     
      
      <div id="watch-example">
     
     
     
       
      
      <p>
     
     
     
     
      
          Ask a yes/no question:
     
     
     
         
      
      <input v-model="question">
     
     
     
       
      
      </p>
     
     
     
       
      
      <p>{{ answer }}
      
      </p>
     
     
     
     
      
      </div>

     
     
      
      <!-- Since there is already a rich ecosystem of ajax libraries    -->
     
     
     
     
      
      <!-- and collections of general-purpose utility methods, Vue core -->
     
     
     
     
      
      <!-- is able to remain small by not reinventing them. This also   -->
     
     
     
     
      
      <!-- gives you the freedom to just use what you're familiar with. -->
     
     
     
     
      
      <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js">
      
      
      
      </script>
     
     
     
     
      
      <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js">
      
      
      
      </script>
     
     
     
     
      
      <script>
      
      
     
     
     
     
      
      var watchExampleVM = 
      
      new Vue({
     
     
     
       
      
      el: 
      
      '#watch-example',
     
     
     
       
      
      data: {
     
     
     
         
      
      question: 
      
      '',
     
     
     
         
      
      answer: 
      
      'I cannot give you an answer until you ask a question!'
     
     
     
     
      
        },
     
     
     
       
      
      watch: {
     
     
     
     
      
          
      
      // 如果 question 发生改变，这个函数就会运行
     
     
     
     
      
          question: 
      
      function (newQuestion) {
     
     
     
           
      
      this.answer = 
      
      'Waiting for you to stop typing...'
     
     
     
           
      
      this.getAnswer()
     
     
     
     
      
          }
     
     
     
     
      
        },
     
     
     
       
      
      methods: {
     
     
     
     
      
          
      
      // _.debounce 是一个通过 lodash 限制操作频率的函数。
     
     
     
     
      
          
      
      // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
     
     
     
     
      
          
      
      // ajax请求直到用户输入完毕才会发出
     
     
     
     
      
          
      
      // 学习更多关于 _.debounce function (and its cousin
     
     
     
         
      
      // _.throttle), 参考: https://lodash.com/docs#debounce
     
     
     
     
      
          getAnswer: _.debounce(
     
     
     
           
      
      function () {
     
     
     
             
      
      var vm = 
      
      this
     
     
     
             
      
      if (
      
      this.question.indexOf(
      
      '?') === 
      
      -1) {
     
     
     
     
      
                vm.answer = 
      
      'Questions usually contain a question mark. ;-)'
     
     
     
               
      
      return
     
     
     
     
      
              }
     
     
     
     
      
              vm.answer = 
      
      'Thinking...'
     
     
     
     
      
              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
     
     
     
     
      
                })
     
     
     
     
      
            },
     
     
     
           
      
      // 这是我们为用户停止输入等待的毫秒数
     
     
     
           
      
      500
     
     
     
     
      
          )
     
     
     
     
      
        }
     
     
     
     
      
      })
     
     
     
     
      
      </script>

另：_.debounce方法需要加载lodash.js