1,computed属性
在 Vue.js 中,
computed
属性是 Vue 响应式系统的一个核心特性,它允许开发者声明式地描述一个依赖其他响应式属性的计算值。
computed
属性是基于它们的依赖进行缓存的,只有当依赖发生变化时,它们才会重新计算。这种机制极大地提高了性能,尤其是在处理复杂数据结构或频繁计算时。
computed
属性特点:
响应式:当依赖的数据发生变化时,computed 属性会自动重新计算。
缓存:
computed属性会缓存计算结果,只有当依赖的数据发生变化时,才会重新计算。
惰性求值:
computed属性在首次访问时才会进行计算,之后会根据依赖数据的变化情况决定是否重新计算。
注意:
1,computed 的属性应该是只读的, 一旦在模板中使用了计算属性,就不应该在组件中修改它的值。如果需要修改,可以将其转换为一个方法。2, computed 可以返回一个函数。这在需要在模板中使用函数式编程时很有用。例如,你可以使用 v-for 指令来循环执行一个函数,并返回一组结果。3, computed 不需要加小括号。 computed可以向普通属性一样,直接使用,不需要额外加小括号调用。4, computed惰性求值,即计算的值不渲染使用的话,是不会计算的。这个使用可以括在模版中使用,或者在函数中被使用。
2,computed例子解析
例子:
var vm = new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});
fullName
是一个
computed
属性,它不需要再被data中定义,可以直接使用this.fullName在函数中使用,或者直接使用
fullName
在模版中渲染。
fullName
的计算结果会被缓存起来,
它依赖于
firstName
和
lastName
。
只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新。即
当
firstName
或
lastName
变化时,
fullName
会自动重新计算。
另外,因为惰性计算原理,如果
fullName
没有被使用,是不会被计算的。
3,我的使用:
我的代码中是这样使用的:
data:function(){
return{
form:{
name:"",
table_name:"",
idc:"",
}
}
},
computed:{
from_name() {
console.log("计算form_name")
var formname=this.form.table_name + '启动机房:' + this.form.idc
this.$set(this.form,'name',formname)
return formname;
}
},
定义了
computed属性from_name,依赖data模块中定义的form对象,form对象的table_name属性和idc属性。计算后赋值给form.name属性。实现了统计table_name和idc属性来计算得到name属性的目的。
我的使用位置是在模版中展示名称from_name
<el-form-item label="计划名称">
<el-input v-model="from_name" :disabled="true"></el-input>
</el-form-item>
虽然 from_name属性的值并不是我们的最终目的,但是form_name必须得到使用才能完成整个计算得到form.name,否则依据惰性计算原理,form.name不会得到结果。