<template>
  <div class="hello">
     <p>FullName: {{fullName}}</p>
     <!-- <p>Fullname:{{fullName0}}</p> -->
     <p>FirstName: <input type="text" v-model="firstName"></p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      firstName: 'Dawei',
      lastName: 'Lou',
      fullName: ''

    }
  },
  computed:{
    fullName0(){
      return  this.firstName +''+this.lastName;
    }
  },

  //缺陷，最初的绑定时候是不会执行的，需要firsrName的值发生改变才会执行
   watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  },

  //handler方法和immediate 改进上面的 最初开始绑定的时候也执行
    watch: {
    firstName: {
      handler(newName, oldName) {
        this.fullName = newName + ' ' + this.lastName;
      },
      immediate: true
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

https://blog.csdn.net/qq_36688143/article/details/81287535