OptionsAPI(配置)和CompositionAPI(组合)

配置API

​ 每个功能都拆分。各种功能的数据放在一起。各种功能的方法也放一起。以及监视,计算属性都放一起。

export default{
	data(){
		return{
			user:{ //用户 功能 数据
				
			},
			dept:{ //部门 功能 数据

			}
		}
	},
	methods:{
		getUser(){//用户 功能 方法

		},
		getDept(){//部门 功能 方法

		}
	},
	computed:{

	},
	watch:{

	}
}

组合API

​ 将功能组合到一起。一个功能里面包含数据、方法、计算属性、监视。通过函数返回。

export default {
        name: 'Person',
        setup() { 
            let name = '张三' 
            let age = 18//此时的name不是响应式
            let phone = '12345678901'
            let dept = {
                id: 1,
                name: 'IT部'
            }
            console.log(this) //setup中this是undefined,Vue3弱化了this
            function addAge(){
                age++ //修改界面不会变化,但是值会变化
            }
            function shouTest(){
                alert(phone)
                console.log(phone)
            }
            return {name, age, phone, dept,addAge, shouTest}
        }
    }