Bootstrap

Vue computed属性原理及其惰性求值特点

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不会得到结果。
;