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会改变。

即:

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

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

Vue 中computed 与 methods 区别的更多相关文章

  1. Vue中computed，methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

  2. vue中computed与methods的异同

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  3. Vue中computed、methods、watch的联系和区别

    computed是计算树形,methods是方法. new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversed ...

  4. Vue中 computed 和 methods的区别

    涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...

  5. Vue 中 computed ,watch,methods 的异同

    methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...

  6. Vue的computed和methods区别

    1,computed里面定义的方法是以属性的方式(当然也可以以函数调用的方式)出现在html里面,而methods里面定义的方法是以函数的方式: 2,computed依赖于data里面的数据,只有相关 ...

  7. Vue中computed和watch的区别

    在vue中computed和watch的真正区别是:computed产生于它的依赖,而watch产生于它的依赖的变化.只要依赖存在,我们就能访问到其对应的computed属性:但只有依赖发生了改变,我 ...

  8. vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分

    vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

  9. Vue中computed分析

    Vue中computed分析 在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...

随机推荐

  1. htmilunit-- 针对抓取js生成的数据

    public static String  getHtml(String html){        // 模拟一个浏览器          @SuppressWarnings("resou ...

  2. SPOJ 10628 Count on a tree（Tarjan离线 | RMQ-ST在线求LCA+主席树求树上第K小）

    COT - Count on a tree #tree You are given a tree with N nodes.The tree nodes are numbered from 1 to  ...

  3. 练级（train）

    练级(train) 试题描述 cxm 在迷宫中练级.迷宫可以看成一个有向图,有向图的每个边上都有怪物.通过每条边并消灭怪物需要花费 \(1\) 单位时间.消灭一个怪物可以得到一定数量的经验值.怪物被消 ...

  4. [JSOI2012][bzoj4332] 分零食 [FFT]

    题面 传送门 思路 首先,这个数据如果没有这么大,我们还是可以做朋友的...... 设$dp\left[i\right]\left[j\right]$代表前j个零食分给了前i个人的方案数 那么dp方程 ...

  5. bzoj3680吊打GTY

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=3680 sol  :吊打出题人(逃~ puts("nan") 出题人题解:h ...

  6. IOS 滑动指示导航栏 渐变

    关于导航栏渐变,本人在写APP的时候,发现了各路大神各现其通,其实我觉得这个是个很简单的问题,不需要搞得那么麻烦,对个项目要求整齐来说,一般会建一个工具类,自定义View,各个同事需要的时候,直接调用 ...

  7. 弱题（bzoj 2510）

    Description 有M个球,一开始每个球均有一个初始标号,标号范围为1-N且为整数,标号为i的球有ai个,并保证Σai = M. 每次操作等概率取出一个球(即取出每个球的概率均为1/M),若这个 ...

  8. js81:Image对象，几张图像缓存完之后动画显示，form.elements[],document.images[]

    原文发布时间为:2008-11-09 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  9. WPF 自动选择dll,以SQLite为例

    在学习sqlite的过程中,发现它的dll是区分32位和64位的,起初觉得很恼火,但是仔细看了下, 发现让程序自行选择dll其实也不是一件很麻烦的事情,如下: 1>创建一个sqlite数据 2& ...

  10. angular 右击事件的写法

    .directive('ngRightClick', function ($parse){ return function (scope, element, attrs){ var fn = $par ...