Vue中的计算属性

计算属性

意义：模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计算属性是基于他们的响应式进行缓存的。适合多个变量或对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生的变化，则我们监控的这个值也就会发生变化

:属性=“表达式”

动态绑定属性，一般不建议在模板中写太多的业务逻辑

-> 建议写在计算属性中 computed配置中

computed最终还是映射到data数据源中 -> 在模板中调用就和data中属性调用是一样的

aa => data{aa} ==> this.aa ==> 计算属性它虽然绑以data中，但它不能直接去修改 =》 defineProperty

计算属性它是具有缓存，如果它里面的依赖项没有发生改变，则在下一次调用时，会走缓存数据

-> 脏检查[dirty] -> 读取数据时，加一个标识位，如果这个标识位为true,则走缓存，为false，重新计算

-> 缓存机制LRU[least recently used-最近最少使用算法]

-> 计算属性它一般多用于，模板中使用，一不会在js中用去

-> 把原本写在视图代码中的运算，提取到js代码中来完成，而且多次调用，只要依赖项没有改变，它还有缓存

-> 计算属性中不能写异步：它要收集依赖项，如果是异步，则完成收集到

-> 计算属性在初始时，不会自动进行数据劫持，它只会在调用后才进行 lazy字符来解决

举个栗子

【html】

  <div id="app">
    <!-- 不太建议直接在模板写逻辑 -->
    <!-- <div>{
   {n1+n2}}</div> -->
    <hr>
    <!-- 使用方法来完成计算，是可以