實例分析Vue.js中 computed和method不同機制

阿新 • • 發佈：2017-09-12

java meta 取值源碼 otc 它的 round div 兩種

在vue.js中，有methods和computed兩種方式來動態當作方法來用的

1.首先最明顯的不同就是調用的時候，methods要加上（）

2.我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值。

而使用 methods ，在重新渲染的時候，函數總會重新調用執行

為了方便理解，先上一段源碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        < 
title>title</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    </head>

    <body>
        <div class="test">    <!--computed計算屬性-->
            <p>{{now}}</p>
            <p>{{now}}</p>
            < 
p>{{now}}</p>
            <p>{{now}}</p>
            <hr />            <!--橫線分割-->
</div>
        <div class="test2">   <!--methods方法，註意new（）加了括號-->
            <p>{{now()}}</p>
            <p>{{now()}}</p>
            <p>{{now()}}</ 
p>
            <p>{{now()}}</p>
        </div>
    </body>

    <script type="text/javascript">
        var myVue = new Vue({
            el: ".test",
            computed: {
                now: function() {
                    var yanshi = 0;
                    for(var o = 0; o < 2000; o++) {     //延時
                        for(var q = 0; q < 2000; q++) {
                            yanshi++;
                        }
                    }
                    return Date.now()
                }
            }
        });
        var vue2 = new Vue({
            el: ‘.test2‘,
            methods: {
                now: function() {
                    var yanshi = 0;
                    for(var o = 0; o < 2000; o++) {
                        for(var q = 0; q < 2000; q++) {
                            yanshi++;
                        }
                    }
                    return Date.now()
                }
            }
        })
    </script>

</html>

技術分享

運行結果如上，可以看出computed計算屬性的話，每次進入頁面將一直沿用第一次的信息，不會再觸發now，這就是依賴緩存。（有延時的情況下多次輸出時間相同）

那什麽是相關依賴發生改變時才會重新取值呢比方說reversedMessage function（）計算屬性中調用了message變量

就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

而methods是實時的，在重新渲染時，函數總會重新調用執行，不會緩存，（多次輸出時間不同）

可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。

computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：所以其實computed也是可以傳參的。

實例分析Vue.js中 computed和method不同機制

java meta 取值源碼 otc 它的 round div 兩種在vue.js中，有methods和computed兩種方式來動態當作方法來用的 1.首先最明顯的不同就是調用的時候，methods要加上（） 2.我們可以使用 methods 來替代 compute

Vue.js的computed和watch用法及區別

1. 如何使用 1.1 computed計算屬性 <template> <div> <el-input v-model="value1" placeholder="費用1"></el-input>

Vue.js之computed和watch的使用與區別

