Vue关于watch、computed与methods

最新推荐文章于 2022-08-03 21:14:23 发布

hh湫丶

最新推荐文章于 2022-08-03 21:14:23 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/lovezhuer1/article/details/103475452

版权

在做项目的时候，我们会需要监听数据的变化，从而做一些相应的操作。通过使用watch、computed与methods可以实现此目的。

methods

<div id="app">
        <input type="text" v-model="firstname" @keyup="getFullname"> +
        <input type="text" v-model="lastname" @keyup="getFullname"> =
        <input type="text" v-model="fullname"> 
</div>

 <script>
     var vm = new Vue({
         el: '#app',
         data: {
             firstname : '',
             lastname : '',
             fullname : ''
         },
         methods: {
             getFullname(){
                 this.fullname = this.firstname + '-' + this.lastname
             },
         }
     });
 </script>

通过keyup事件来监听数据的变化，效果如下图：
在这里插入图片描述

watch

使用watch可以监视data中指定数据的变化，然后触发这个 watch 中对应的function处理函数

<div id="app">
        <input type="text" v-model="firstname"> +
        <input type="text" v-model="lastname"> =
        <input type="text" v-model="fullname"> 
  </div>

  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              firstname : '',
              lastname : '',
              fullname : ''
          },
          methods: {
          
          },
          watch : { 
              'firstname' : function(newVal,oldVal){
	              //function可带两个参数，newVal是更新后的数据，oldVal是更新前的数据
                  console.log(newVal,oldVal)
                  
                  this.fullname = newVal + '-' + this.lastname
              },
              'lastname' : function(newVal){
                  this.fullname = this.firstname + '-' + newVal
              }
          }
      });
  </script>

效果如下：
在这里插入图片描述

computed

计算属性的本质是一个方法，只不过在使用计算属性时，把它们的名称直接当作属性来使用的，并不会把计算属性当作方法去调用。
注意：
只要计算属性这个function内部，所要用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值。
计算属性的求值结果会被缓存，方便下次直接使用；如果任何数据都没有发生变化，则不会重新求值。

<div id="app">
        <input type="text" v-model="firstname"> +
        <input type="text" v-model="lastname"> =
        <input type="text" v-model="fullname"> 

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

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstname : '',
                lastname : '',
            },
            methods: {
                
            }，
            computed : {
                'fullname' : function(){
                    console.log('ok')
                    return this.firstname + '-' + this.lastname
                }
            }
        });
    </script>

在这里插入图片描述
当firstname只改变了一次的时候，四个fullname的值随之改变，因为求值的结果会被缓存，其余三个fullname不会重新求值，因此此时控制台只打印出一个ok。效果如下图：

watch监听路由对象

<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>router</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./to/vue-router.js"></script>
    <style>
    	/*动效*/
        .router-link-active,
        .myActive{
            color: pink;
            font-weight: 600;
            font-style: italic;
            font-size: 30px;
            text-decoration: underline;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(140px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.4s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- router-link默认渲染为一个a标签 -->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="/register">注册</router-link>

        <!-- 这是vue-router提供的，路由规则匹配到的组件，就会展示在router-view中-->
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
        
    </div>

    <script>
        var login = {
            template:'<h1>登录组件</h1>'
        }
        var register = {
            template:'<h1>注册组件</h1>'
        }

        //创建一个路由对象
        var routerObj = new VueRouter({
            routes:[ //路由匹配规则
                // {
                //     path : '/',
                //     component : login
                // },
                {
                    path : '/',
                    redirect : '/login'
                },
                {
                    path : '/login',
                    component : login
                },
                {
                    path : '/register',
                    component : register
                }
            ],
            linkActiveClass : 'myActive'
        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router : routerObj, //将路由规则对象，监听到vm实例上
            watch : {
                //this.$route.path
                '$route.path' : function(newVal,oldVal){
                    //console.log(newVal+'-----'+oldVal);
                    if(newVal === '/login'){
                        console.log('欢迎进入登录界面')
                    }else if(newVal === '/register'){
                        console.log('欢迎进入注册界面')
                    }
                }
            }
        });
    </script>
</body>

当点击登录时，打印出“欢迎进入登录界面”
在这里插入图片描述
当点击注册时，打印出“欢迎进入注册界面”

watch、computed与methods的对比

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

computed和methods区别

1.computed属性的方法可以作为属性变量，methods只能被调用
2.computed属性的方法计算值有缓存作用，再次使用不会被计算（直接使用）
computed 和 watch 的区别和运用的场景

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。