Vue的計算屬性computed、方法methods、偵聽器watch的區別
1. 方法總和methods內的函式如何觸發?
機制:methods內的函式和普通的函式沒有區別。
觸發:methods內的函式執行的時候,才能觸發;
注意:當頁面渲染的時候,也會執行下面程式碼中的methodsN函式;methods內的函式命名不能與data中的屬性重名。
下面例項中的methodsName屬性會新增到Vue例項的vm中,和methods一個級別
下面例子中,當點選時執行一次clickme函式:
觸發方式:點選執行
<div id="demo"> <button @click="clickme">click me</button> <p>{{time}}</p> </div> var vm = new({ data: { time: '' }, methods: { clickme(){ console.log("methods") this.time = Date(); } }, })
結果:
2. 計算屬性computed內的函式如何觸發?
機制:{{函式名}} <---return <--- 值
觸發:當值發生變化的時候,頁面中的{{函式名}}也發生變化,就會觸發該函式
注意:return 會將函式名 返回到和computed一個級別,這樣函式名就是Vue例項vm的屬性,所以才能在標籤中使用該屬性
有快取,所以該值不變下的頁面渲染不會觸發該函式
3. 偵聽器watch內的函式如何觸發?
機制:watch內的函式名 === data中的屬性名
觸發:
注意:有快取,所以該值不變下的頁面渲染不會觸發該函式;但程式碼複雜
<div id="demo"> <div>{{methodsN()}}執行methods內的methodsN:{{methodsName}}</div> <div>觸發computed內的computedName:{{computedName}} {{age}}</div> <div>firstName的值:{{firstName}}</div> </div> <script> var vm = new Vue({ el: '#demo', data: { firstName: 'yuzhu', lastName: 'zhu', age: 22 }, methods: { //方法執行就會觸發,每次頁面渲染都會觸發函式 methodsN: function(){ console.log("計算了methods") //this.methodsName 可以通過函式給vm物件新增methodsName屬性 this.methodsName = this.firstName + this.lastName; } }, computed: { //computed:計算屬性,前提是:Vue的html標籤中使用computed自定義的方法 //同時,要使用return。 // {{函式名}} <---return <--- 值 當值發生變化的時候,{{函式名}}對應變化 computedName: function(){ console.log("計算了computed") return this.firstName + ' ' + this.lastName //computedName屬性也新增到vm物件上 } }, watch: { //watch:監聽的是屬性firstName的變化,即watch中的函式名 === data中的屬性名 //當firstName發生改變時,觸發firstName這個函式 firstName: function(){ console.log("計算了watch") } } }) </script>
結果:頁面重新整理的時候觸發了methods中的methodsN 和 computed中的computedName,而watch中的firstName沒有觸發
原因:
(1)methodsN在標籤中執行,每次頁面重新整理都會執行,每次渲染頁面都會觸發,哪怕是上述例子中age值的改變,也會重排渲染頁面,觸發methodsN函式
(2)computedName在頁面重新整理的時候觸發,因為Vue例項vm中本來沒有computedName屬性,也就是該值為undefined,當頁面重新整理的時候,該值改變,就會觸發computedName函式;而age值的改變不會觸發computedName,因為有快取,只有當computedName值發生改變時,才會觸發該函式。
(3)firstName函式沒有觸發,因為該值沒有改變。
二、深入理解computed
內部函式可以寫成物件形式,該物件內有get、set方法(系統自帶),為什麼還可以直接使用fullName呢???
<div id="demo">{{fullName}}</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 1,
lastName: 2,
},
computed: {
fullName: {
get: function(){
return this.firstName + " " + this.lastName
},
set: function(value){
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
控制檯的操作: