脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue computed和watch

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

 更新时间：2018年09月06日 09:25:29   作者：镇  
Vue的watch属性可以用来监听data属性中数据的变化。这篇文章主要介绍了Vue的watch和computed方法的使用及区别,需要的朋友可以参考下

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方法的使用及区别介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 基于Vue + Axios实现全局Loading自动显示关闭效果

    基于Vue + Axios实现全局Loading自动显示关闭效果

    在vue项目中,我们通常会使用Axios来与后台进行数据交互,而当我们发起请求时,常常需要在页面上显示一个加载框（Loading）,然后等数据返回后自动将其隐藏,本文介绍了基于Vue + Axios实现全局Loading自动显示关闭效果,需要的朋友可以参考下
    2024-03-03
  • vue3 axios安装及使用示例详解

    vue3 axios安装及使用示例详解

    这篇文章主要介绍了vue3 axios安装及使用示例代码,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • Vue打包路径配置过程

    Vue打包路径配置过程

    这篇文章主要介绍了Vue打包路径配置过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • Element-plus使用中遇到的问题小结

    Element-plus使用中遇到的问题小结

    表格数据是websocket通信获取的数据,首次获取20条数据,以后新增订阅获取一条,新增一条则向上滑动显示最新数据,本文给大家介绍Element-plus使用中遇到的问题小结,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • vue 实现LED数字时钟效果（开箱即用）

    vue 实现LED数字时钟效果（开箱即用）

    这篇文章主要介绍了vue 实现LED数字时钟效果（开箱即用）,每一个数字由七个元素构成，即每一个segment元素，本文给大家分享实现实例，感兴趣的朋友一起看看吧
    2019-12-12
  • Vue.js项目中管理每个页面的头部标签的两种方法

    Vue.js项目中管理每个页面的头部标签的两种方法

    这篇文章主要介绍了Vue.js项目中管理每个页面的头部标签的两种方法,需要的朋友可以参考下
    2018-06-06
  • Vue.extend 编程式插入组件的实现

    Vue.extend 编程式插入组件的实现

    这篇文章主要介绍了Vue.extend 编程式插入组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue 注释template中组件的属性说明

    vue 注释template中组件的属性说明

    这篇文章主要介绍了vue 注释template中组件的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

    Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

    最近小编接到这样的需求：弹出框（或Popover）在 show 后，点击空白处可以将其 hide。针对这个需求，小编整理了三种实现方式，如果大家对vue 点击空白隐藏节点问题感兴趣的朋友跟随小编一起看看吧
    2019-10-10
  • 源码分析Vue3响应式核心之effect

    源码分析Vue3响应式核心之effect

    这篇文章主要为大家详细介绍了Vue3响应式核心之effect的相关知识，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下
    2023-04-04

最新评论