Web前端开发进阶笔记8——计算属性、侦听器、过滤器

本文链接：https://blog.csdn.net/HAC_SOUL/article/details/117413115

本文介绍了Vue.js中计算属性、侦听器和过滤器的使用。计算属性提供缓存机制，提高性能，如`reverseMsg`只计算一次。侦听器在数据变化时执行相应操作，例如监听`firstname`和`lastname`的变化更新`name`。过滤器用于数据格式化，如将`name`首字母转换为大写。最后，通过一个用户名重复检测的例子展示了如何使用侦听器进行实时验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.计算属性：

需要我们了解的是方法和计算属性的区别：

方法的使用每次调用都会执行一遍，而计算属性的方法，每次调用如果是同一个调用值，我们只会通过缓存来使用它，性能较高。

<div id="content">
			<div>{{reverseMsg}}</div>
			<div>{{reverseMsg}}</div>
			<div>{{reverseNum()}}</div>
			<div>{{reverseNum()}}</div>

		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#content",
				data: {
					msg: 'nihao'
				},
				methods: {
					reverseNum: function() {
						console.log('methods');
						return this.msg.split('').reverse().join('');
					}
				},
				computed: {
					reverseMsg: function() {
						console.log('compute');
						return this.msg.split('').reverse().join('');
					}
				}
			})
		</script>

运行情况：

很显然我们只调用了一次计算属性，而函数方法调用了两次。

计算属性对data中的数据是有依赖的。

2.侦听器：

数据变化时执行异步或开销较大的操作。

示例：

<div id="content">
			<input type="text" v-model="firstname" />
			<input type="text" v-model="lastname" />
			<div>{{name}}</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#content',
				data: {
					firstname: '',
					lastname: '',
					name: ''
				},
				watch: {
					firstname: function(value) {
						this.name = value + this.lastname
					},
					lastname: function(value) {
						this.name = this.firstname + value
					}
				}
			})
		</script>

3.过滤器(格式化数据)：

从上面我们知道，不仅是模板可用，属性绑定中也是可用的。同样的我们的filters也是可以局部定义的：

示例（首字母大写）：

<div>{{name|upper}}</div>

Vue.filter('upper',function(val){
	return val.charAt(0).toUpperCase()+val.slice(1)
})

示例2：

<div id="content">
			<div :diyid="DiyId">123</div>
			<div>
				{{DiyId}}
			</div>
			<div>
				{{DiyId | addone}}
			</div>
			<button type="button" @click="changediyid">change</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#content",
				data: {
					DiyId: ''
				},
				methods: {
					changediyid: function() {
						this.DiyId = Math.random()
					}
				},
				filters: {
					addone:function(val) {
						val += 1
						return val
					}
				}
			})
		</script>

我们使用过滤器来实现一下自定义日期格式：

<div id="content">
			<div :diyid="DiyId|addone">123</div>
			<div>
				{{DiyId}}
			</div>
			<div>
				{{DiyId | addone}}
			</div>
			<div>
				{{Date | formatdate('yyyy-mm-dd')}}
			</div>
			<button type="button" @click="changediyid">change</button>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#content",
				data: {
					DiyId: '',
					Date: new Date()
				},
				methods: {
					changediyid: function() {
						this.DiyId = Math.random()
					}
				},
				filters: {
					addone: function(val) {
						val += 1
						return val
					},
					formatdate: function(val, arg) {
						//这里我们不调用外部format函数，自定义一下获取格式
						if (arg == 'yyyy-mm-dd') {
							val = val.getFullYear() + '-' + ((val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) :
								(val.getMonth())) + '-' + (val.getDate() < 10 ? '0' + val.getDate() : val
								.getDate())
						}
						return val
					}
				}
			})
		</script>

4.侦听实战，检测用户名的重复：

<div id="content">
			<label>Username:</label>
			<input type="text" v-model.lazy="username" />
			<span>{{msg}}</span>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#content',
				data: {
					username: '',
					msg: ''
				},
				methods: {
					checkname: function(username) {
						var that=this;
						setTimeout(function() {
							//注意这里的this作用域需要传递
							// console.log(this);
							if (username == 'user') {
								that.msg = '重复的用户名！'
							} else if (username == 'admin') {
								that.msg = 'admin不可使用！'
							} else {
								that.msg = '可用！'
							}
						},500)

					}
				},
				watch: {
					username: function(val) {
						this.checkname(val)
						
					}
				}
			})
		</script>