vue裡面set用法和參數?computed可以完成各種複雜的邏輯，包括運算、函數調用等，隻要最終返回一個結果就可以下面是一個簡易的計算器，來實現乘法的操作：，今天小編就來聊一聊關于vue裡面set用法和參數?接下來我們就一起去研究一下吧!

vue裡面set用法和參數

computed可以完成各種複雜的邏輯，包括運算、函數調用等，隻要最終返回一個結果就可以。下面是一個簡易的計算器，來實現乘法的操作：

<p id="app"> {{ fullName }} </p> <script> var vm = new Vue({ el: '#app', data: { firstName: 'first', lastName: 'last', }, computed: { fullName: function () { return this.firstName ' ' this.lastName } } }) </script>

需要注意的是，就算在data中沒有直接聲明出要計算的變量，也可以直接在computed中寫入。

計算屬性默認隻有getter，可以在需要的時候自己設定setter：

computed: { fullName: { // getter get: function () { return this.firstName ' ' this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }

computed擅長處理的場景：一個數據受多個數據影響

computed 和 methods相比，computed有緩存，性能開銷小

watch和computed很相似，watch用于觀察和監聽頁面上的vue實例，當然在大部分情況下我們都會使用computed，但如果要在數據變化的同時進行異步操作或者是比較大的開銷，那麼watch為最佳選擇。watch為一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象：

例：父組件應用子組件時需要傳入一個參數menuList

<el-aside width="auto"> //左側菜單組件 menuList為傳入的菜單列表 <LeftMenu :menuList="menuList"/> </el-aside>

如果父組件中的數據menuList一旦有變化，子組件中必須要監聽父組件的數據并實時更新

watch:{ menuList:{ updateData(newValue,oldValue){ this.menuList = newValue; }， immediate:true //頁面加載就監聽 } }

如果在data中沒有相應的屬性的話，是不能watch的，這點和computed不一樣。

watch擅長處理的場景：一個數據影響多個數據

methods方法，跟前面的都不一樣，我們通常在這裡面寫入方法，隻要調用就會重新執行一次，相應的有一些觸發條件，在某些時候methods和computed看不出來具體的差别，但是一旦在運算量比較複雜的頁面中，就會體現出不一樣。

在computed和watch方面，一個是計算，一個是觀察，在語義上是有區别的

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!