Vue 計算屬性 && 監視屬性
阿新 • • 發佈：2022-05-20
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Vue 計算屬性</title> 6 <script type="text/javascript" src="../js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 Vue中的計算屬性： 11 1.定義：要用的屬性不存在，要通過已有屬性計算得來。12 2.原理：底層藉助Object.defineproperty方法提供getter和setter。 13 3.get函式什麼時候執行 14 .初次讀取時會執行一次。 15 .當依賴的資料發生改變的時候會再次呼叫 16 4.優勢：與通過methods實現計算屬性相比，內部有快取機制（複用），效率更高，除錯方便。 17 5.備註： 18 .計算屬性最終會出現在vm上，直接讀取使用即可 19 .如果計算屬性要被修改，那必須寫set函式去響應修改，且set中要引起計算時依賴的資料發生改變20 21 --> 22 <div id="root"> 23 姓：<input type="text" v-model="firstName" > <br /> 24 名：<input type="text" v-model="lastName" > <br /> 25 全名：<span>{{fullName}}</span> 26 </div> 27 </body> 28 29<script type="text/javascript" > 30 Vue.config.productionTip = false;// 阻止 vue 在啟動時生成生產提示。 31 let vm = new Vue({ 32 el: '#root', 33 data:{ 34 firstName: '張', 35 lastName: '三' 36 }, 37 computed:{ 38 fullName: { 39 get(){ // get什麼時候呼叫：1.初次讀取fullName的時候，2.所依賴的資料發生變化的時候呼叫。3.其它都是直接從快取中獲取fullName的值 40 return this.firstName + '-' + this.lastName 41 }, 42 set(value){ // 當this.fullName='李-四'值修改的時候呼叫 43 let arr = value.split('-'); 44 this.firstName = arr[0]; 45 this.lastName = arr[1]; 46 } 47 }, 48 fullName1:function(){ // 計算屬性簡寫（當計算屬性只考慮讀取才能簡寫，fullName1直接當做get） 49 return this.firstName + '-' + this.lastName 50 } 51 } 52 }) 53 </script> 54 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Vue 監視屬性</title> 6 <script type="text/javascript" src="../js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 監視屬性watch： 11 1.當被監視的屬性變化時，回撥函式自動呼叫，進行相關操作 12 2.監視的屬性必須存在，才能進行監視 13 3.監視的兩種寫法： 14 .new Vue時傳入watch配置 15 .通過vm.$watch新增監視屬性 16 4.深度監視： 17 .Vue中的watch預設不監視物件內部值的改變（一層） 18 .配置deep:true可以檢測物件內部值的改變（多層） 19 備註： 20 .Vue自身可以檢測物件內部值的改變，但Vue提供的watch預設不檢測內部值的改變 21 .使用watch時根據資料的具體結構，決定是否採用深度監視 22 --> 23 <div id="root"> 24 <h2>今天天氣很{{info}}</h2> 25 <button @click="changeWeather">切換天氣</button> 26 <br /> 27 <h3>a的值是：{{numbers.a}}</h3> 28 <button @click="numbers.a++">點我讓a+1</button><br /> 29 <h3>b的值是：{{numbers.b}}</h3> 30 <button @click="numbers.b++">點我讓b+1</button><br /> 31 </div> 32 </body> 33 34 <script type="text/javascript" > 35 Vue.config.productionTip = false;// 阻止 vue 在啟動時生成生產提示。 36 let vm = new Vue({ 37 el: '#root', 38 data:{ 39 isHot: false, 40 numbers: { 41 a:1, 42 b:1 43 } 44 }, 45 computed:{ 46 info(){ 47 return this.isHot ? '炎熱' : '涼爽'; 48 } 49 }, 50 methods:{ 51 changeWeather(e){ 52 this.isHot = ! this.isHot; 53 } 54 }, 55 watch:{ 56 // isHot:{ // 不僅可以監視data中的資料，還可以監控computed中的資料 57 // immediate: true, // 初始化時自動呼叫一下handler 58 // handler(newValue, oldValue){ // 當isHot發生改變時呼叫 59 // console.log(newValue, oldValue); 60 // console.log('isHot被修改了！'); 61 // } 62 // }, 63 'numbers.a':{ // 監測多層次結構中某個屬性的變化 64 handler(newValue, oldValue){ 65 console.log('numbers.a被修改了！'); 66 } 67 }, 68 numbers:{ 69 deep: true, // 監測多層次結構的所有變化，該值預設為false不監視 70 handler(newValue, oldValue){ 71 console.log('numbers被修改了！'); 72 } 73 } 74 } 75 }); 76 // 另一種新增監視屬性的方式 77 // 好處：可以根據使用者的行為從而決定監視哪個屬性 78 vm.$watch('isHot',{ 79 immediate: true, // 初始化時自動呼叫一下handler 80 handler(newValue, oldValue){ // 當isHot發生改變時呼叫 81 console.log(newValue, oldValue); 82 console.log('isHot被修改了！'); 83 } 84 }) 85 </script> 86 </html>