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 相关文章推荐
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php去除HTML标签实例
2013/11/06 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python中replace方法实例分析
2014/08/20 Python
解析Python编程中的包结构
2015/10/25 Python
Python使用爬虫猜密码
2016/02/19 Python
python3个性签名设计实现代码
2018/06/19 Python
对python生成业务报表的实例详解
2019/02/03 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
生物制药专业自我鉴定
2014/02/19 职场文书
化学专业自荐信
2014/05/28 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
golang为什么要统一错误处理
2022/04/03 Golang