乘风原创程序

  • vue 计算属性和侦听器的使用小结
  • 2021/1/25 9:30:23
  • 1. 计算属性和侦听器

    1.1 计算属性

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">   
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
      </head>
      <body>
        <div id="app">
    			<p>{{ message }}</p>
    			<p>{{ reversedMessage }}</p>
        </div>
        <script>
          new Vue({
            el: '#app',
            data: {
    					message: 'hello'
            },
    				computed: {					
    					reversedMessage: function () {
    						return this.message.split('').reverse().join('')
    					}
    					/*
    					// 相当于
    					reversedMessage: {
    						get(){
    							return this.message.split('').reverse().join('')
    						}
    					}
    					*/
    				}
          });
        </script>
      </body>
    </html>

    解释:我们在属性computed中定义了计算属性reversedMessage,这里提供的函数将作为计算属性reversedMessage的getter函数。

    1.2 setter

    计算属性默认只有getter,不过我们可以提供一个setter。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">   
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
      </head>
      <body>
        <div id="app">
    			<p>{{ message }}</p>
    			<p>{{ reversedMessage }}</p>
    			<input type="text" v-model="reversedMessage" />
        </div>
        <script>
          new Vue({
            el: '#app',
            data: {
    					message: 'hello'
            },
    				computed: {
    					reversedMessage: {
    						get(){
    							return this.message.split('').reverse().join('')
    						},
    						set(value){
    							this.message = value.split('').reverse().join('')
    						}
    					}
    				}
          });
        </script>
      </body>
    </html>

    1.3 缓存

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">   
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
      </head>
      <body>
        <div id="app">
    			<p>{{ message }}</p>
    			<p>{{ reversedMessage }}</p>
    			<p>{{ reversedMessage1() }}</p>
        </div>
        <script>
          new Vue({
            el: '#app',
            data: {
    					message: 'hello'
            },
    				methods: {
    					reversedMessage1: function(){
    						return this.message.split('').reverse().join('')
    					}
    				},
    				computed: {					
    					reversedMessage: function () {
    						return this.message.split('').reverse().join('')
    					}
    				}
          });
        </script>
      </body>
    </html>

    注意:虽然通过计算属性和方法,都可以达到同样的效果,但是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

    1.4 侦听属性

    通过Vue实例的watch属性可以侦听数据的变化。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">   
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
      </head>
      <body>
        <div id="app">
    			<p>{{ message }}</p>
    			<button @click="reverse=!reverse">反转</button>
        </div>
        <script>
          new Vue({
            el: '#app',
            data: {
    					message: 'Vue',
    					reverse: false
            },
    				watch: {
    					// message: function(newVal, oldVal){
    					reverse: function(newVal){
    						console.log(newVal)
    						this.message = this.message.split('').reverse().join('')
    					}
    				},
          });
        </script>
      </body>
    </html>

    我们可以通过实例属性vm.$watch达到同样的效果。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">   
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
      </head>
      <body>
        <div id="app">
    			<p>{{ message }}</p>
    			<button @click="reverse=!reverse">反转</button>
        </div>
        <script>
          var vm = new Vue({
            el: '#app',
            data: {
    					message: 'Vue',
    					reverse: false
            }
          });
    			
    			// vm.$watch('reverse', function (newVal, oldVal) {
    			vm.$watch('reverse', function (newVal) {
    				console.log(newVal)
    				this.message = this.message.split('').reverse().join('')
    			});
        </script>
      </body>
    </html>