vue學習---計算屬性
阿新 • • 發佈：2021-11-13
計算屬性：
1.定義：要用的屬性不存在，要通過已有屬性計算得來。
2.原理：底層藉助了Objcet.defineproperty方法提供的getter和setter。
3.get函式什麼時候執行？
(1).初次讀取時會執行一次。
(2).當依賴的資料發生改變時會被再次呼叫。
4.優勢：與methods實現相比，內部有快取機制（複用），效率更高，除錯方便。
5.備註：
1.計算屬性最終會出現在vm上，直接讀取使用即可。
2.如果計算屬性要被修改，那必須寫set函式去響應修改，且set中要引起計算時依賴的資料發生改變。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_計算屬性實現</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 計算屬性： 1.定義：要用的屬性不存在，要通過已有屬性計算得來。 2.原理：底層藉助了Objcet.defineproperty方法提供的getter和setter。 3.get函式什麼時候執行？ (1).初次讀取時會執行一次。 (2).當依賴的資料發生改變時會被再次呼叫。 4.優勢：與methods實現相比，內部有快取機制（複用），效率更高，除錯方便。 5.備註： 1.計算屬性最終會出現在vm上，直接讀取使用即可。 2.如果計算屬性要被修改，那必須寫set函式去響應修改，且set中要引起計算時依賴的資料發生改變。--> <!-- 準備好一個容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 測試：<input type="text" v-model="x"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/> <!-- 全名：<span>{{fullName}}</span> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/> 全名：<span>{{fullName}}</span> --> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。 const vm = new Vue({ el:'#root', data:{ firstName:'張', lastName:'三', x:'你好' }, methods: { demo(){ } }, computed:{ fullName:{ //get有什麼作用？當有人讀取fullName時，get就會被呼叫，且返回值就作為fullName的值 //get什麼時候呼叫？1.初次讀取fullName時。2.所依賴的資料發生變化時。 get(){ console.log('get被呼叫了') // console.log(this) //此處的this是vm return this.firstName + '-' + this.lastName }, //set什麼時候呼叫? 當fullName被修改時。 set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) </script> </html>