这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战

前言：

大家好啊，又见面了，我是loncon，一个前端路上不断探索的小白，让我们开始今天的主题：和v-model一起来理解计算属性的响应式依赖（缓存）的概念

首先，计算属性是一个属性，当却是函数的写法，其实也不难理解，因为是要对数据进行一番操作，避免了都写在模板中，太多的逻辑会让模板过重且难以维护。

其次，计算属性不仅便于维护代码，最大的优点是响应式依赖，意思式依赖的数据只要不发生变化，不管被调用多少次，每次都立即返回之前的结果，只有依赖的数据发生改变，才会重新返回新的结果，先上一段代码说话：

<div id="app">
    <p>{{revers()}}</p>
    <p>{{revers()}}</p>
    <p>{{revers()}}</p>
    <p>{{revers()}}</p>
    <p>{{revers()}}</p>
    <p>{{result}}</p>
    <p>{{result}}</p>
    <p>{{result}}</p>
    <p>{{result}}</p>
    <p>{{result}}</p>
  </div>
  <script src="./vue.js"></script>
<script>
 const vm =new Vue({
      el:'#app',
      data:{
        messgae:'hello',
        msg:'vue'
      },
      methods:{
        revers(){
          console.log('我是methods方法');
          return this.messgae.split('').reverse().join()
        }
     },
      computed:{
        result (){
          console.log('我是计算属性');
          return this.msg.split('').reverse().join()
       }
     }
 })
</script>

这段代码中，revers是定义在methods的方法，result是计算属性（函数写法），都同样被调用多次，结果如下：

根据计算属性的响应式依赖这一概念，我们就可以搭配v-model（获取表单内的值）修改数据，见证计算属性响应式依赖的特性。

<div id="app">
    <input v-model='msg'>
    <p>{{result}}</p>
    <p>{{result}}</p>
    <p>{{result}}</p>
    <p>{{result}}</p>
  </div>
  <script src="./vue.js"></script>
<script>
 const vm =new Vue({
      el:'#app',
      data:{
        msg:'vue'
      },
      computed:{
        result (){
          console.log('hhhh');
          return this.msg.split('').reverse().join()
       }
     }
 })
</script>

结果如下，输入框里的值发生改变，双向数据绑定，自然会修改msg的值，msg的值发生改变，计算属性的结果就会发生改变。

前端小白不迷路 - 今天来和v-model一起来理解计算属性的响应式依赖（缓存）的概念

前言：