計算屬性是自動監聽依賴值的變化，從而動態返回內容，監聽是一個過程，在監聽的值變化時，可以觸發一個回調，并做一些事情。特點：

• 監測的是依賴值，依賴值不變的情況下其會直接讀取緩存進行復用，變化的情況下才會重新計算
• 數據可以進行邏輯處理，減少模板中計算邏輯。
• 對計算屬性中的數據進行監視

計算屬性由兩部分組成：get和set，分別用來獲取計算屬性和設置計算屬性。默認只有get，如果需要set，要自己添加。另外set設置屬性，并不是直接修改自身的值，而是修改它的依賴。

computed: {fullName: {// getterget () {return this.firstName + ' ' + this.lastName},// setterset (newValue) {//this.fullName = newValue 這種寫法會報錯var names = newValue.split(' ')this.firstName = names[0]//對它的依賴進行賦值this.lastName = names[names.length - 1]}} }

現在再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新

計算屬性必須寫get,set的場景

計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter： 當你去設置計算屬性時，也就是去修改計算屬性時，需要寫成get,set的方式

如果沒有寫會直接報錯，比如

<template><div class="a"><button @click="add">點擊{{closure}}</button></div> </template><script> export default {props: {},data() {return {a: 1}},computed: {closure() {return 'abc'}},methods: {add() {this.closure = 'defg'}} } </script>

正確寫法

computed: {closure: {get() {console.log(123)return 'abc'},set(value) {// 那這個地方就只能拿值而不能修改closure的值了// this.closure = 'value' 會報錯//做一些其他邏輯console.log(value)}}},methods: {add() {// 修改無效this.closure = 'defg'}}

get set應用場景1

用v-model來實現雙向綁定（推薦用watch）

visible: {get() {return this.value},set(val) {}}

get set應用場景2

雙向綁定的計算屬性+vuex

<input v-model="message">// ... computed: {message: {get () {return this.$store.state.obj.message},set (value) {this.$store.commit('updateMessage', value)}} }

可緩存性

<p>Reversed message: "{{ reversedMessage() }}"</p> // 在組件中 methods: {reversedMessage: function () {return this.message.split('').reverse().join('')} }

計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

這也同樣意味著下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：

computed: {now: function () {return Date.now()} }

計算屬性可以通過閉包來實現傳參

:data="closure(item, itemName, blablaParams)" computed: {closure () {return (a, b, c)=> {/** do something */return data}} } 如果用閉包來實現傳參，那么計算屬性不具有可緩存性。

與watch進行對比

• watch：監測的是屬性值， 只要屬性值發生變化，其都會觸發執行回調函數來執行一系列操作。
• computed：監測的是依賴值，依賴值不變的情況下其會直接讀取緩存進行復用，變化的情況下才會重新計算。
• 計算屬性不能執行異步任務，計算屬性必須同步執行，watch可執行異步任務，遇到異步任務，就交給偵聽屬性
• watch也可以檢測computed屬性

總結

計算屬性適合用在模板渲染中，某個值是依賴了其它的響應式對象甚至是計算屬性計算而來；而偵聽屬性適用于觀測某個值的變化去完成一段復雜的業務邏輯。

• computed能做的，watch都能做，反之則不行
• 能用computed的盡量用computed

總結

以上是生活随笔為你收集整理的vue 计算属性和data_Vue计算属性原理和使用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。