計算屬性與監視屬性
阿新 • • 發佈：2022-03-08
計算屬性與監視屬性
計算屬性computed：
通過已有屬性計算出來的屬性
示例：
computed: {
• demo: {
//初次讀取或所依賴的資料發生改變時get函式會被呼叫 放回的值就是計算屬性的值
• get() {
• return num * 10;
• },
//計算屬性demo被修改時會呼叫 引數value為修改後的值
• set(value) {
• console.log(value);
• }
• }
}
計算屬性的簡寫形式
computed: {
//計算屬性不用修改時，可簡寫 相當於get
• demo() {
• return num * 10;
• }
}
總結：與methods實現相比，計算屬性內部有快取機制（複用），效率更高，除錯方便。
監視屬性watch：
示例
watch: {
• num: {
• immediate:true, //初始化就呼叫handler，預設為false
• deep: true,//開啟深度監視，預設為false
• handler(newValue,oldValue){// 當num發生改變時呼叫
• console.log('num被修改了',newValue,oldValue);
• }
• }
}
監視屬性的簡寫形式：
watch: {
• num(newValue,oldValue) {
• console.log('num被修改了',newValue,oldValue);
• }
}
總結