打赏

Vue 中computed 与 methods 区别

1、示例

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>computed 与 methods 区别 </title>
    </head>

    <body>
        <div id="root">
            <input type="text" v-model="message">
            <p>{{ message }}</p>
            <p>{{ now1 }}</p>
            <p>{{ now2() }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">
            var vm = new Vue({
                el: '#root',
                data: {
                    message: ''
                },
                computed: {
                    now1: function() {
                        return Date.now();
                    }
                },
                methods: {
                    now2: function() {
                        return Date.now();
                    }
                }
            });
        </script>
    </body>

</html>

说明:当页面中的message发生变化,重新渲染时now1 会不变,now2会改变。

即:

计算属性只有在它的相关依赖发生改变时才会重新求值。

每当触发重新渲染时,调用方法将总会再次执行函数。

posted @ 2018-04-24 10:02  孟繁贵  阅读(374)  评论(0编辑  收藏  举报
TOP