Vue - watch ，methods， computed 区别

最新推荐文章于 2020-12-09 18:54:02 发布

只想当米虫

最新推荐文章于 2020-12-09 18:54:02 发布

阅读量137

点赞数 1

本文链接：https://blog.csdn.net/qq_44352182/article/details/89712145

版权

watch ，methods， computed 区别

watch,methods,computed 是什么？

computed ：属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用，

methods ：方法表示一个具体的操作，主要写业务逻辑

watch ：一个对象，键时需要观察的表达式，值时对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看做是computed和methods的结合体

区别：

1.watch和methods 不需要return ，计算属性（computed）需要 return
2.methods 里面可以写大量的业务逻辑，computed 不适合写大量业务逻辑

案例：

1. Watch -监听路由
watch - 适合监听一些虚拟的数据，比如路由地址的变化

<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'//和激活相关的类
    })
        new Vue({
        el:'#app',
        router,
        watch:{
            '$route.path':function(newV,oldV){
            if(newV==='/login'){
                console.log('欢迎进入登录界面');              
            }else if(newV==='/register'){
                console.log('欢迎进入注册页面');
            }
            }
        }
    })
    </script>
</body>

上面的代码监听了路由的变化

2. computed - 名称案例

computed - 监听一些数据，通过复杂的计算返回

    <div id="app">
        <!-- 分析：
          我们要监听到文本框数据的改变，这样才能知道 什么时候去拼接 出一个fullname -->
          <!-- keyup 键盘事件 -->
        <input type="text" v-model="firstname">+
        <input type="text" v-model="midename">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">
    </div>
    <script>
        new Vue({
        el:'#app',
        data(){
            return{
                firstname:'',
                midename:'',
                lastname:'',
            }
        },
       computed:{
           'fullname':function(){
               console.log('ok');
               
               return this.firstname+this.lastname
           }
       }
    })
    </script>

注意：1.计算属性，在引用的是时候，一定不要加（）去调用，直接把它当作普通属性去使用就好了
注意2：只要计算属性，这个function内部，所用到的任何data中的数据发生了改变，就坏立即重新计算，这个计算属性的值
注意3：计算属性的求值结果，会缓存起来，方便下次直接使用，如果计算属性方法中，所有来的数据，都没有发生变化，则不会重新对计算属性重新赋值