Vue2中的computed计算属性和watch监听属性

一、computed计算属性

computed 计算属性允许我们基于其他数据的值动态计算出属性的值，并且具有缓存特性，只有依赖的数据发生变化时才会重新计算。下面是 computed 的基本用法和特性：

• 基本用法： 在Vue组件的选项中使用 computed 字段定义计算属性，它是一个返回对象的函数，对象的键计算属性的名称，值是计算属性的计算逻辑。
• 缓存特性： 计算属性的值会被缓存起来，只有在依赖的响应式数据发生改变时才会重新计算。
• Getter和Setter： 可以通过定义 get 和 set 方法来自定义计算属性的读取和设置行为，使其具有更多的灵活性。
  下面是一个使用 computed 的示例：

data() {
    return {
        radius: 5
    };
},
computed: {
    area: {
        get() {
            return Math.PI * Math.pow(this.radius, 2);
        },
        set(newValue) {
            this.radius = Math.sqrt(newValue / Math.PI);
        }
    }
}

在上面的示例中，我们定义了一个计算属性 area，它依赖于 radius 数据，并根据该数据计算圆的面积。同时，我们定义了 get 方法用于计算属性的获取，以及 set 方法用于计算属性的设置。

2. watch监听属性

watch 监听属性允许我们监听指定数据的变化，并在数据变化时执行相应的回调函数。下面是 watch 的基本用法和特性：

• 基本用法： 在Vue组件的选项中使用 watch 字段定义监听属性，它是一个对象，对象的键是要监听的数据的名称，值是对应的回调函数。
• 深度监听： 通过设置 deep: true 可以实现对对象或数组的深度监听，当对象内部的数据发生变化时也会被监听到。
• 立即触发： 通过设置 immediate: true 可以在监听开始时立即触发回调函数。
  下面是一个使用 watch 的示例：

data() {
    return {
        counter: 0
    };
},
watch: {
    counter: {
        handler(newValue, oldValue) {
            console.log('counter 变化了：', newValue, oldValue);
        },
        immediate: true
    }
}

在上面的示例中，我们监听了 counter 属性的变化，并定义了 handler 方法作为回调函数。同时，我们设置了 immediate: true，使得在监听开始时立即触发回调函数。

3. 小结

    // watch监听属性
    // 规则
    // 1.监听已有的属性
    // 2.immediate设置为true默认触发一次，false不会默认触发
    // 3.handler(新值,旧值)函数，当监听值发生改变时就会触发handler函数
    // 4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})
    // 5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true
    // 6.简写，只有handler函数，才可以简写。写法：监听的属性名(新值,旧值){}

// computed与watch
// 1.computed能做到的watch都可以，watch能做到的computed不一定能
// 2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，
- [x] 打卡4.07