1.template中寫入布局
? ?<!-- 1.methods動(dòng)態(tài)綁定值 -->
? ? 動(dòng)態(tài)添加1：<input v-model="firstName"/>
? ? 動(dòng)態(tài)添加2：<input v-model="secondName"/><br/>
? ? 全名（methods完成）：<span>{{addTotalName()}}</span><br/>
? ? <!--2. computed 計(jì)算屬性動(dòng)態(tài)綁定值 -->
? ? 全名(計(jì)算屬性完成)：<span>{{fullName}}</span>
2.script代碼
data中寫入屬性
<!-- 1.methods動(dòng)態(tài)綁定 -->
methods: {
addTotalName(){
? ? ? //Vue中methods中this是指向Vue执俩，在Vue外的this指向window
? ? ? return this.firstName+"-"+this.secondName;
? ? }
}
<!-- 2.計(jì)算屬性動(dòng)態(tài)綁定 -->
計(jì)算屬性fullName本身不存在尚镰，通過已有的"屬性"計(jì)算而來,即Vue中data中自定義的屬性
? 原理：底層借助了Object.defineProperty中的getter和setter
? 計(jì)算屬性最終會(huì)出現(xiàn)在Vue本身上，直接用即可，如以上直接拿fullName即可
? computed:{
? ? //fullName為計(jì)算出來的新屬性
? ? ? fullName:{
? ? ? ? //get有什么用？當(dāng)有人讀取fullName時(shí)，get會(huì)被調(diào)用，且返回值為fullName的值
? ? ? ? //get什么時(shí)候調(diào)用梗顺？
? ? ? ? //1.由于computed計(jì)算屬性有緩存機(jī)制，在初次讀取fullName時(shí)车摄，會(huì)調(diào)用
? ? ? ? //2.所依賴的數(shù)據(jù)（this.firstName寺谤，this.secondName）發(fā)生變化時(shí)候會(huì)調(diào)用
? ? ? ? get(){
? ? ? ? ? ? return this.firstName+"-"+this.secondName;
? ? ? ? },
? ? ? ? //set是fullName需要被修改的時(shí)候調(diào)用,value為修改后的值
? ? ? ? set(value){
? ? ? ? ? ? //可以通過value.split("-")[0],[1]獲取到新的值賦值給this.firstName和this.secondName
? ? ? ? }
? ? ? }
? }
總結(jié)：計(jì)算屬性相對(duì)于methods數(shù)據(jù)綁定仑鸥，其特點(diǎn)是有緩存，methods沒有緩存变屁，fullName重復(fù)被讀取且依賴數(shù)據(jù)無變化時(shí)眼俊，只調(diào)用一次，故相對(duì)于methods方法綁定更能節(jié)省資源敞贡，性能更加優(yōu)化泵琳；methods則在重復(fù)讀取時(shí)候被多次調(diào)用，即讀取一次調(diào)用一次誊役。
