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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue实现在data里引入相对路径
Jun 05 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
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
使用Python生成随机密码的示例分享
2016/02/18 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python实现弹跳小球
2019/05/13 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
详解Python3定时器任务代码
2019/09/23 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
使用python实现飞机大战游戏
2020/03/23 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
精神病医院见习报告
2014/11/03 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书