vue的计算属性

<template>
  <div id="app">
    <p>姓:{{firstName}}</p>
    <p>名:{{lastName}}</p>
      <p>总:{{count}}</p>
      <p>全名:{{getFullName()}}</p>
      <p>全名:{{fullName1}}</p>
      <button @click="fullName1 ='妲己'">修改姓名为妲己</button>
</template>

export default {  name:"App", //如果组件没有在注册的时候指定姓名，则是使用该姓名
  components:{
    Avatar,
  },
  data(){
    return{
      firstName:"小",
      lastName:"熊",
      count:0,
    };
  },
  // 计算属性
  computed:{
   
    fullName1:{
      get(){
      return this.firstName +""+this.lastName;
      console.log("computed called");
    },set(val){
        console.log("正在设置全名",val);
        this.count++;
        this.firstName=val[0];
        this.lastName=val.substr(1);
    }
    },
  },
  methods:{
    getFullName(){
      console.log("methods called");
      return this.firstName +""+this.lastName;
    },
    setNewName(first,last){
      this.firstName=first;
      this.lastName=last;
    },
  },
};
</script>