關于vue中計算屬性computed的詳細講解
更新時間：2022年07月10日 09:56:21 作者：alical
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數,下面這篇文章主要給大家介紹了關于vue中計算屬性computed的詳細講解,需要的朋友可以參考下
1.定義
computed是vue的計算屬性，是根據依賴關系進行緩存的計算，只有在它的相關依賴發(fā)生改變時才會進行更新
2.用法
一般情況下，computed默認使用的是getter屬性
3.computed的響應式依賴(緩存)
1. computed的每一個計算屬性都會被緩存起來，只要計算屬性所依賴的屬性發(fā)生變化，計算屬性就會重新執(zhí)行，視圖也會更新。下面代碼中，計算屬性fullName，它依賴了firstName和lastName這兩個屬性，只要它們其中一個屬性變化，fullName就會重新執(zhí)行。
2.computed計算屬性會被緩存，在下面代碼中使用了兩次fullName，但在控制臺只輸出了一次 “這是fullName”。
<template>
<div>
<div>
姓：<input type="text" v-model="firstName" />
</div>
<div>
名：<input type="text" v-model="lastName" />
</div>
<!-- 調用兩次fullName -->
<div>姓名：{{ fullName }}</div>
<div>姓名：{{ fullName }}</div>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "張",
lastName: "三",
};
},
computed: {
fullName() {
console.log("這是fullName");
return this.firstName + this.lastName;
}
}
};
</script>
4.應用場景
當一個數據受多個數據影響時，可以使用computed
1.本組件計算
2.計算props的值
3.計算vuex的state或者getters值的變化
附：計算屬性的 getter 與 setter
默認情況下，計算屬性函數是一個 getter 函數，如果計算屬性只有 get 需求，則可以簡寫
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
? ? <div id="app">
? ? ? ? <div>
? ? ? ? ? ? <!-- <input type="checkbox" v-model='isAll'> -->
? ? ? ? ? ? <input type="text" v-model='n'>
? ? ? ? ? ? +
? ? ? ? ? ? <input type="text" v-model='m'>
? ? ? ? ? ? =
? ? ? ? ? ? <input type="text" v-model='x'>
? ? ? ? </div>
? ? ? ? {{o}}
? ? </div>
? ? <script>
? ? ? ? let vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? is: true,
? ? ? ? ? ? ? ? obj: {
? ? ? ? ? ? ? ? ? ? // a: 1
? ? ? ? ? ? ? ? ? ? a: 1
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? n: '',
? ? ? ? ? ? ? ? m: ''
? ? ? ? ? ? },
? ? ? ? ? ? computed: {
? ? ? ? ? ? ? ? //計算屬性在這里寫的屬性不要在data重復寫 跟data中的數據一樣可以通過vm.獲取或者修改
? ? ? ? ? ? ? ? isAll: {
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? //只要獲取這個屬性就會觸發(fā)get這個函數
? ? ? ? ? ? ? ? ? ? ? ? console.log(1);
? ? ? ? ? ? ? ? ? ? ? ? return this.is
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? set(val) {
? ? ? ? ? ? ? ? ? ? ? ? // val 設置的值
? ? ? ? ? ? ? ? ? ? ? ? this.isAll = this.is
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? x: {
? ? ? ? ? ? ? ? ? ? // 只要是依賴的值（必須有setter和getter響應的數據）發(fā)生改變了就會重新計算自己的值
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? return Number(this.n) + Number(this.m)
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? // set(){
? ? ? ? ? ? ? ? ? ? // ? ? Number(this.n) + Number(this.m)
? ? ? ? ? ? ? ? ? ? // }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? o: {
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? //如果沒有在data的obj中初始化 就沒有getter和setter響應 當改變this.obj.a的時候不會影響 數據o
? ? ? ? ? ? ? ? ? ? ? ? return this.obj.a + 1
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ss: {
? ? ? ? ? ? ? ? ? ? get() { },
? ? ? ? ? ? ? ? ? ? //計算屬性必須要有get可以沒有set
? ? ? ? ? ? ? ? ? ? //v-model綁定的計算屬性有get和set
? ? ? ? ? ? ? ? ? ? //其他的一般只有get
? ? ? ? ? ? ? ? ? ? set() { }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? xx() {
? ? ? ? ? ? ? ? ? ? //如果這個計算屬性只有get可以寫成一個函數的形式
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? bb() {
? ? ? ? ? ? ? ? ? ? //第一次獲取的時候依賴值沒有發(fā)生改變但是也會默認執(zhí)行一次
? ? ? ? ? ? ? ? ? ? // 必須要有return ?不支持異步
? ? ? ? ? ? ? ? ? ? let a = 'kk';
? ? ? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? ? ? a = this.aa + a
? ? ? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? ? ? ? ? console.log(a);
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? return this.aa
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>參考：https://cn.vuejs.org/v2/guide/computed.html
https://segmentfault.com/a/110000012948175
總結
到此這篇關于vue中計算屬性computed的詳細講解的文章就介紹到這了,更多相關vue計算屬性computed內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue3中定義全局指令時,往往會碰到一個問題：事件無法解綁,為什么會這樣,因為通常在指令的mounted鉤子中綁定事件,事件處理函數也定義在mounted中,本文講給大家講講vue3中addEventListener的妙用,需要的朋友可以參考下2023-08-08
Vue?elementui如何實現表格selection的默認勾選
這篇文章主要介紹了Vue?elementui如何實現表格selection的默認勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
發(fā)中會有要獲取當前日期的需求,有的是獲取到當前月份,有的是精確到分秒,在 Vue 開發(fā)中,獲取當前時間是一項常見的需求,本文將深入探討Vue獲取當前系統日期(年月日),幫助您更好地利用當前時間,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關于vue3中輕松實現switch功能組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
在項目開發(fā)中我們難免碰到需要對webpack配置更改的情況,下面這篇文章主要給大家介紹了關于vuecli中chainWebpack的常用操作舉例,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
vue.js 解決v-model讓select默認選中不生效的問題
這篇文章主要介紹了vue.js 解決v-model讓select默認選中不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了el-menu彈出菜單樣式不生效的問題及解決方法,修改彈出框元素不在 el-menu 樣式中,我們需要在 el-menu–popup 中修改樣式,具體操作代碼跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了Vue中transition的使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
彈窗經常被使用在一些表單的增刪改查啊,或者彈出一些提示信息等等,這篇文章主要給大家介紹了關于Vue?Dialog彈窗詬病解決的相關資料,需要的朋友可以參考下2023-01-01
詳解如何使用vue和electron開發(fā)一個桌面應用
這篇文章主要為大家介紹了詳解如何使用vue和electron開發(fā)一個桌面應用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03