Vue.js 学习笔记三：计算属性和侦听器

最新推荐文章于 2024-03-06 14:22:49 发布

stary1993

最新推荐文章于 2024-03-06 14:22:49 发布

阅读量190

点赞数 1

分类专栏： Vue.js 学习笔记文章标签： vue js

本文链接：https://blog.csdn.net/qq_27875933/article/details/115536813

版权

Vue.js 学习笔记专栏收录该内容

54 篇文章 10 订阅

订阅专栏

计算属性和侦听器

计算属性

我们知道，在模板中可以直接通过插值语法显示一些 data 中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。

基础例子

比如我们有 firstName 和 lastName 两个变量，我们需要显示完整的名称，但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}。我们可以将上面的代码换成计算属性：

		<div id="app">
			<p>{{ fullName }}</p>
		</div>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					lastName:'san',
					firstName:'zhang'
					},
				computed: {
					fullName() {
						return this.firstName + ' ' + this.lastName
					}
				}
			})
		</script>

OK，我们发现计算属性是写在实例的 computed 选项中的。

每个计算属性都包含一个 getter 和一个 setter，在上面的例子中，我们只是使用 getter 来读取。在某些情况下，你也可以提供一个 setter 方法（不常用）。在需要写 setter 的时候，代码如下：

		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					lastName:'san',
					firstName:'zhang'
					},
				computed: {
					fullName: {
						get() {
						return this.firstName + ' ' + this.lastName
						},
						set(newValue) {
							const name = newValue.split(' ')
							this.firstName = name[0]
							this.lastName = name[1]
						}
					}
				}
			})
		</script>

计算属性缓存

我们可能会考虑这样的一个问题： methods 和 computed 看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？原因是计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。我们来看下面的代码：

		<div id="app">
			<p>{{ fullName }}</p>
			<p>{{ getFullName() }}</p>
		</div>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					lastName:'san',
					firstName:'zhang'
					},
				computed: {
					fullName() {
						return this.firstName + ' ' + this.lastName
					}
				},
				methods:{
					getFullName() {
						return this.firstName + ' ' + this.lastName
					}
				}
			})
		</script>

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。侦听器用来监听某些数据变化，观察 Vue 实例变化的一个表达式或计算属性函数。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。watch支持的方式有好几种，回调函数得到的参数为新值和旧值：

		<div id="app">
			<button v-on:click="count++">点击了{{ count }}次</button>
			 
		</div>
		<script type="text/javascript">
			const app =new Vue({
				el:'#app',
				data:{
					count:0
				},
				watch:{
					count(newValue, oldValue) {
						console.log(oldValue)
						console.log(newValue)
					}
				}
			})
		</script>