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中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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实现清除MySQL死连接的方法
2016/07/23 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
js获取单选按钮的数据
2006/11/27 Javascript
use jscript with List Proxy Server Information
2007/06/11 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
运动会领导邀请函
2014/01/10 职场文书
个人函授自我鉴定
2014/03/25 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
匿名检举信范文
2015/03/02 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书