案例：姓名

插值语法：

<div id="box">
  姓：<input type="text" v-model="firstName"><br>
  名：<input type="text" v-model="lastname"><br>
  <p>姓名：{{firstName.slice(0,3)}}-{{lastname}} </p>
</div>
<script>
  Vue.config.productionTip = false;
  var vm = new Vue({
    el: "#box",
    data: {
      name: "测试",
      firstName:'张',
      lastname:'三'
    },
    methods: {},
  });
</script>

methods方法：

<div id="box">
  姓：<input type="text" v-model="firstName"><br>
  名：<input type="text" v-model="lastname"><br>
  <p>姓名：{{fullName()}} </p>
</div>

<script>
  Vue.config.productionTip = false;
  var vm = new Vue({
    el: "#box",
    data: {
      name: "测试",
      firstName:'张',
      lastname:'三'
    },
    methods: {
        fullName(){
           return  this.firstName+'-'+this.lastname; 
        }
    },
  });
</script>

每次data中数据发生变换，Vue将重新解析模板，入其中含有插值语法调用的方法将会重新进行调用

计算属性：

   <div id="box">
  姓：<input type="text" v-model="firstName"><br>
  名：<input type="text" v-model="lastname"><br>
  <p>姓名：{{fullName}} </p>
</div>
<script>
  Vue.config.productionTip = false;
  var vm = new Vue({
    el: "#box",
    data: {
      firstName:'张',
      lastname:'三'
    },
    computed:{
      fullName:{
        // fullName被读取时调用该方法，其返回值作为fullName的值
        get(){
          // 此处this为实例vm
          return this.firstName+'-'+this.lastname;
        },
        // 当fullName被修改时set被调用
        set(value){
          const arr=value.split('-');
          this.firstName=arr[0];
          this.lastname=arr[1];
        }
      }
    }
  });
</script>

计算属性

1. 定义：将需要的属性通过已有的属性进行计算得出

2. 原理：底层借助了Object.defineproperty方法提供了getter和setter

3. get函数执行时机

   1. 初次读取计算属性时会执行一次
   2. 当计算属性依赖的数据发生变化时进行再次调用

4. 优势：与methods相比，计算属性有内部缓存机制，属性值可复用，效率更高，调试更方便

5. 备注：

   1. 计算属性是基于响应式依赖进行缓存，只在相关响应式依赖发生改变时它们才会重新求值
   2. 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
   3. 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
   4. 若需要对计算属性进行自定义修改时，则必须写入set函数去响应修改，且set函数中要引起计算属性依赖的数据发生修改

计算属性的简写

当对计算属性只进行读取不进行修改时，可将其进行简写

      fullName(){
          return this.firstName+'-'+this.lastname;
      }