Vue中的methods、computed计算属性和watch监听属性的使用和区别解析

<div id="App">
        <h1>n的值为:{{ n }}</h1>
        <button @click="add">按钮</button>
        <!-- add 也可以写成 add() -->
</div>
-----------------------------------------------------
data: {
    n: 1
},
methods: {
    add(e){
    	// console.log(e) 这里的第一个形参e 是事件对象
        this.n++
    }
},     

<div id="App">
        <h1>n的值为:{{ n }}</h1>
        <button @click="add(5)">点我加5</button>
        <button @click="add(10)">点我加10</button>
</div>
------------------------------------------------------
data: {
    n: 1
},
methods: {
    add(x){
    	// 但这种情况下，我们拿不到 事件对象e 了
    	// 但是，在模板传参的过程中，我们可以通过$event将事件对象传入
        this.n += x
    }
},

data: {
    firstName: '张',
    lastName: '三',
}
--------------------------------------------------------
computed: {
    // 简写 函数式(只读不可写，默认写法)    只有getter 无setter
    fullName() {
        return this.firstName + this.lastName
    }
}

data: {
    firstName: '张',
    lastName: '三',
}
------------------------------------------------------------
computed: {
    // 完整写法 对象式(可读可改)    有getter和setter
    fullName:{
        get(){
            return this.firstName + this.lastName
        },
        set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

watch: {
    // 完整写法 对象式
    lastName:{
        immediate: true,    // 初始化时，先调用一次handler函数
        deep: true,         // 深度监听，可监听多层对象
        handler(newValue,oldValue){
            console.log(newValue,oldValue)
        }
    }
}

watch: {
    // 简写 函数式        当不需要 immediate: true,deep: true,时
    lastName(newValue, oldValue){
        console.log(newValue, oldValue)
    }
}