vue 计算属性和侦听器的使用小结

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了vue 计算属性和侦听器的使用小结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

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>

以上就是vue 计算属性和侦听器的使用小结的详细内容,更多关于vue 计算属性和侦听器的资料请关注狼蚁SEO其它相关文章!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板