Vue中计算属性computed的示例解读

 更新时间:2017年07月26日 11:49:29   作者:方式代码  
计算属性和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变。下面这篇文章主要给大家介绍了关于Vue中计算属性computed的相关资料,需要的朋友可以参考下。

计算属性

表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题。

computed原理

computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage属性对应

cacheReversedMessage的值是根据其绑定的data中的message来决定的 获取reversedMessage会返回

cacheReversedMessage的值 message更新之后会立马调用reversedMessage的get方法去给cacheReversedMessage赋值(无论reversedMessage在dom中是否使用) cacheReversedMessage的值发生变化时,相应的dom也会发生变化

注意:computed中的属性和data中的属性名字不能相同,一个属性要么在data里;要么在computed里,computed里的属性要跟data中的配合使用,当data属性发生变化时才会调用get方法更新reversedMessage的值,否则get方法即使返回一个随机数,reversedMessage的值也不会变。

示例代码

computed相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算。

比如:

<body id="content">

 <parent :childrens="childrens"></parent>

</body>

<!-- 这个测试主要想证明: 对于计算属性里如果关联对象,即使对象不是组件作用域内的,当对象在外部改变了某个属性,同样会出发计算属性的方法-->

<script>

 var parent = Vue.extend( {

 props: {

  childrens: ''

 },

 template: '<div >{{age}}</div>',

 data: function() {

  return {

  name: '',

  age: 18

  };

 },

 computed: {

  age: function() {

  return this.childrens.age +10;

  }

 },

 created: function() {

  var _parent = this.$parent;

  this._set = {};

  this._set = _parent; 

 }

 } );

 var vm = new Vue( {

 el: 'body',

 data: {

  childrens: {

  name: '小强',

  age: 20,

  sex: '男'

  }

 },

 components: {

  'parent': parent

 }

 } );

 vm.$data.childrens.age = 10;

</script> 

vm.$data.childrens.age这个值改变的时候,动态触发computed里的age属性计算,最后显示到页面的结果是:20。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • vue项目实现便捷接入百度地图API

    vue项目实现便捷接入百度地图API

    部分项目需要地图的嵌入,这篇文章主要介绍了vue项目中调用百度地图API使用方法,其他的地图调用与之类似,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2022-04-04
  • 基于Vue SEO的四种方案(小结)

    基于Vue SEO的四种方案(小结)

    这篇文章主要介绍了基于Vue SEO的四种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue实现表单录入小案例

    vue实现表单录入小案例

    这篇文章主要为大家详细介绍了vue实现表单录入小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • VueJs监听window.resize方法示例

    VueJs监听window.resize方法示例

    本篇文章主要介绍了VueJs监听window.resize方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue项目优化的一些实战策略

    Vue项目优化的一些实战策略

    代码优化不仅仅局限在业务逻辑这块,像是代码复用、效率等等都是我们可以加以改进的地方,这篇文章主要给大家介绍了关于Vue项目优化的一些实战策略,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue实现滑动验证功能

    Vue实现滑动验证功能

    这篇文章主要为大家详细介绍了Vue实现滑动验证功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 解决Element-ui radio单选框label布尔/数值的一个坑

    解决Element-ui radio单选框label布尔/数值的一个坑

    这篇文章主要介绍了解决Element-ui radio单选框label布尔/数值的一个坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 关于Vue的路由权限管理的示例代码

    关于Vue的路由权限管理的示例代码

    本篇文章主要介绍了关于Vue的路由权限管理的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue3中关于i18n字符串转义问题

    vue3中关于i18n字符串转义问题

    这篇文章主要介绍了vue3中关于i18n字符串转义问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 如何写一个 Vue3 的自定义指令

    如何写一个 Vue3 的自定义指令

    这篇文章主要介绍了如何写一个 Vue3 的自定义指令,如果我们想在 Vue.js 的项目中实现图片懒加载,那么用自定义指令就再合适不过了,那么接下来就让我手把手带你用 Vue3 去实现一个图片懒加载的自定义指令 v-lazy,需要的朋友可以参考一下
    2022-01-01

最新评论