插值语法，computed，methods实现姓名拼接小demo

直接看原始模板：

<div id="root">
    姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    姓名：<span>???</span>
  </div>

  <script>
    new Vue({
      el:'#root',
      data:{
        firstName:'张',
        lastName:'三'
      },
    })
  </script>

如何将两个字符串拼接起来呢

插值语法实现

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

  <script>
    new Vue({
      el:'#root',
      data:{
        firstName:'张',
        lastName:'三'
      },
    })
  </script>

双向绑定，绑定到vm里姓和名，可以通过插值语法的方式，写表达式（双大括号）
这里写成 {{firstName + ‘-’ + lastName}} 也可以。
效果：

计算属性实现（computed）

代码：

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

  <script>
    const vm = new Vue({
      el:'#root',
      data:{
        firstName:'张',
        lastName:'三'
      },
      computed:{
        fullName:{
          //get被调用，当有人访问fullName的时候，就调用
          //初次加载的时候，会调用一次，放在缓存，所依赖的数据有变化的时候也会调用，再写进缓存
          //这个计算属性，是需要属性计算得出，变量可以加入，但是无法更改，因为vm无法检测到，切记！
          get(){
            return this.firstName +'-'+ this.lastName
          },
          set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
          }
        }
      }
    })
  </script>

这里的computed这个单词本身就有计算的意思，很好记。
computed内部的值称为计算属性，我们正常通过vue工具在浏览器查看，会发现它并不在vm内
他其实也是Vue实例里面的属性，但是他起初是没有值的，只有我们去查看他，去调用他
他才会立刻马上去调用他的get函数得到回调

代码中注释部分也有重点

计算属性是有简写方式的；
一个计算属性一般只操作读或者写
读get（） 写set（）
当我们确定某个属性他只需要进行读取显示的操作，不允许用户交互时修改的时候
可以启用简写方式：
如下

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

  <script>
    const vm = new Vue({
      el:'#root',
      data:{
        firstName:'张',
        lastName:'三'
      },
      computed:{
        //简写,确定只读的时候可以这样写，注意：造型跟函数一样，但不是函数
        fullName(){
          return this.firstName +'-'+ this.lastName
        }  
      }
    })
  </script>

实现效果是一致的

methods实现

methods方法的意思：
通过一个方法去进行拼接，或者说一个函数进行拼接

<div id="root">
    姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    姓名：<span>{{fullName()}}</span>
  </div>

  <script>
    new Vue({
      el:'#root',
      data:{
        firstName:'张',
        lastName:'三'
      },
      //methods没有缓存，碰到一次调用一次
      methods:{
        fullName(){
          return this.firstName +'-'+ this.lastName
        }
      }
    })
  </script>

此处的小demo可以看出，实际上效果差不多，但是
computed是有缓存的，而methods没有，从效率上来说肯定是有一点区别的
即使vue2的开发文档里面，言语中跟推荐使用methods，但是实际上我们看到，用computed显然更合理一点

另，不是由vm管理的函数，绝对不能使用箭头函数，
因为，往外找 this 的时候，上一层不是vm，就会找到 window ，后期容易出大问题（例如setTimeout函数之类）