watch和computed均可以监控程序员想要监控的对象，当这些对象发生改变之后，可以触发回调函数做一些逻辑处理

watch监控自身属性变化

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  </head>

  <body>

    <div id="app">

      <input type="text" v-model="firstName" />

      <input type="text" v-model="lastName" /> 
      {{fullName}}

    </div>

    <script>

      new Vue({

        el: '#app',

        data: {

          firstName: 'hello',

          lastName: 'vue',

          fullName: 'hello.ve'

        },

        watch: {

          'firstName': function(newval, oldval) {

            // console.log(newval,oldval);

            this.fullName = this.firstName + this.lastName;

          },

          'lastName': function(newval, oldval) {

            // console.log(newval,oldval);

            this.fullName = this.firstName + this.lastName;

          }

        }

      });

    </script>

  </body>

</html>

watch监控路由对象

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

  </head>

  <body>

    <div id="app">

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

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

      <!--组件的显示占位域-->

      <router-view></router-view>

    </div>

    <script>

      //1.0 准备组件

      var App = Vue.extend({});

      var login = Vue.extend({

        template: '<div><h3>登录</h3></div>'

      });

      var register = Vue.extend({

        template: '<div><h3>注册{{name}}</h3></div>',

        data: function() {

          return {

            name: ''

          }

        },

        created: function() {

          this.name = this.$route.params.name;

        }

      });

      //2.0 实例化路由规则对象

      var router = new VueRouter({

        routes: [{

            path: '/login',

            component: login

          },

          {

            path: '/register/:name',

            component: register

          },

          {

            path: '/',

            //当路径为/时，重定向到/login

            redirect: '/login'

          }

        ]

      });

      //3.0 开启路由对象

      new Vue({

        el: '#app',

        router: router, //开启路由对象

        watch: {

          '$route': function(newroute, oldroute) {

            console.log(newroute, oldroute);

            //可以在这个函数中获取到当前的路由规则字符串是什么

            //那么就可以针对一些特定的页面做一些特定的处理

          }

        }

      })

    </script>

  </body>

</html>

计算属性computed的特点

  • 计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性；
  • 如果他所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么性能要高一些，所以vue中尽可能使用computed替代watch。

案例演示

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

  </head>

  <body>

    <div id="app">

      <input type="text" v-model="firstName" />

      <input type="text" v-model="lastName" />

      {{fullName}}

    </div>

    <script>

      new Vue({

        el: '#app',

        data: {

          firstName: 'hello',

          lastName: 'vue'

        },

        computed: {

          fullName: function() {

            return this.firstName + this.lastName;

          }

        }

      });

    </script>

  </body>

</html>

vue2.0中的watch和计算属性computed的更多相关文章

  1. 007——VUE中非常使用的计算属性computed实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于vue2.0原理-自己实现MVVM框架之computed计算属性

    基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...

  3. Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  4. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  5. vue2.0中使用less

    第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...

  6. vue2.0中使用sass

    第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...

  7. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  8. vue2.0中router-link详解

    vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...

  9. Vue2.0 【第三季】第2节 computed Option 计算选项

    目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...

随机推荐

  1. mysql里面 limit的奇效

    项目里面有遇到一个需求,查询一个表,先group by ,再按group 的count(*)进行倒序,取出每个group里面发表时间最新的一个纪录,之前的同事SQL是这样写的 SELECT * FRO ...

  2. C#之集合

    数组(http://www.cnblogs.com/afei-24/p/6738128.html)的大小是固定的.如果元素的个数是动态的,就应使用集合类. 列表(http://www.cnblogs. ...

  3. pipenv 虚拟环境新玩法

    首先,虚拟环境本质是一个文件,是为了适应不同的项目而存在.pipenv相当于virtualenv和pip的合体. pipenv主要有以下特性: (1)pipenv集成了pip,virtualenv两者 ...

  4. SpringCloud---消息驱动的微服务---Spring Cloud Stream

    1.概述 1.1 Spring Cloud Stream:用来   为微服务应用   构建   消息驱动能力的框架: 可基于SpringBoot来创建独立.可用于生产的Spring应用程序: 使用Sp ...

  5. Android Notification 的四种使用方式

    实现通知步骤 一般实现通知需要如下步骤: 1.获取 NotificationManager 实例管理通知: 2.实例 Notification 对象: 3.管理事件 Intent: 4.发送通知. 注 ...

  6. spring cloud知识点

    eureka注册中心(zookeeper,eureka) 也要集群,可以相互注册,网状结构.后面很多高可用的服务都是用这种方式.Eureka的客户端缓存技术 spring boot actuator ...

  7. uvm_cmdline_processor

    无意中看到uvm_cmdline_processor,之前使用+UVM_TESTNAME也没深究,现在记录一下 内部调用脚本中的参数,通过使用uvm_cmdline_processor可以从脚本层级, ...

  8. vim安装与配置

    vim 8.0 安装 git clone https://github.com/vim/vim.git sudo apt-get install libncurses5-dev  # vim依赖一个n ...

  9. HttpSessionListener

    1 知识点

  10. HTML5在线状态检测和DOM Storage

    除了离线资源缓存外,html5离线应用开发还可能用到以下技术 在线状态检测 navigator.onLine navigator.onLine 属性表示当前是否在线.如果为 true, 表示在线:如果 ...