methods,watch和computed都是以函数为基础的，但各自却都不同；

1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。
  而不像watch和computed那样，“自动执行”预先定义的函数

3.computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ，而 methods 内的方法则不会；

【总结】：methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用

从性质上看：

1.methods里面定义的是函数，methods是方法，只要调用它，函数就会执行；

2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）,

<p>原始数据：{{msg}}</p>

<p>改变后的数据：{{changemsg}}</p>  

var vm=new Vue({

el:"#example",

data:{

 msg:"hello",

},

computed:{  //计算属性

    changemsg:function(){

    return this.msg.split("").reverse().join("");

    },

}

你在取用的时候，用this.changemsg去取用，就和取data一样（不要当成函数调用！！）

computed属性  VS watched 属性：

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

watched属性：代码更易于理解，它指定监测的值是谁，然后相应的改变其他的值。

var vm = new Vue({

el: '#demo',

data: {

    firstName: 'Foo',

    lastName: 'Bar',

    fullName: 'Foo Bar'

   },

watch: {

    firstName: function (val) {

        this.fullName = val + ' ' + this.lastName

    },

    lastName: function (val) {

        this.fullName = this.firstName + ' ' + val

    }

   }

})

computed属性：

var vm = new Vue({

       el: '#demo',

     data: {

           firstName: 'Foo',

           lastName: 'Bar'

   },

 computed: {

       fullName: function () {

           return this.firstName + ' ' + this.lastName

       }

   }

})

需要注意的是，

methods调用的方法是没有缓存，

computed调用的方法是有缓存，如果之前调用过，则直接返回结果而不是重复计算

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <div>

        {{ message.split('').reverse().join('') }}

    </div>

    <h2>计算属性</h2>

    <div>

        <p>Original message: "{{ message }}"</p>

        <p>Computed reversed message: "{{ reversedMessage }}"</p>

        <button @click="change()">改变</button>

    </div>

    <h2>计算属性缓存 vs 方法</h2>

    <p>Computed reversed message: "{{ reversedMessage }}"</p>

    <p>Computed reversed message: "{{ reversedMessage }}"</p>

    <p>Reversed message: "{{ reversedMessage2() }}"</p>

    <p>Reversed message: "{{ reversedMessage2() }}"</p>

</div>

<script type="text/javascript" src="js/vue2.6.js"></script>

<script type="text/javascript">

    let count=1;

    let vm=new Vue({

        el:'#app',

        data:{

            message: 'Hello'

        },

        computed:{

            // 计算属性的 getter

            reversedMessage(){

                count++;

                // `this` 指向 vm 实例

                return count+''+this.message.split('').reverse().join('')

            }

        },

        methods:{

            change(){

                this.message="fdafdafsda";

            },

            reversedMessage2() {

                count++;

                return count+''+this.message.split('').reverse().join('')

            }

        }

    })

</script>

</body>

</html>

原文出处：

https://my.oschina.net/u/3649083/blog/1560106

http://blog.java1234.com/blog/articles/533.html

谈谈vue.js中methods watch和compute的区别和联系的更多相关文章

  1. 深入解析Vue.js中v-bind v-model的使用和区别

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据 ...

  2. vue.js中的computed和watch的区别

    1.computed在调用时不需要加(),watch是不需要调用的2.computed如果属性没有发生改变时会从缓存中读取值,watch当属性发生改变时会接收到2个值:一个为新值,一个为旧值3.com ...

  3. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  4. 谈谈Vue.js——vue-resource全攻略

    本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧   概述 上一篇我们介绍了如何将$.ajax和Vue. ...

  5. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  6. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  7. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  8. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  9. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

随机推荐

  1. 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 8

    18.6.4  执行准备好的查询 当准备好查询并绑定了相应的参数后,就可以通过调用PDOStatement类对象中的execute()方法,反复执行在数据库缓存区准备好的语句了.在下面的示例中,向前面 ...

  2. JAVA 网络编程 - 实现 群聊 程序

    在实现 这个 程序之前, 我们 需要 了解 一些 关于 Java 网络 编程 的 知识. 基本 的 网络知识: 网络模型 OSI (Open System Interconnection 开放系统互连 ...

  3. [LeetCode#184]Department Highest Salary

    The Employee table holds all employees. Every employee has an Id, a salary, and there is also a colu ...

  4. 不知道怎么向女神表白？Python三大神技分分钟带你成功逆袭！

    一行python的表白 首先祭出绝招,用1行python表白: print(' '.join([''.join([('I LOVE U'[(x-y) % 8] if ( (x*0.05)**2 + ( ...

  5. 怎么在CAD中测量图纸距离？来看看这两种方法

    在CAD中设计图纸最重要的就是图纸的尺寸,俗话说也就是图纸间的距离.通过正确的数据设计出的图纸才能够准确,也能够避免施工时事不必要的误差.那怎么在CAD中测量图纸距离呢?具体要怎么来进行操作呢?下面我 ...

  6. Docker基础概念与安装

    Docker是什么? Docker最初是dotCloud公司的创始人Solomon Hyks在法国期间发起的一个公司内部项目,它是基于dotCloud公司多年云服务技术的一次革新,并于2013年3月以 ...

  7. 关于es6及以上的js编译成es5

    问题:es6及以上版本在IE浏览器上不能执行起来,但Chrome浏览器上轻松运行,解决兼容IE的问题就需要使用babel:这个可以去babel的官网去查看; 关于babel的简单使用,有两种方式: 1 ...

  8. rsync 未授权访问漏洞

    rsync rsync,remote synchronize顾名思意就知道它是一款实现远程同步功能的软件,它在同步文件的同时,可以保持原来文件的权限.时间.软硬链接等附加信息. rsync是用 &qu ...

  9. mssql sqlserver 数据类型sql_variant简介说明

    转自: http://www.maomao365.com/?p=9712  摘要: 下文讲述sqlserver中sql_variant数据类型定义.赋值.应用的相关说明,如下所示: 实验环境:sql ...

  10. mmap - 内存映射文件 - 减少一次内核空间内数据向用户空间数据拷贝的操作

    关于mmap 网上有很多有用的文章,我这里主要记录,日常使用到mmap时的理解: https://www.cnblogs.com/huxiao-tee/p/4660352.html 测试代码: htt ...