首页 > 编程笔记 > JavaScript笔记 阅读：32

Vue watch（监听器）详解

通义灵码
在 Vue.js 中，当需要在数据发生变化且需要执行异步代码或开销比较大的逻辑时，使用 compute 属性不合适，开发者可以自定义一个 watch 监听器，来监听数据的变化。

举个简单的例子： 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>test Vue.js</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
  8.     <script type="text/javascript" src="../static/js/Vue.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <div id="app">
  13.         <p>
  14.             输入问题：
  15.             <input v-model="question">
  16.         </p>
  17.         <p>{{ answer }}</p>
  18.     </div>
  19.  
  20.     <script>
  21.         const vm = new Vue({
  22.             el: "#app",
  23.             data: {
  24.                 question: '',
  25.                 answer: '输入问题，我才好给你答案'
  26.             },
  27.             watch: {
  28.                 // 监听question的变化，自动调用
  29.                 question: function () {
  30.                     this.answer = '等待你输入问题';
  31.                     this.debouncedGetAnswer();
  32.                 }
  33.             },
  34.             created: function () {
  35.                 // 500ms后调用getAnswer方法，控制调用频率
  36.                 this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
  37.             },
  38.             methods: {
  39.                 getAnswer: function () {
  40.                     this.answer = "思索中…";
  41.                     window.setTimeout(getResult, 500);
  42.                 }
  43.             }
  44.         });
  45.  
  46.         function getResult() {
  47.             console.log("1111");
  48.             vm.$data.answer = "答案是:" + (1 + Math.random());
  49.         }
  50.     </script>
  51. </body>
  52.  
  53. </html>
在上面的代码中，定义了一个 question 监听器，用于监听 question 数据属性。当 question 数据属性发生变化时，会自动执行 question 监听器后面的函数内容。在 question 监听器的函数逻辑中执行的是一个异步延时代码。

计算属性和watch监听器的对比

watch 监听器是 Vue.js 提供的一种用来观察和响应 Vue.js 实例上的数据变动的一种方式，一般只用于变动的开销比较大或异步方法调用的情况。否则使用计算属性要比使用 watch 监听器合适。

虽然可以用 watch 监听器监听 firstName1 和 lastName1 的变化，但是用计算属性计算 fullName2 要简单得多，代码如下：
  1. <div id="app">
  2.     FirstName1 <input type="text" v-model="firstName1"> LastName1 <input type="text" v-model="lastName1"><br/>
  3.     FullName1 {{ fullName1 }}<br/><br/>
  4.     FirstName2 <input type="text" v-model="firstName2"> LastName2 <input type="text" v-model="lastName2"><br/>
  5.     FullName2 {{ fullName2 }}<br/><br/>
  6. </div>
  7.  
  8. <script type="text/javascript">
  9.  
  10.     const vm = new Vue({
  11.         el: '#app',
  12.         data: {
  13.             firstName1: '',
  14.             lastName1: '',
  15.             fullName1: '', // This will be updated via watch
  16.             firstName2: '',
  17.             lastName2: ''
  18.         },
  19.         watch: {
  20.             firstName1: function() {
  21.                 this.fullName1 = this.firstName1 + ' ' + this.lastName1;
  22.             },
  23.             lastName1: function() {
  24.                 this.fullName1 = this.firstName1 + ' ' + this.lastName1;
  25.             }
  26.         },
  27.         computed: {
  28.             fullName2: function() {
  29.                 return this.firstName2 + ' ' + this.lastName2;
  30.             }
  31.         }
  32.     });
  33.  
  34. </script>

相关文章