Vue.js中的計算屬性、監視屬性與生命周期詳解
本章節咱們來說一下Vue中兩個非常重要的計算屬性、監視屬性和生命周期，不廢話直接上干貨
計算屬性計算屬性介紹在模板中可以直接通過插值語法顯示一些data中的數據，有些情況下我們需要對數據進行轉化或者計算后顯示，我們可以使用computed選項來計算，這時有些小伙伴可能就會問，我直接定義函數再調用不就行了，為什么還要整一個計算屬性呢？這個問題在下邊再做解釋，我們先來看一下計算屬性怎么用！
入門案例需求
將人的姓和名拼接在一起
代碼
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></head><body><div id='app'><!-- 原始拼接方式 --><p>{{fastName}} {{lastName}}</p><!-- 在模板語法中進行計算 --><p>{{fastName + ' ' + lastName}}</p><!-- 調用函數計算 --><p v-text='fullName2()'></p><!-- 使用計算屬性計算 --><p>{{fullName1}}</p></div></body><script type='text/javascript'>var app = new Vue({el: '#app',data: {fastName: 'Tracy',lastName: 'McGrady'},computed: {fullName1: function(){return this.fastName + ' ' + this.lastName}},methods: {fullName2: function(){return this.fastName + ' ' + this.lastName}}})</script></html>
效果
代碼
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></head><body><div id='app'><p>{{totalPrice}}</p></div></body><script type='text/javascript'>var app = new Vue({el: '#app',data: {bookes: [{id: 100,name: ’Unix編程藝術’,price: 119},{id: 200,name: ’Java編程思想’,price: 105},{id: 300,name: ’高并發編程’,price: 98},{id: 400,name: ’Spring5’,price: 99},]},computed: {totalPrice: function(){let result = 0;// 普通循環/* for(let i = 0;i < this.bookes.length;i++){result += this.bookes[i].price;} */// 增強for循環，i為索引/* for(let i in this.bookes){result += this.bookes[i].price;} */// ES6新增for循環直接獲取對象for(let book of this.bookes){result += book.price}return result;}}})</script></html>getter和setter方法
介紹
計算屬性的完整寫法其實是其中包含了getter和setter方法，聲明一個fullName對象，因為我們一般只獲取值，所以會將其省略寫成上邊案例的方式，我們在獲取數據時會調用get方法，設置數據時會調用set方法
代碼
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></head><body><div id='app'><p>{{fullName}}</p></div></body><script type='text/javascript'>var app = new Vue({el: '#app',data: {firstName: 'Tracy',lastName: 'McGrady'},// 計算屬性computed: {// 計算對象fullName:{// 設置數據set: function(){console.log(’---’);},// 獲取數據get: function(){return this.firstName + ' ' + this.lastName;}}}})</script></html>計算屬性緩存
這里就來回答一下上邊的methods和computed的區別的問題，下方代碼分別使用插值語法、methods、計算屬性來做數據渲染。
代碼
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></head><body><div id='app'><!-- 原始方式，該方式面對數據計算時比較繁瑣，不推薦使用 --><p>名字：{{name}} 工作：{{job}}</p><!-- methods方式，每獲取一次數據就調用一次函數 --><p>{{getInfo1()}}</p><p>{{getInfo1()}}</p><p>{{getInfo1()}}</p><p>{{getInfo1()}}</p><!-- computed方式，當數據沒有發生變化時，僅調用一次，會將數據進行緩存 --><p>{{getInfo2}}</p><p>{{getInfo2}}</p><p>{{getInfo2}}</p><p>{{getInfo2}}</p><p>{{getInfo2}}</p></div></body><script type='text/javascript'>var app = new Vue({el: '#app',data: {name: '麥迪',job: 'NBA球星'},methods: {getInfo1: function(){console.log('methods');return '名字：' + this.name + '工作： ' + this.job;}},computed: {getInfo2: function(){console.log('computed');return '名字：' + this.name + '工作： ' + this.job;}}})</script></html>
圖解
結論
methods和computed看起來都能實現我們的功能 計算屬性會進行緩存，如果多次使用時，計算屬性只會調用一次 監視屬性概述我們可以使用watch來監聽指定數據的變換，進而調用對應的邏輯處理數據
代碼<!DOCTYPE html><html><head><meta charset='utf-8'><title></title></head><body><div id='app'><input type='text' v-model='firstName' /><input type='text' v-model='lastName' /><input type='text' v-model='fullName' /></div></body><script src='http://m.b3g6.com/bcjs/js/vue.js' type='text/javascript' charset='utf-8'></script><script type='text/javascript'>const app = new Vue({el: '#app',data: {firstName: 'A',lastName: 'B',fullName: 'AB'},// 監視屬性watch: {firstName(value) {this.fullName = value + this.lastName},lastName(value) {this.fullName = this.firstName + value}}})</script></html>總結
監聽屬性要比計算屬性代碼多很多，計算屬性只需要計算數據即可，而監聽屬性需要監聽每個數據的變化
Vue生命周期下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高
生命周期大致分為三個階段 初始化階段 、 更新階段 、 死亡階段
初始化階段該階段在new Vue 實例時調用，并且只調用一次
beforeCreate：創建之前調用函數
created：創建之后調用函數
之后進行掛載和模板渲染
beforeMount：掛載前操作，去替換el選中的標簽
Mounted：掛載完成，數據顯示在瀏覽器上
更新階段當數據發生變化時進入該階段，該階段會 頻繁調用
beforeUpdate：當數據發生修改時觸發
updated：虛擬DOM發生修改后，也就是數據修改后調用
死亡階段死亡階段 也只 調用一次
beforeDestroy：銷毀之前
destroyed：銷毀
示例代碼如下
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title></head><body><div id='app'><p v-show='isShow'>{{message}}</p><p>{{isShow}}</p><button type='button' @click='destroyVM'>取消布靈布靈</button></div></body><script src='http://m.b3g6.com/bcjs/js/vue.js' type='text/javascript' charset='utf-8'></script><script type='text/javascript'>const app = new Vue({el: '#app',data: {message: '若隱若現',isShow: true},beforeCreate() {console.log('beforeCreate');},created() {console.log('create');},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');// 創建定時器this.intervald = setInterval(()=>{console.log('-------'+this.isShow);this.isShow = !this.isShow;},1000)},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeDestroy() {console.log('beforeDestroy');// 清除定時器clearInterval(this.intervald)},destroyed() {console.log('destroyed');},methods: {// 干掉vmdestroyVM() {// 調用銷毀函數this.$destroy()}}})</script></html>
圖示如下，在頁面刷新時依次調用 beforeCreate、created、beforeMount、mounted，定時器運行修改isShow數據時多次調用 beforeUpdate、updated，點擊按鈕調用注銷函數，調用beforeDestroy、destroyed
總的來說created、mounted、beforeDestroy較為常用
created、mounted：發送ajax請求，啟動定時器等異步任務 beforeDestroy：做收尾工作，如：清除定時器
到此這篇關于Vue.js中計算屬性、監視屬性與生命周期的文章就介紹到這了,更多相關Vue計算屬性、監視屬性與生命周期內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備