如果一个结果需要依赖data中的属性, 但是需要进行一定的逻辑运算 , 才可以得到哦想要的数据 , 此时就可以使用计算属性 .
虽然在很多时候 , 运用函数调用也能够达到相同的结果 , 但是从内存方面以及对数据的安全方面来看 , 还是计算属性更好一些.
定义格式:
{
data(){},
methods: {}
// 声明计算属性
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
计算属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
计算属性名2 () {
// 对依赖的数据进行处理，且进行return
return
}
}
}
computed是vue中的配置选项 , 他的值是一个对象,可以定义多个计算属性 , 每个计算属性是一个函数 ,computed和data是平级关系.
属性名称:计算属性的名称
属性值 : 计算属性的素材函数.
--队以来的数据进行逻辑处理
--处理完成后需要return出去 , 返回值就是计算属性的值.
<div id="app">
<!-- 逻辑复杂 -->
<h3>{{msg.split('').reverse().join('')}}</h3>
<!-- 计算属性 和data类似-->
<h3>{{reverseMsg}}</h3>
</div>
<script src="./vue.js"></script>
<script>
{
data () {
return { msg: 'hi vue' }
},
// 声明计算属性
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
reverseMsg () {
// 对依赖的数据进行处理，且进行return
return this.msg.split('').reverse().join('')
}
}
})
</script>
在模板中使用computed和是用data的方式一样 .
在计算声明中是函数 , 但是在模板中只需要和data一样引用就可以了 , 不需要加括号.
- 什么时间用：需要对数据进行复杂的逻辑加工，产生新的数据时。
- 执行的时机 , 当依赖的数据发生变化时 , 他会自动调用.
如何选择函数和及计算属性?
methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行.
computed属性, 在模板使用中,使用多次 , 如果依赖的属据没有发生改变 , 计算函数就不会执行 . 计算属性有缓存功能 , 提高渲染心性能.
