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. HTML连载48-清除浮动的其中两种方式

    一.清除浮动的方式一 给前面一个父元素设置高度,​注意:企业开发中能不写高度就不写高度 <!DOCTYPE html> <html lang="en"> & ...

  2. UmiJS 目录及约定

    在文件和目录的组织上,umi 更倾向于选择约定的方式. 一个复杂应用的目录结构如下: . ├── dist/ // 默认的 build 输出目录 ├── mock/ // mock 文件所在目录,基于 ...

  3. Django日志记录详细的报错信息

    当服务器500错误的时候,普通日志只会记录一行500的request信息,并不会记录详细的报错定位 [ERROR] 2019-06-12 15:07:03,597 "GET /api/v1/ ...

  4. -ffast-math编译选项作用

    https://stackoverflow.com/questions/7420665/what-does-gccs-ffast-math-actually-do

  5. DVR登录绕过漏洞_CVE-2018-9995漏洞复现

    DVR登录绕过漏洞_CVE-2018-9995漏洞复现 一.漏洞描述 此漏洞允许攻击者通过修改”Cookie:uid=admin”之后访问特定DVR的控制面板,返回此设备的明文管理员凭证. 二.影响软 ...

  6. .net core使用NLog日志

    前言:NLog日志对.net core web项目最新的支持在官网上有最新的介绍: 官网介绍地址:https://github.com/NLog/NLog/wiki/Getting-started-w ...

  7. centos 7 搭建vsftp

    一.FTP简介 1.ftp 概述                                                FTP:(file  transfer  protocol文件传输协议) ...

  8. android studio 菜单中的app运行按钮上有个叉号，原因与解决办法（自己去百度）

    http://blog.csdn.net/sz0268/article/details/51706397 : 在Android studio写代码中,直接建立项目,写代码然后运行是不会一般是不会出现这 ...

  9. 开源项目Telegram源码 Telegram for Android Source

    背景介绍 Telegram 是一款跨平台的即时通信软件,它的客户端是自由及开放源代码软件.用户可以相互交换加密与自毁消息,发送照片.影片等所有类型文件.官方提供手机版.桌面版和网页版等多种平台客户端. ...

  10. Springboot中定时器的简单使用

    在定时器的类上添加注解: @Component@EnableAsync@EnableScheduling 一.普通的定时器: 每天15:10执行的定时器 @Scheduled(cron="0 ...