Skip to content

computed 与 watch

  • computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容。
  • watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

使用场景

  • 需要依赖别的属性来动态获得值的时候可以使用 computed
  • 对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch

对象写法

computed

vue
<script>
export default{
    data(){
        return {
            num:1
        }
    },
    computed:{
        doubleNum:{
            get(){
                return this.num*2
            },
            set(v){
                this.num = ~~(v/2)
            }
        }
    }
}
</script>
<script>
export default{
    data(){
        return {
            num:1
        }
    },
    computed:{
        doubleNum:{
            get(){
                return this.num*2
            },
            set(v){
                this.num = ~~(v/2)
            }
        }
    }
}
</script>

watch

vue
<script>
export default{
    data(){
        return {
            num:1
        }
    },
    watch:{
        num:{
            // 深度遍历
            deep: true,
            // 立即触发
            immediate: true,
            // 执行的函数
            handler(val, oldVal) {
                console.log(v,oldVal)
            }
        }
    }
}
</script>
<script>
export default{
    data(){
        return {
            num:1
        }
    },
    watch:{
        num:{
            // 深度遍历
            deep: true,
            // 立即触发
            immediate: true,
            // 执行的函数
            handler(val, oldVal) {
                console.log(v,oldVal)
            }
        }
    }
}
</script>