1 计算属性
计算属性本质上就是一个 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用。
2 声明计算属性
计算属性需要以 function 函数的形式声明到组件的 computed 选项中。
注意：
计算属性侧重于得到一个计算的结果，因此计算属性中必须有 return 返回值！
使用计算属性时，直接用函数名。
<template> <div> <input type="text" v-model.number="count" /> <p>{{ count }} 乘以 2 的值为：{{ plus }}</p> </div> </template> <script> export default { name: 'MyCounter', data() { return { count: 1, } }, computed: { plus() { console.log('计算属性被执行了') return this.count * 2 }, } } </script> <style></style>
3 计算属性的使用注意点
① 计算属性必须定义在 computed 节点中
② 计算属性必须是一个 function 函数
③ 计算属性必须有返回值
④ 计算属性必须当做普通属性使用
4 计算属性 与 方法
相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。
而方法会每次在调用方法时候，都执行一次方法。
所以只要计算属性依赖的数据项不发生改变，计算属性只会执行一次，方法会调用几次执行几次。
<template> <div> <input type="text" v-model.number="count" /> <p>{{ count }} 乘以 2 的值为：{{ plus }}</p> <p>{{ count }} 乘以 2 的值为：{{ plus }}</p> <p>{{ count }} 乘以 2 的值为：{{ plus }}</p> </div> </template> <script> export default { name: 'MyCounter', data() { return { count: 1, } }, computed: { plus() { console.log('计算属性被执行了') return this.count * 2 }, }, methods: { // plus() { // console.log('方法被执行了') // return this.count * 2 // } } } </script> <style></style>
