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


Posted in Vue.js onJanuary 25, 2021

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>

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

解释:我们在属性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>

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

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

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 相关文章推荐
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue keep-alive的简单总结
Jan 25 #Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
You might like
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
PHP中SESSION过期设置
2021/03/09 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
详解python中的装饰器
2018/07/10 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
荷兰家电销售网站:Welhof
2020/12/08 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
库房管理员岗位职责
2014/03/09 职场文书
企业管理标语
2014/06/10 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android