Vue中el、data、watch、computed的简写方法及watch与computed如何选择

一、el的两种写法

1、方法一

el: "#app"

2、方法二

vm.$mount("#app") //vm指VUE构造函数创造的实例对象

3、两者区别

第一种方法在new Vue构造函数时就要确定为哪个容器服务

二、data的两种写法

1、对象式写法

data：{
    name:"zhangsan"
}

2、函数式写法

data(){
    return {
        name:"zhangsan"
    }
}

3、两者区别

vue所管理的函数，全部不能写成箭头函数。

三、watch的两种写法

1、方法一

watch:{
    fullName:{
        handler() {
            console.log('fullName被修改了');
        }
    }
}

2、简写

watch:{
    fullName(){
      console.log('fullName被修改了');
    }
}

3、两者区别

简写形式不能配置deep和immediate

四、computed的两种写法

1、方法一

computed:{
    fullName:{
        get(){
            return this.name
        }
    }
}

2、简写

computed:{
    fullName(){
        return this.name
    }
}

3、两者区别

当不需要set函数时可简写

五、watch与computed如何选择

1、computed能完成的，watch也能完成

2、计算属性不能通过异步任务去维护数据，但watch属性可以

3、当computed与watch都能实现功能时，用computed更简单

​