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

2024-12-02 14:50:51

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 计算属性和侦听器的资料请关注我们其它相关文章！

深入浅析Vue.js计算属性和侦听器

一. 概述计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于
Vue学习笔记之计算属性与侦听器用法

本文实例讲述了Vue计算属性与侦听器用法.分享给大家供大家参考,具体如下: vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染.同时,还得益于计算属性的使用: 1.计算属性像绑定普通属性一样在模板中绑定计算属性.例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新. 利用函数方法也可以实现类似的效果,不同的是计
详解vue 计算属性与方法跟侦听器区别(面试考点)

计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于任何复杂逻辑
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"
Vue计算属性与侦听器和过滤器超详细介绍

目录 1. 计算属性 1.1 使用方法 1.2 案例-购物车合计使用计算属性 2. 侦听器 3. 过滤器 1. 计算属性 1.1 使用方法概述: 模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板变得简洁易于维护.计算属性是基于它们的响应式依赖进行缓存的,计算属性比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化. 计算属性定义在Vue对象中,通过关键词computed属性对象中定义一个个函数,并返回一个值
计算属性和侦听器详情

目录 1.计算属性 1.1 基础例子 1.2 计算属性缓存 vs 方法 1.3 计算属性 vs 侦听属性 1.4 计算属性的 setter 2.侦听器 1.计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须
详解Vue3 中的计算属性及侦听器

目录计算属性缓存 getter 和 setter 侦听器配置选项其它写法计算属性我们知道,在模板中可以直接通过插值语法显示一些data中的数据,但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算,在模板中放入太多的逻辑会让模板过重和难以维护,并且如果多个地方都使用到,那么会有大量重复的代码所以我们希望将业务逻辑和UI界面进行分离,其中一种方式就是将逻辑抽取到一个met
vue中的计算属性和侦听属性

计算属性计算属性用于处理复杂的业务逻辑计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性,只有依赖的那个值发生改变,他才会重新计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo
Vue.js中关于侦听器（watch）的高级用法示例

Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的.例如: <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> &l
Vue计算属性与监视(侦听)属性的使用深度学习

目录计算属性(computed) 监视属性(watch) 监视的两种方法 immediate选项深度监视计算属性(computed) 计算属性指的是通过一系列运算之后,最终得到一个值.这个动态计算出来的属性值可以被模板结构或methods方法使用,案例如下: <div id="root"> R:<input type="text" v-model.number="r"><br> G:<input t
深入了解Vue3中侦听器watcher的实现原理

目录 watch API 的用法 watch API实现原理标准化source 构造回调函数创建scheduler 创建effect 返回销毁函数异步任务队列的设计异步任务队列的创建异步任务队列的执行检测循环更新优化:只用一个变量 watchEffect 注册无效回调函数总结在平时的开发工作中,我们经常使用侦听器帮助我们去观察某个数据的变化然后去执行一段逻辑. 在 Vue.js 2.x 中,你可以通过 watch 选项去初始化一个侦听器,称作 watcher: export d