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。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
Vue3组合式API之getCurrentInstance详解
我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象,下面这篇文章主要给大家介绍了关于Vue3组合式API之getCurrentInstance的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要为大家介绍了vue 长列表数据刷新的实现及思考，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
开发离不开权限,不同的用户登录,根据不同的权限,可以访问不同的管理目录，本文主要介绍了vue-element-admin按钮级权限管控的实现，具有一定的参考价值，感兴趣的可以了解一下2022-04-04
uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)
这篇文章主要介绍了uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
下面小编就为大家分享一篇完美解决axios在ie下的兼容性问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了关于Element table组件滚动条不显示的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本篇文章主要介绍了web前端vue之CSS过渡效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要介绍了VueJS事件处理器v-on的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
使用 Vue.js 久了，还是不明白响应式原理和双向数据绑定的区别？今天，我们就一起来学习一下，将解释它们的区别，快跟随小编一起学习学习吧2022-08-08
前端开发的时候,在项目中引入组件以及使用是非常常见操作,下面这篇文章主要给大家介绍了关于Vue全局提示组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论