一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

计算属性 computed

• 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
• 计算属性是基于它们的响应式依赖（data中的数据）进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

<div id="app">
     <!--  
        当多次调用 reverseString  的时候 
        只要里面的 num 值不改变 他会把第一次计算的结果直接返回
	直到data 中的num值改变 计算属性才会重新发生计算
     -->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
     <!-- 调用methods中的方法的时候  他每次会重新调用 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      computed: {
        //  reverseString   这个是我们自己定义的名字 
        reverseString: function(){
          console.log('computed')
          var total = 0;
          //  当data 中的 num 的值改变的时候  reverseString  会自动发生计算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
          // 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果    
          return total;
        }
      }
    });
  </script>

侦听器 watch

• 使用watch来响应数据的变化
• 一般用于异步或者开销较大的操作
• watch 中的属性 一定是data 中 已经存在的数据
• 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

 <div id="app">
        <div>
            <span>名：</span>
            <span><input type="text" v-model='firstName'></span>
        </div>
        <div>
            <span>姓：</span>
            <span><input type="text" v-model='lastName'></span>
        </div>
        <div>{{fullName}}</div>
    </div>

  <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Jim',
                lastName: 'Green',
                // fullName: 'Jim Green'
            },
            
            watch: {
                //   注意：  这里firstName  对应着data 中的 firstName 
                //   当 firstName 值 改变的时候  会自动触发 watch
                firstName: function(val) {
                    this.fullName = val + ' ' + this.lastName;
                },
                //   注意：  这里 lastName 对应着data 中的 lastName 
                lastName: function(val) {
                    this.fullName = this.firstName + ' ' + val;
                }
            }
        });
    </script>

方法 methods

• 不依赖与data中的数据，也不缓存数据，当每次调用方法是，方法总会执行一次

<script>
export default {
  name: 'RuleManagementRuleList',
  props: {
    /* typeNumber: {
      type: String,
    }, */
  },
  data() {
    return {
      ruleList: [],
      executeModelList: [
        { executeMode: '1', executeName: '简单配置' },
        { executeMode: '2', executeName: 'SQL配置' },
        { executeMode: '3', executeName: '关联配置' },
      ],
    };
  },
  computed: {
   
    // 计算表格中的执行方式是那种方式
    excuteModelLabel() {
      const excuteModelItem = this.executeModelList.find(item => {
        return this.ruleList.filter(item1 => {
          if (item.executeMode == item1.executeMode) {
            return item.executeMode == item1.executeMode;
          }
        });
      });
      console.log('dashj', excuteModelItem);
      return excuteModelItem || '';
    },
  },
  methods：{
   // 获取执行方式
    getExecuteModelLabel(executeMode) {
      const name = this.executeModelList.filter(item => {
        return item.executeMode == executeMode;
      });
      return name[0].executeName || '';
    },
  }
  // 俩种方式都能做到，但当你有大量的数据的时候，最好选择计算属性来完成

最后

我正在成长，如果有什么问题欢迎大家留言，我们一起讨论。。。

如果对您有用，希望您留下评论/👍/收藏。

您的三连，是对我创作的最大的鼓励🙇‍♀️🙇‍♀️🙇‍♀️