Vue的watch和computed方法的使用及区别介绍


Posted in Javascript onSeptember 06, 2018

Vue的watch属性

Vue的watch属性可以用来监听data属性中数据的变化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstname" />
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:"#app",
        data:{
          firstname:"",
          lastname:""
        },
        methods:{},
        watch:{
          firstname:function(){
            console.log(this.firstname)
          }
        }
      })
    </script>
  </body>
</html>

可以从上述代码中实践得知,输入框内的值变化多少次,控制台就会打印多少次

同时还可以直接在监听的function中使用参数来获取新值与旧值

watch:{
          firstname:function(newValue,OldValue){
            console.log(newValue);
            console.log(OldValue);
          }
        }

其中第一个参数是新值,第二个参数是旧值

同时Watch还可以被用来监听路由router的变化,只是这里的监听的元素是固定的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style type="text/css">
    </style>
  </head>
  <body>
    
    <div id="app">
      <!--
        由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号
      -->
<!--      <a href="#/login" rel="external nofollow" >登录</a>
      <a href="#/register" rel="external nofollow" >注册</a>-->
      <router-link to="/login" tag="span">登录</router-link>
      <router-link to="/register">注册</router-link>
      <router-view></router-view>
    </div>
  </body>
  <script>
    var login={
      template:'<h1>登录组件</h1>'
    }
    var register={
      template:'<h1>注册组件</h1>'
    }
    var routerObj = new VueRouter({
      routes:[
      //此处的component只能使用组件对象,而不能使用注册的模板的名称
        {path:"/login",component:login},
        {path:"/register",component:register}
      ]
    })
    var vm = new Vue({
      el:'#app',
      data:{
      },
      methods:{
        
      },
      router:routerObj,//将路由规则对象注册到VM实例上
      watch:{
        '$route.path':function(newValue,OldValue){
            console.log(newValue);
            console.log(OldValue);
        }
      }
    })
  </script>
</html>

计算属性Computed的作用

computed属性的作用与watch类似,也可以监听属性的变化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="firstname" />
      <input type="text" v-model="lastname" />
      <input type="text" v-model="fullname" />
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:"#app",
        data:{
          firstname:"",
          lastname:""
        },
        methods:{},
/*       watch:{
          firstname:function(newValue,OldValue){
            console.log(newValue);
            console.log(OldValue);
          }
        }*/
        computed:{
          fullname:function(){
            return this.firstname +"-"+this.lastname
          }
        }
      })
    </script>
  </body>
</html>

只是他会根据他依赖的属性,生成一个属性,让vm对象可以使用这个属性

methods,watch,computed的区别

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

总结

以上所述是小编给大家介绍的Vue的watch和computed方法的使用及区别介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
js实现音乐播放控制条
Sep 09 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
Vue-component全局注册实例
Sep 06 #Javascript
Vue 监听列表item渲染事件方法
Sep 06 #Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 #Javascript
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 #Javascript
Vue中使用clipboard实现复制功能
Sep 05 #Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 #Javascript
You might like
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python列表list保留顺序去重的实例
2018/12/14 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python批量创建指定名称的文件夹
2019/03/21 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
工商管理本科毕业生求职信范文
2013/10/05 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
草船借箭教学反思
2014/02/03 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
飞越疯人院观后感
2015/06/09 职场文书
优秀大学生申请书
2019/06/24 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
react antd实现动态增减表单
2021/06/03 Javascript
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS