實例分析Vue.js中 computed和methods不一樣機制

時間 2019-12-07

標籤實例分析 vue.js vue computed methods 不一樣機制欄目 JavaScript 简体版

原文原文鏈接

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

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

2.咱們可使用 methods 來替代 computed，效果上兩個都是同樣的，可是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會從新取值。html

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

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

<!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>