computed和watch

computed

在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了（一对多），才会重新计算当前计算属性的值。

watch

是属性监听器，一般用来监听属性的变化,并做一些操作

<div>
    <button @click="ClickName"></button>
</div>
<script>
    var vm = new Vue({
        data: function () {
            return {
                firstName: 'lu',
                lastName: '小鹿'
            }
        },
        methods: {
            ClickName() {
                this.fullName = "新的fullName"
            }
        },
        // computed
        computed: {
            getName() {
                return this.firstName + "+" + this.lastName  // 默认只有gettter属性
            },
            fullName: {
                get() {
                    return this.firstName + this.lastName
                },
         // 只有当computed监测的fullName值变化的时候 set才回被调用
                set(newValue) {
                    // newValue是"lu小鹿"
                    const names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                },
                deep: true, // 深度监听对象变化时执行的逻辑
                immediate: true // 初始化时立即执行一次回调
            }
        },

        // watch
        watch: {
            getName(newValue, oldVal) {
            },
            // 深度监听
            getName2: {
                handler(newValue, oldVal) {
                    this.fullName = newValue
                },
                deep: true,
                immediate: true
            },


            // 案例使用
            '$route.path': function (newValue, oldValue) {
                if (newValue == "/login") {
                    console.log('进入登录页面')
                } else if (newValue == '/') {
                    console.log("/")
                }
            }
        }

    })
</script>

上面的例子会觉得好像computed的setter属性与watch的功能有点类似；它并不能完全替代 watch 的作用。watch 提供了更广泛和灵活的数据变化响应机制，适用于更复杂的数据处理逻辑和异步操作；用 computed 的 setter 适合当你需要确保某个值在修改时满足特定条件或触发某些操作，但它并不适合用来执行异步操作或复杂逻辑，因为 setter 函数应该尽量保持简单和快速。