image.png
data:狀態(tài)
computed：注重結(jié)果
1.邏輯計(jì)算艘希，防止模板過(guò)重，有緩存
2.監(jiān)聽(tīng)：依賴修改硅急，get方法覆享，必須有return
methods:
1.點(diǎn)擊事件處理函數(shù)，return不是必須的
2.函數(shù)表達(dá)式的邏輯處理营袜，沒(méi)有緩存
watch:
監(jiān)聽(tīng)撒顿，觀察，注重過(guò)程荚板，不用return調(diào)用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 轉(zhuǎn)換成大寫 -->
<!-- 模板過(guò)重 難以維護(hù) -->
<!-- {{myname.substring(0,1).toUpperCase()+myname.substring(1)}} -->
<!-- 計(jì)算屬性 -->
{{mycomputedname}}
<!-- 方法 -->
{{mymethodsname()}}
<h2>計(jì)算屬性-有緩存</h2>
<div>{{mycomputedname}}</div>
<div>{{mycomputedname}}</div>
<div>{{mycomputedname}}</div>
<h2>方法-表達(dá)式</h2>
<div>{{mymethodsname()}}</div>
<div>{{mymethodsname()}}</div>
<div>{{mymethodsname()}}</div>
<h2>計(jì)算屬性可以被賦值</h2>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
myname: 'mayuan'
},
methods: {
mymethodsname() {
console.log("mymethodsname")
//基于依賴的改變會(huì)重新執(zhí)行一次
return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)
}
},
// 定義計(jì)算屬性的地方
computed: {
//簡(jiǎn)寫
mycomputedname() {
console.log("mycomputedname")
//基于依賴的改變會(huì)重新執(zhí)行一次
return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1)
},
mytext:{
get(){
return "1111"+myname
},
set(data){
console.log("計(jì)算屬性被賦值---",data)
this.myname = data
}
}
},
})
</script>
</body>
</html>
