（三）computed和watch区别

// 这里使用的是vue2的写法，后面时使用组合式api了就使用vue3的写法
methods: {
    方法名(调用时候可以传递参数) {
        业务逻辑
    }
}

// 一般需求都是使用简写方式，方法写法，就是使用 get 只读取数据
computed: {
    方法名直接在模板页面使用() {
        return 业务逻辑
    }
}

// 第二种写法是，对象写法，可以使用 get 和 set 方法
computed: {
    方法名直接在模板页面使用: {
        get() {
            return 业务逻辑
        },

        // 接受一个参数
        set(value) {
            当有操作修改了当前的这个方法属性机会触发这个函数
            vlaue指的是是该过后的值
        }
    }
}

// watch 基本写法 只能读取到最外层的属性
watch: {
    监听的data当中的数据(newVal, oldVal) {
        没有返回值
        耗时的业务逻辑
        newVal：新值
        oldVal：改变之前的值
    }
}

// 第二种写法，对象写法，深度监听可以读取到内层的数据
watch: {
    监听data种的数据: {
        handler(newVal, oldVal) {
            没有返回值
            耗的业务逻辑
            newVal：新值
            oldVal：改变之前的值
        }
        //深度监听，可以监听多层
        deep: true
    }
}