computed和watch的用法和区别

简介: computed和watch的用法和区别

computed可以监听v-model(data)中的值,只要值发生变化 他就会重新去计算


computed必须是要有一个返回值的哦  


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


<div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lasttname">=
        <input type="text" v-model="fullname">
    </div>
var vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lasttname: "",
            },
            methods: {
            },
             // computed可以监听v-model(data)中的值,只要值发生变化 他就会重新去计算
             // computed必须是要有一个返回值的哦 
            computed: {
                fullname: function () {
                    return this.firstname + "-" + this.lasttname
                }
            },
        })


//watch除了可以监听data中值的变化,还可以监听路由的变化,


//watch中有两个参数 分别是新值和旧值


 var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
            },
            router: router,
            watch: {
                "$route.path":function(newval,oldval){
                if(newval==="/login"){
                    console.log("这是denglu页面")
                }else if(newval==="/zhuce"){
                    console.log("这是注册页面")
                }
                }
            },
        })


computed和watch的区别



《1》计算属性computed 必须要返回一个值哦 通过return来返回的

        会缓存,只要数据不发生变化,就使用缓存的数据

 

《2》 watch的回调函数里面有两个参数,分别是newval和oldval。

        不会缓存 只要数据发生变化 就会重新的去计算



相关文章
|
1月前
|
缓存 JavaScript 数据处理
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
36 0
|
10月前
|
缓存
computed【计算属性】watch【监听】methods【方法】的区别
computed【计算属性】watch【监听】methods【方法】的区别
|
1月前
|
缓存 JavaScript 前端开发
Vue的计算属性和侦听器:computed和watch的使用
【4月更文挑战第24天】Vue.js框架中的计算属性和侦听器是处理数据变化的关键特性。计算属性(computed)基于依赖缓存,仅在相关数据改变时重新计算,适合处理复杂逻辑。例如,计算总价可基于价格和数量动态更新。而侦听器(watch)在数据变化时执行回调,适用于异步操作和开销大的任务。计算属性与侦听器的主要区别在于缓存机制和应用场景,前者用于同步计算,后者用于响应数据变化后的特殊操作。理解这两者有助于优化Vue应用的性能。
|
1月前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
1月前
|
JavaScript
Vue中$watch()方法和watch属性的区别
Vue中$watch()方法和watch属性的区别
46 1
|
1月前
|
缓存 监控 JavaScript
methods、computed、watch它们的差异与区别
在Vue中,Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。
59 0
|
1月前
|
缓存 JavaScript 前端开发
前端面试怎么总问watch和computed区别
前端面试怎么总问watch和computed区别
|
1月前
|
JavaScript
vue中watch属性的用法
vue中watch属性的用法
21 0
|
1月前
|
JavaScript
vue3 ref和reactive使用watch属性的方法和区别
vue3 ref和reactive使用watch属性的方法和区别
36 0
|
JavaScript API
一文搞懂Vue3中watch和watchEffect区别和用法!
前言 使用过 Vue 的小伙伴,不管时 Vue2 还是 Vue3,我相信你都用过 Vue 中的监听器。监听器的作用就和它的名字一样:用来监听某个东西是否发生变化!我们很多需求都会用到监听器 watch,但是 Vue2 和 Vue3 中的监听器的用法有些许不一样,这就让一些从 Vue2 转 Vue3 的小伙伴不太适应,所以,我们今天就来好好学一学 Vue3 中的监听器如何使用!
1570 0
一文搞懂Vue3中watch和watchEffect区别和用法!

热门文章

最新文章