Vue Computed中get 和set的了解以及Computed与watch的区别

目录

vue的computed方法

get

set

computed中get和set的栗子（引用官网）

可以看打印结果

watch 方法

 computed与watch的区别

computed与watch的不同点

触发条件不同

执行速度不同

使用方式不同

相同点

项目中的使用总结

---

vue的computed方法

vue.js 的 computed 方法：
计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会重新求值。

用 methods 也可以实现同样的效果，但 methods 在重新渲染的时候会重新调用执行，在性能上 computed 优于 methods，当不需要缓存时可用 methods。

computed回调函数域中的回调函数方法可以在插值表达式{ {}}中直接获取返回结果而无需在data数据域中定义相关的属性，这一点相较于watch中而言使用起来也更方便些。

get

一般情况下，我们只是使用了computer中的gettter属性，默认只有 getter，我们只是单纯的使用了gettter属性。

set

只有当computed监测的值变化的时候，set才回被调用。

computed中get和set的栗子（引用官网）

        var vm = new Vue({
        data: { a: 1 },
        computed: {
            // 仅读取
            aDouble: function () {
            return this.a * 2
            },
            // 读取和设置
            aPlus: {
                // 页面初始化时会先执行一次 get 好比与computed的getter属性
                // 监视 data 中 a 的属性值，只有发生改变时，它们才会重新求值，否则取缓存中的
            get: function () {      
                console.log('调用了getter属性')
                return this.a + 1
            },
            // 监视当前属性值的变化，当属性值发生变化时执行，
            // 更新相关的属性数据，类似于 watch 的功能
            set: function (newValue) {
            console.log('调用了settter属性')
            console.log(newValue,'newValue');
                    this.a = newValue - 1
                }
            }
        }
        })
        vm.aPlus   // => 2
        console.log(vm.aPlus,'第一次执行的vm.aPlus'