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. 程序员，你还不会合理选择Filter、Interceptor、Aspect？

    小伙伴们应该听说过过滤器.拦截器.切面,印象上都能够起到截断拦截的作用,在做一些业务需求时,不知道如何选择,今天老顾就来介绍一下他们之间的区别. 过滤器可以拦截到方法的请求和响应 (ServletRe ...

  2. IT兄弟连 HTML5教程 HTML5行业的发展预测

    现在的互联网市场上,HTML5在快速地成长,甚至是未来几年里将会有很多公司进入HTML5这个领域,HTML5也会像传统的Flex,Flash,Silverlight和Objective-C那样,更容易 ...

  3. ExtJS布局控件

    Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...

  4. 【shell脚本语法】判断、流程控制语句

    目录 判断用户参数 流程控制语句 一.判断用户参数 1.1 文件判断参数 PS:$?代表上一个命令的返回值,为0表示正确执行,非0表示错误执行.详情可参考我另一篇博客:https://www.cnbl ...

  5. 二、Mapper映射文件

    Mapper映射文件 mapper.xml映射文件主要是用来编写SQL语句的,以及一些结果集的映射关系的编写,还有就是缓存的一些配置等等. 在映射文件里面可以配置以下标签: 元素名称 描述 备注 se ...

  6. 【学习笔记】动态规划—各种 DP 优化

    [学习笔记]动态规划-各种 DP 优化 [大前言] 个人认为贪心,\(dp\) 是最难的,每次遇到题完全不知道该怎么办,看了题解后又瞬间恍然大悟(TAT).这篇文章也是花了我差不多一个月时间才全部完成 ...

  7. pandas 学习 第1篇：pandas基础 - 数据结构和数据类型

    pandas是基于NumPy构建的模块,含有使数据分析更快更简单的操作工具和数据结构,是数据分析必不可少的五个包之一.pandas包含序列Series和数据框DataFrame两种最主要数据结构,索引 ...

  8. log4net快速上手

    原文地址:https://www.cnblogs.com/lsgsanxiao/p/5845300.html 略有删改 1.配置文件,可以单独创建log4net.config文件,然后手动指定目录,也 ...

  9. Spring Boot快速集成kaptcha生成验证码

    Kaptcha是一个非常实用的验证码生成工具,可以通过配置生成多样化的验证码,以图片的形式显示,从而无法进行复制粘贴:下面将详细介绍下Spring Boot快速集成kaptcha生成验证码的过程. 本 ...

  10. PHP面试题2019年京东工程师面试题及答案解析

    一.单选题(共28题,每题5分) 1.Apache与Nginx大访问下性能描述正确的是? A.Apache所采用的epoll网络I/O模型非常高效 B.Nginx使用了最新的kqueue和select ...