VUE之computed和watch應用與區別目錄： computed watch computed 計算結果並返回，只有當被計算的值發生改變時才會觸發 (即：計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算) new Vue(

Vue.js中data,props和computed資料

在用Vue.js做開發的時候，一定知道 data, props和computed。用了這麼久的Vue就總結一下這個三個東西，首先看看官網怎麼定義他們，https://cn.vuejs.org/v2/a

MVC模式在Java Web應用程序中的實例分析

rip run writer fault esp 身份驗證 int 網站 table 結合六個基本質量屬性可用性：異常可修改性： 1.維持語義的一致性，高內聚低耦合 2.維持現有的接口，Login依賴LoginIService接口，LoginService依賴ILog

【OpenGL】Shader實例分析（九）- AngryBots中的主角受傷特效

spa 2.7 imp ttext pro tint shader 作用負責轉發請保持地址：http://blog.csdn.net/stalendp/article/details/40859441 AngryBots是Unity官方的一個非常棒的樣例。非常有研究

【Java學習筆記之二十二】解析接口在Java繼承中的用法及實例分析

ani 復制代碼 ads compute 現在 target body 常量實現接口一、定義 Java接口（Interface），是一系列方法的聲明，是一些方法特征的集合，一個接口只有方法的特征沒有方法的實現，因此這些方法可以在不同的地方被不同的類實現，而這些實現可以具

C#中類與結構的區別實例分析

類與結構 main bds nbsp 模擬鼠標指向 img adding 區別類與結構是C#程序設計中基本的數據類型，而初學者往往不能很好的分清二者之間的區別。本文就以附帶實例形式加以說明。具體如下：一、基本概念：類：引用類型，存儲在堆中，棧中存儲引用地址

閱讀《大型網站技術架構：核心原理與案例分析》第五、六、七章，結合《河北省重大技術需求征集系統》，列舉實例分析采用的可用性和可修改性戰術

定時並不會表現做出 span class 硬件進行情況　　網站的可用性描述網站可有效訪問的特性，網站的頁面能完整呈現在用戶面前，需要經過很多個環節，任何一個環節出了問題，都可能導致網站頁面不可訪問。可用性指標是網站架構設計的重要指標，對外是服務承諾，對內是考核指

vue.js 第一課：實例化vue

col 開發 china css min tle 賦值 dem oct 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"&g

jquery中ajax使用error調試錯誤的方法,實例分析了Ajax的使用方法與error函數調試錯誤的技巧

類型如果出錯 uri 控制 XML 執行命令等待 mime類型代碼：$(document).ready(function() { jQuery("#clearCac").click(function() { jQu

vue.js 中 :is 與 is 的用法和區別,學習全域性與區域性註冊元件

vue中 is用來動態切換元件，詳細請看示例：（順便講解父向子元件的傳遞資訊） html： <div id="app"> <!-- 1.在這裡呼叫元件。 &

vue.js 中 data, prop, computed, method，watch 介紹

vue.js 中 data, prop, computed, method，watch 介紹 data, prop, computed, method 的區別型別載入順序載入時間寫法作用備註 pro

vue中computed 和 watch的異同

computed 在資料未發生變化時，優先讀取快取。computed 計算屬性只有在相關的資料發生變化時才會改變要計算的屬性，當相關資料沒有變化是，它會讀取快取。而不必想 motheds方法和 watch 方法是的每次都去執行函式。 computed:{ fullName:{

angular.js和vue.js中實現函數去抖（debounce）

搜索輸入框 sea class 方案 get clas 電路 dia ive 問題描述搜索輸入框中，只當用戶停止輸入後，才進行後續的操作，比如發起Http請求等。學過電子電路的同學應該知道按鍵防抖。原理是一樣的：就是說當調用動作n毫秒後，才會執行該動作，若在這n毫秒內又

深入解析Vue.js中v-bind v-model的使用和區別

v-model 指令在表單控制元件元素上建立雙向資料繫結,所謂雙向繫結，指的就是我們在js中的vue例項中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的資料最基礎的就是實現一個聯動的效果 <body> <

解析Vue.js中的computed工作原理

我們通過實現一個簡單版的和Vue中computed具有相同功能的函式來了解computed是如何工作的。寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 JS屬性： JavaScript有一個特性是 Object.defineProperty ,它能做很多

Vue.js中計算屬性和方法的區別

在vue.js中，計算屬性和方法達到的效果是一樣的，但是計算屬性是基於依賴進行快取的，只有message發生改變才會導致reverseMessage發生改變，只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不

VUE中computed和watch的使用

VUE中computed和watch的使用 VUE中computed和watch的使用 1.computed computed用來監控自己定義的變數，該變數不在data裡面宣告，直接在computed裡面定義，然後就可以在頁面上進行雙向資料繫結展示出結果或者用作其他處理； com

vue中Computed 和 Watch的使用和區別

Computed: 可以關聯多個實時計算的物件，當這些物件中的其中一個改變時都會出發這個屬性。具有快取能力，所以只有當資料再次改變時才會重新渲染，否則就會直接拿取快取中的資料。舉個例子：當我們想讓div元素的背景色和文字顏色一致時，我們就可以使用comp

實例分析Vue.js中 computed和method不同機制

相關推薦