SOURCE

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: '张',
    lastName: '三',
    fullName: '张三',
    changeNum: 0,
  },
  methods: {
    changeFirstName: function() {
      var self = this;
      if (self.firstName == "张") { 
        self.firstName = "李"
      } else {
        self.firstName = "张"
      }
      self.changeNum++
    },
    changeLastName: function() {
      var self = this;
      if (self.lastName == "三") { 
        self.lastName = "四"
      } else {
        self.lastName = "三"
      }
      self.changeNum++
    }
  },
  computed: {
    // 读取
    changeNum2: function() {
      return this.changeNum + 1
    },
    // 读取+改变
  },
  watch: {
    firstName: function (val, val1) {
      console.log(val, val1)
      this.fullName = val + this.lastName
    },
    lastName: function (val) {
      console.log(val)
      this.fullName = this.firstName + val
    }
  },
  created: function() {
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="demo">{{ fullName }}
  <div @click="changeFirstName">改变姓</div>
  <div @click="changeLastName">改变名</div>
  <p>{{changeNum}}</p>
  <p>{{changeNum2}}</p>
</div>

	body{
		color:black;
	}