1. `computed`属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用，要return出去一个值；
2. `methods`方法表示一个具体的操作，主要书写业务逻辑；
3. `watch`一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是`computed`和`methods`的结合体，有newVal和oldVal两个参数；

三者比较：

相同点：都是一个function

不同点：

①computed要return出去一个值，watch不用

②methods里的function更侧重业务逻辑（大量）的处理，computed里的function不适合做大量业务逻辑

使用场景：

watch：适合监听一些虚拟的东西，如路由

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

  <script src="./lib/vue-router-3.0.1.js"></script>

</head>

<body>

  <div id="app">

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {

      template:'<h1>登录</h1>'

    }

    var register = {

      template:'<h1>注册</h1>'

    }

    var router = new VueRouter({

      routes:[

        { path:'/',redirect:'login' },

        { path:'/login',component:login },

        { path:'/register',component:register },

      ],

      linkActiveClass:'myactive'

    })

    var vm = new Vue({

      el:'#app',

      data:{},

      methods:{},

      router,

      watch:{

        //this.$route.path

        '$route.path':function(newval){

          console.log('ok')

          if(newval === '/login'){

            console.log('欢迎进入logon页面')

          }

          else if(newval === '/register'){

            console.log('欢迎进入register页面')

          }

        }

      }

    })

  </script>

</body>

</html>

methods：适合做一些方法的调用

computed：可能需要引用一些数据，经过一系列的操作返回一个新的数据

<!DOCTYPE html>

<html lang="en">

<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>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <input type="text" v-model="firstname"> +

    <input type="text" v-model="middlename"> +

    <input type="text" v-model="lastname"> =

    <input type="text" v-model="fullname">

    <p>{{ fullname }}</p>

    <p>{{ fullname }}</p>

    <p>{{ fullname }}</p>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        firstname: '',

        lastname: '',

        middlename: ''

      },

      methods: {},

      computed: { // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；

        // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；

        // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值

        // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；

        'fullname': function () {

          console.log('ok')

          return this.firstname + '-' + this.middlename + '-' + this.lastname

        }

      }

    });

  </script>

</body>

</html>

watch、computed、methods的区别的更多相关文章

  1. Vue.js中 computed 和 methods 的区别

    官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...

  2. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  3. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  4. vue中methods、computed、watch区别

    vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...

  5. Vue中computed的本质及与methods的区别

    一.computed的本质? computed为什么不像methods一样加小括号使用? 正常使用computed方式 运行结果 至于为什么computed为什么不像methods一样使用小括号调用, ...

  6. Vue 基础自查——watch、computed和methods的区别

    1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...

  7. computed、watch、methods的区别

    computed:计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代 ...

  8. Vue.js 计算属性computed和methods的区别

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

  9. Vue中 computed 和 methods的区别

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

随机推荐

  1. CityBuilder导入OSGB，生成3DML填坑

    工具:CityBuilder 问题1:导入osgb时,中文路径报错 当导入osgb layer时,Input folder和output foder 中最好不要出现中文 否则可能报出如下错误: 日志: ...

  2. java 读写操作大文件 BufferedReader和RandomAccessFile

    一 老问这问题,两个都答出来算加分项? 二 具体代码如下,没什么好说的直接说对比. BufferedReader和RandomAccessFile的区别RandomAccessFile 在数据越大,性 ...

  3. 深入理解JavaScript系列（10）：JavaScript核心（晋级高手必读篇）

    本篇是ECMA-262-3 in detail系列的一个概述(本人后续会翻译整理这些文章到本系列(第11-19章).每个章节都有一个更详细的内容链接,你可以继续读一下每个章节对应的详细内容链接进行更深 ...

  4. TD不换行 nowrap属性

    表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不太好看,我不喜欢这样的换行.当然可 ...

  5. Js COOkie 读取

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. C# 创建一个WCF服务

    做代码统计,方便以后使用: app.config配置文件设置: <configuration> <system.serviceModel> <bindings> & ...

  7. Java虚拟机之栈帧

    写在前面的话:Java虚拟机是一门学问,是众多Java大神们的杰作,由于我个人水平有限,精力有限,不能保证所有的东西都是正确的,这里内容都是经过深思熟虑的,部分引用原著的内容,讲的已经很好了,不在累述 ...

  8. 基于Ajax与用户认证系统的登录验证

    一.登录页面 from django.contrib import admin from django.urls import path from blog import views urlpatte ...

  9. YCRefreshView-自定义支持上拉加载更多，下拉刷新。。。

    自定义支持上拉加载更多,下拉刷新,支持自由切换状态[加载中,加载成功,加载失败,没网络等状态]的控件,拓展功能[支持长按拖拽,侧滑删除]可以选择性添加 .具体使用方法,可以直接参考demo. 轻量级侧 ...

  10. Java—集合框架Map

    Map接口 Map提供了一种映射关系,其中的元素是以键值对(key-value)的形式存储的,key和value可以是任意类型的对象,能够实现根据key快速查找value. Map中的键值对以Entr ...