Vue计算属性和监听属性
一、计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
<div id="app">{{ message.split('').reverse().join('') }} </div> //模板变的很复杂起来,也不容易看懂理解
使用了计算属性的实例:
<div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p> </div><script> var vm = new Vue({el: '#app',data: {message: 'Runoob!'},computed: {// 计算属性的 getter reversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}} }) </script>
实例中声明了一个计算属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
1、computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
methods: {reversedMessage2: function () {return this.message.split('').reverse().join('')} }{{reversedMessage2()}}
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
此外,computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ,而 methods 内的方法则不会。
2、computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
<div id="app"><p>{{ site }}</p> </div><script> var vm = new Vue({el: '#app',data: {name: 'Google',url: 'http://www.google.com'},computed: {site: {// getterget: function () {return this.name + ' ' + this.url},// setterset: function (newValue) {var names = newValue.split(' ')this.name = names[0]this.url = names[names.length - 1]}}} }) // 调用 setter, vm.name 和 vm.url 也会被对应更新 vm.site = '测试计算属性 setter'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url); </script>
结果显示的就不是默认的name和url值,而不是 vm.site 的 setter 的值。
setter 会被调用, vm.name 和 vm.url 也会被对应更新。
二、监听属性
监听属性 watch,我们可以通过 watch 来响应数据的变化。
<div id = "computed_props">千米 : <input type = "text" v-model = "kilometers">米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript">var vm = new Vue({el: '#computed_props',data: {kilometers : 0,meters:0},methods: {},computed :{},watch : {kilometers:function(val) {this.kilometers = val;this.meters = val * 1000;},meters : function (val) {this.kilometers = val/ 1000;this.meters = val;}}});// $watch 是一个实例方法vm.$watch('kilometers', function (newValue, oldValue) {// 这个回调将在 vm.kilometers 改变后调用document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue; }) </script>
以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。
watch 对象创建了两个方法 kilometers 和 meters。
当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。
Vue计算属性和监听属性相关推荐
- Vue 计算属性与监听属性
前面的话 模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护.这篇文章将介绍计算属性与监听属性去解决该问题. 计算属性 [什么是计算属性?] 首先,来看一个字符串反转的例子: <d ...
- Vue的计算属性与监听属性
目录 一.计算属性 1.计算属性需要定义在computed选项中. 2.getter和setter. 3.计算属性缓存. 二.监听属性 一.计算属性 1.计算属性需要定义在computed选项中. 当 ...
- Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义 通过已有属性计算生成一个新的组合属性. 原理 底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质 计算属性的 ...
- Vue如何正确使用watch监听属性变化
Vue中可以使用监听器监听属性的变化,并根据属性变化作出响应.但一旦涉及到复杂数据的监听(如Object,但数组一般不需要,因为Vue针对数组做了特殊处理)时就比较复杂了,本文解释了使用watch监听 ...
- vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
- oclick vue 传参 函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货 作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
- Vue的计算属性、侦听属性与过滤器解析
文章目录 知识点 计算属性 计算属性的基本使用 计算属性的 setter 和 getter 侦听属性 计算属性与侦听属性对比 过滤器 过滤器使用方法 过滤器应用场景 综合小练习 知识点 计算属性 计算 ...
- Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...
- vue 组件属性监听_Vue.js 监听属性
# Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: ~~~ Vue 测试实例 - 菜鸟教程(runoob.com) ...
最新文章
- 【OpenCV 4开发详解】圆形检测
- 手机php文件怎么改后辍,php修改文件后缀名的方法
- XML之父愤然离职亚马逊!看不惯公司疫情期间种种作为,百万年薪不要了
- npm包管理机制引质疑:又一安装程序中发现恶意代码,开发者账户频遭劫持
- python编程培训-马哥教育官网-专业Linux培训班,Python培训机构
- C++类的Const数组的初始化
- 使用Hybris commerce的promotion rule进行促销活动
- opc服务器组态文件已写保护_远程组态软件不仅方便了PLC无线远程监控,也大大降低了工程成本...
- 大数据分析中常用的方法有哪些
- WIN10 PDF不显示缩略图 解决办法(修复工具下载)
- perl操作postsql
- Webservice原理解析
- android实现天气预报App(0)
- pgsql命令行直接输入密码登录
- 成对数据T检验实例(用SPSS16.0实现)
- 启动windows服务时出现“错误1053:服务没有及时响应启动或控制请求”的解决方法
- 【Android】实现九宫格展示图片+视频(仿QQ空间、微信朋友圈)
- tiny4412学习(一)之从零搭建linux系统(烧写uboot、内核进emmc+uboot启动内核)
- 基于Java+Swing+mysql图书管理系统
- 情感分析属于计算机科学,一种基于中文语义结构和细分词库结合的情感分析方法...