Vue基础 - 计算属性

计算属性-computed

基础

1. 定义：要用的属性不存在，要通过已有属性计算得来
2. 原理：底层借助了Object.defineProperty() 方法提供的getter和setter
3. get()函数执行时机
   1. 初次读取数据时
   2. 当依赖的数据发生改变时会被再次调用
4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5. 注意事项
   1. 计算属性最终会出现在vm上，直接读取即可
   2. 如果计算属性要被修改，必须要写set()函数去响应修改，并且set()中要引起计算时所依赖的数据发生改变

案例

姓名案例实现

1. 插值语法实现

<<< @/md/vue/code/vue_basic/08_计算属性/1.姓名案例_插值语法实现.html

2. methods实现

<<< @/md/vue/code/vue_basic/08_计算属性/2.姓名案例_methods实现.html

3. 计算属性实现

<<< @/md/vue/code/vue_basic/08_计算属性/3.姓名案例_计算属性实现.html

4. 计算属性简写(只考虑读取计算属性时)

<<< @/md/vue/code/vue_basic/08_计算属性/4.姓名案例_计算属性简写.html