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如何跨组件传递Slot的实现
Dec 14 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
ant design vue的form表单取值方法
Jun 01 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和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python面向对象法实现图书管理系统
2019/04/19 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
某公司面试题
2012/03/05 面试题
中专生职业生涯规划书范文
2014/01/10 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
贷款收入证明格式
2015/06/24 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
一文搞懂Redis中String数据类型
2022/04/03 Redis