Vue:計算機屬性,內容分發,自定義事件
阿新 • • 發佈：2020-09-08
什麼是計算屬性,內容分發,自定義事件
計算屬性的重點突出在屬性兩個字上(屬性是名詞),首先它是個屬性其次這個屬性有計算的能力(計算是動詞),這裡的計算就是個函式;簡單點說,它就是一個能夠計算結果快取起來的屬性(將行為轉化成了靜態的屬性),僅此而已;可以想象為快取
計算屬性:計算出來的結果,儲存在屬性中,記憶體中執行:虛擬dom
上程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> currentTime1: {{currentTime1()}} //呼叫犯法 </div> <div> currentTime2: {{currentTime2}} //呼叫計算屬性 </div> </div> </body> <!--引入js檔案--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { message: "Helloworld" }, methods: { //普通方法 currentTime1: function(){ return Date.now(); //返回一個時間戳 } }, computed:{ //計算屬性:methods,computed的方法最好不要重名,重名後只會呼叫methods中的方法 currentTime2: function () { this.message; return Date.now();//返回一個時間戳 } } }); </script> </html>
注意:methods和computed裡的東西不能重名
- method:定義方法,呼叫方法使用currentTime(),需要帶括號
- computed:定義計算屬性,呼叫屬性使用currenTime2,不需要帶括號:this.message是為了能夠讓currentTime2觀察到資料變化
- 如何在方法中的值發生了變化,則快取就會重新整理!可以在控制檯使用vm.message="HelloShit!"
所以怎麼知道這是快取的數呢(f5沒用昂,因為你這一重新整理介面快取就重新了),如下圖可以看出不論怎樣呼叫計算屬性值都是一樣的
在程式碼中加入如下
當然不要以為只能f5重新整理這個快取才能變,如圖,修改屬性的時候也能使快取改變(獲取屬性無法改變)
為什麼這樣設計?
因為如果每一次呼叫都呼叫一個方法太消耗資源,資料太多的話會卡死,如果從快取中呼叫不僅會大大提升效率,還不佔用資源
結論:
呼叫方法是,每次都需要進行計算,既然有狗計算過程則必定產生系統開銷,那如果這個結果是不經常變化的呢?此時就可以考慮將這個結果快取起來,採用計算屬性可以很方便的做到這一點,計算屬性的主要特徵就是為了將不經常變化的計算結果進行快取,以節約我們的系統開銷;
內容分發
在Vue.js中我們使用插槽,可以應用在組合場景中;
測試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <p>列表書籍</p>-->
<!-- <li>JAVA</li>-->
<!-- <li>C</li>-->
<!-- <li>Python</li>-->
<todo> //大模板
<todo-title slot="todo-title" :title="title"></todo-title> //插進插槽的元件
<todo-items :item="item" slot="todo-items" v-for="item in todoTtems">//插進插槽的元件</todo-items>
</todo>
</div>
</body>
<!--引入js檔案-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
Vue.component("todo",{
//slot:插槽 顧明思議,可以插進去模板,當然也可以不插進去
template:
'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
<div>'
})
Vue.component("todo-title",{ //元件
props: ['title'],//接收資料
template: '<p>{{title}}</p>' //模板
});
Vue.component("todo-items",{//元件
props: ['item'], //接收資料
template: '<li>{{item}}</li>' //模板
});
var vm = new Vue({
el: '#app',
data: {
title: "臭狗屎列表",
todoTtems: ['臭狗屎哈哈哈','臭狗屎紅紅火火恍恍惚惚','臭狗屎2222']
}
});
</script>
</html>
來自為知筆記(Wiz)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <p>列表書籍</p>-->
<!-- <li>JAVA</li>-->
<!-- <li>C</li>-->
<!-- <li>Python</li>-->
<todo> //大模板
<todo-title slot="todo-title" :title="title"></todo-title> //插進插槽的元件
<todo-items :item="item" slot="todo-items" v-for="item in todoTtems">//插進插槽的元件</todo-items>
</todo>
</div>
</body>
<!--引入js檔案-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
Vue.component("todo",{
//slot:插槽 顧明思議,可以插進去模板,當然也可以不插進去
template:
'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
<div>'
})
Vue.component("todo-title",{ //元件
props: ['title'],//接收資料
template: '<p>{{title}}</p>' //模板
});
Vue.component("todo-items",{//元件
props: ['item'], //接收資料
template: '<li>{{item}}</li>' //模板
});
var vm = new Vue({
el: '#app',
data: {
title: "臭狗屎列表",
todoTtems: ['臭狗屎哈哈哈','臭狗屎紅紅火火恍恍惚惚','臭狗屎2222']
}
});
</script>
</html>