計算屬性(computed)
一、使用方式：
1.定義計算屬性： 在Vue組件中，通過在 computed 對象中定義計算屬性名稱及對應的計算函數來創建計算屬性。計算函數會返回計算屬性的值。
2.在模板中使用計算屬性： 在Vue的模板中，您可以直接像訪問普通屬性一樣使用計算屬性。Vue會自動處理計算屬性的依賴關系，并在相關數據變化時更新計算屬性。
3.計算屬性的特點：
（1）計算屬性是基于它們的依賴進行緩存的，只有在依賴發生變化時才會重新求值。
（2）計算屬性的值會根據相關依賴的變化而自動更新，無需手動觸發。
（3）計算屬性的定義類似于普通的屬性，但需要使用函數來返回計算結果。
二、computed與methods的區別：
1.計算屬性和方法的調用方式不同： 計算屬性是通過對應名稱直接訪問的，而方法需要在模板中使用 v-on 指令或者 @ 符號進行調用。
2.計算屬性可以緩存結果，而方法不能： 計算屬性的值會被緩存起來，只有在它所依賴的響應式數據變化時才會重新計算。而方法每次調用都要重新計算，無法被緩存。
3.計算屬性應該用于簡單的計算，而方法用于復雜邏輯的處理： 如果需要對數據進行一些簡單的計算或過濾，可以使用計算屬性，因為它們比方法更高效。而如果需要進行一些復雜的邏輯處理，應該使用方法。
簡單理解和使用計算屬性(computed)：
1.定義：要用的屬性不存在，要通過已有屬性計算得來。
2.原理：底層借助了Object.defineproperty方法提供的getter和setter。
3.get函數什么時候執行？
(1).初次讀取時會執行一次。
(2).當依賴的數據發生改變時會被再次調用。
4.優勢：與methods實現相比，內部有緩存機制(復用)，效率更高，調試方便。
5.備注：
1.計算屬性最終會出現在vm上，直接讀取使用即可。
2.如果計算屬性要被修改，那必須寫set函數去響應修改，且set中要引起計算時依賴的數據發生變化。
舉例：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><script type="text/javascript" src="../js/vue.js"></script><title>計算屬性</title>
</head><body><div id="root01"><h3>差值語法實現</h3>姓：<input type="text" v-model:value="firstName"> <br>名：<input type="text" v-model:value="lastName"><br>全名：{{firstName.slice(0,3)}} {{lastName}}</div><div id="root02"><h3>methods(方法)實現</h3>姓：<input type="text" v-model:value="firstName"> <br>名：<input type="text" v-model:value="lastName"><br>性別：<input type="text" v-model:value="gender"><br>全名：<span>{{fullName()}}</span><br>全名：<span>{{fullName()}}</span></div><div id="root03"><h3>計算屬性實現</h3>姓：<input type="text" v-model:value="firstName"> <br>名：<input type="text" v-model:value="lastName"><br>性別：<input type="text" v-model:value="gender"><br>全名：<span>{{fullName}}</span><br>全名：<span>{{fullName}}</span></div><div id="root04"><h3>計算屬性(簡寫)</h3>姓：<input type="text" v-model:value="firstName"> <br>名：<input type="text" v-model:value="lastName"><br>性別：<input type="text" v-model:value="gender"><br>全名：<span>{{fullName}}</span><br>全名：<span>{{fullName}}</span></div>
</body>
<script>Vue.config.devtools = true;// 1、用 "插值語法" 輸出姓名// vue提倡模板簡單，當表達式過多時，插值語法代碼代碼會看起來臃腫new Vue({el: "#root01",data: {firstName: '張',lastName: '三',}})// 2、用 "methods(方法)" 輸出姓名new Vue({el: "#root02",data: {firstName: '李',lastName: '四',gender: '男'},methods: {fullName() {console.log("fullName方法調用了");return this.firstName.slice(0, 3) + ' ' + this.lastName;}},})// 3、用 "計算屬性" 輸出姓名var vm = new Vue({el: "#root03",data: {firstName: '王',lastName: '五',gender: '女'},// 計算屬性對象的優勢：有緩存，省去不必要的重復調用。// 完整寫法，包含讀取(get)和修改(set)computed: {fullName: {// get的作用：當有人讀取fullName屬性時，get就會被調用，且返回值就作為屬性fullName的值。// get什么時候調用？1.初次讀取fullName時。2.所依賴的數據發生變化時。get() {console.log("計算屬性對象中，屬性fullName內的get函數被調用了");// 此處的this為vmreturn this.firstName + ' ' + this.lastName;},// set什么時候調用：當fullName屬性被修改時。set(value) {console.log('set函數被調用', value);const arr = value.split('');this.firstName = arr[0];this.lastName = arr[1];}}},})new Vue({el: "#root04",data: {firstName: '趙',lastName: '六',gender: '女'},// 計算屬性簡寫，只包含讀取(get)computed: {// 對應以上的get函數，效果一致fullName() {console.log("計算屬性對象中，屬性fullName內的get函數被調用了");return this.firstName + ' ' + this.lastName;}}})
</script>
</html>
)
![[26] cuda 應用之 nppi 實現圖像格式轉換](http://pic.xiahunao.cn/[26] cuda 應用之 nppi 實現圖像格式轉換)
:項目的搭建與啟動)
