vue 计算属性最通用的讲解 简单 易懂

1.vue计算属性，computed 官网概念:

  模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护.

  这句话看似简单，并且配上了一个十分简单的demo，导致很多同学在使用computed的时候，并没有真正的领会到，计算属性的执行原理与过程。

1.第一个问题计算属性会在什么时候执行？。

  （1. watch属性的执行，十分的清晰，只要当监听的值发生改变的时候，就会立即触发响应执行。如果需要第一次赋值就执行，需要使用immediate属性即可。

 同比与computed属性，我们可能会认为，官网说的很明显了，当依赖的属性发生改变的时候，就会触发执行。

   (2. 计算属性的执行时机到底是什么时候呢。

  引出这个问题的原因在于，我们想要更加的明确计算属性中依赖的数据，是否得到最新的变更。

  因此计算属性get函数的触发，在于使用计算属性的地方！！

  比如在模板中<template>使用计算属性，那么计算属性的执行必然在组件created生命周期执行完成后，在mounting 挂载页面时执行。

  如果是在某一个函数中使用计算属性，那么计算属性必然是在该函数获取（计算属性值）的地方触发计算属性的方法。

  所以总结理解，计算属性是在渲染或使用计算属性时，判断计算属性中的绑定于vue（this）的实例是否发生变化。如果发生变化就进行函数的重新渲染执行。

 1.细节点，计算属性不会监听对象中属性的变化从而引发变化 同理更深一层的数组中 对象发生变化也不会发生变化。

 2.如果在计算属性中使用 （if else） （switch） 没有执行的语句，当this属性发生变化，也不会触发计算属性的改变。