Vue计算属性的使用


Posted in Javascript onAugust 04, 2017

我们都知道在Vue构造函数的参数对象中有一个【data】属性,该属性值是一个对象,该对象是对数据的代理,是一个键值对并且时刻与页面表现是一致的,但是这里面只能是简单的键值对,不能拥有业务逻辑,并且由于【data】中的属性属于同一个生命周期,所以如果我们需要某一个属性是依赖于另外一个属性时,在【data】中是做不到的,于是Vue为我们提供了【计算属性】

一、计算属性

1.1 概述

计算属性归根结底也是属性,它也是跟表现层是时刻同步的,虽然我们可以在插值中对数据进行各种处理,但是插值中的表达式处理毕竟只能用于简单的运算,不能拥有太多的业务逻辑。

<body>
  <div id="app">
    <h1>{{name.toUpperCase()}}</h1>
    <!-- <h1>BLUE</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      name: 'blue'
    }
  })
</script>

上面代码是我们熟悉的在插值中使用表达式,但是这里面我们不能写入业务代码。

1.2 计算属性语法

在构造函数的参数对象中有一个【computed】属性,该属性就是用于定义计算属性的,该对象中的【键】也就是我们的计算属性,与【data】不同的是,计算属性的键值是一个【拥有返回值的函数】,该函数中可以访问到【data】中的所有属性。

<body>
  <div id="app">
    <h1>{{rs}}</h1>
    <!-- <h1>BLUE LOVE PINK</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      hs: 'BLUE',
      wf: "PINK"
    },
    computed: {
      rs:function(){
        return `${this.hs} LOVE ${this.wf}`
      }
    }
  })
</script>

上面代码属性【rs】是定义的一个计算属性,该属性值是通过【data】中的两个属性值计算得到,返回一个拼接的字符串(这儿使用了ES6的【模板字符串】)并且当【data】中的相关值变化之后,【rs】属性都会进行重新计算。

可能刚开始对计算属性会有些疑惑,比如上面的例子我把代码写成下面这样子也是可以的

<body>
  <div id="app">
    <h1>{{hs}} LOVE {{wf}}</h1>
    <!-- <h1>BLUE LOVE PINK</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      hs: 'BLUE',
      wf: "PINK"
    }
  })
</script>

上面的代码运行效果和我们使用计算属性的效果是一样的,但是这样的写法只适用于简单的处理,【计算属性可以处理更复杂的业务逻辑】,比如我们根据【data】中的一个属性值进行数据请求用于构建一个属性,我们就必须使用计算属性了。

【注意!!】计算属性虽然是一个方法,但是在Vue内部会被翻译成一个属性,我们可以使用实例【vm.rs】访问到数据的。

1.3 计算属性和过滤器的比较

如果用于对【data】中【单个】属性的【简单】处理,推荐使用过滤器,但是如果一个值使用了【data】中至少2个值或者对一个值进行复杂处理,那么就推荐使用计算属性了。

<body>
  <div id="app">
    <h1>{{hs | lover}}</h1>
    <!-- <h1>BLUE LOVE PINK</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      hs: 'BLUE',
    },
    filters: {
      lover(value){
        return `${value} LOVE PINK`
      }
    }
  })
</script>

上面代码就使用了一个【data】属性值做简单的处理,所以使用过滤器,而且也发现了过滤字符串“LOVE PINK”是不可变的。

1.4 计算属性和Methods的比较

计算属性就是为了定属性的时候处理复杂的业务逻辑,而且在插值中我们可以使用表达式,那么我们是否可以通过使用在插值中调用一个有返回值的函数呢?它和计算属性又有什么区别呢?

<body>
  <div id="app">
    <h1>{{rs}}</h1>
    <!-- <h1>EULB</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      name: 'BLUE',
    },
    computed: {
      rs: function () {
        return [...this.name].reverse().join('');
      }
    }
  })
</script>

上面代码将数据进行反向处理(使用了【ES6数组字符串扩展】 ),当我们改变name的值的时候,计算属性【rs】会跟着改变。下面我们将它改成一个方法结合插值表达式进行处理,看看区别。

<body>
  <div id="app">
    <h1>{{ rs() }}</h1>
    <!-- <h1>EULB</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      name: 'BLUE',
    },
    methods: {
      rs() {
        return [...this.name].reverse().join('');
      }
    }
  })
</script>

上面代码将计算属性改成了一个方法结合插值表达式,发现效果和计算属性没差别,改变name的值的时候页面也刷新了。那是不是这两者就真的没区别呢,答案当然是否定的,如果没有区别干嘛还有计算属性的存在。

【计算属性是基于依赖进行缓存的】,只有计算属性的依赖发生改变时才会重新求值,也就是说如果依赖没有发生改变,那么计算属性会立刻返回之前的计算结果,假如我们有一个性能开销比较大的的计算属性 A ,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用 method 替代。

1.5 计算属性和Watch的比较

我们发现计算属性会监听依赖,如果依赖发生变化则会从新计算属性,那么【监听器】也有这么一个功能,那么我们应该在什么时候使用【计算属性】,什么时候使用【监听器】呢?

<body>
  <div id="app">
    <h1>{{fullName}}</h1>
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      firstName: 'Jack',
      lastName: 'Blue',
      fullName: 'Jack Blue'
    },
    watch: {
      firstName: function (val) {
        this.fullName = val + ' ' + this.lastName
      },
      lastName: function (val) {
        this.fullName = this.firstName + ' ' + val
      }
    }
  })
</script>

上面代码中我们监听firstName和lastName用于构建fullName,效果很好,当firstName和lastName任意一个值改变的时候fullName都会随之改变。下面我们看一下计算属性的写法

<body>
  <div id="app">
    <h1>{{fullName}}</h1>
    <!-- <h1>Jack Blue</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      firstName: 'Jack',
      lastName: 'Blue',
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

上面代码使用计算属性的方式进行了改造,fullName 依赖 firstName和 lastName 两个属性,当这两个属性任意一个发生变化,fullname都会重新进行计算。但是计算属性是不是简洁了很多呢!

【总结!!】当一个属性需要依赖多个【data】中的属性时,建议使用计算属性,如果我们不是对属性进行操作,只是单纯的依据【data】中的某个值变化后做一些【非属性操作】时或者是在数据变化响应时,【执行异步操作或开销较大的操作】(比如:将变化后的值存入数据库,而不是改变其他属性)就使用Watch。

1.6 计算属性的setter

上面我们是使用的计算属性都是用于对计算属性的取值,计算属性默认页只给了【getter】,但是在需要的时候我们可以人为的添加【setter】

<body>
  <div id="app">
    <h1>{{fullName}}</h1>
    <!-- <h1>Jack Blue</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      firstName: 'Jack',
      lastName: 'Blue',
    },
    computed: {
      fullName: {
        //getter
        get() {
          return this.firstName + ' ' + this.lastName
        },
        //setter
        set(newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
  })
</script>

上面代码定义了计算属性的一个setter,注意当需要定义setter的时候语法上面是有区别的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript来定义类的规范小结
Nov 19 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
详解小程序之简单登录注册表单验证
May 13 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 #Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 #Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 #Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 #Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
vue修改vue项目运行端口号的方法
Aug 04 #Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 #Javascript
You might like
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
办公室主任先进事迹
2014/01/18 职场文书
项目经理任命书范本
2014/06/05 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
靠谱准确的求职信
2019/04/02 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电