开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情
setup返回值
//setup中的返回值是一个对象,内部的属性和方法是给html模板使用的
//setup中的对象中的属性和data函数中的对象中的属性会合并为组件对象的属性 methods会合并为组件的方法
//不要混合使用setuo与data和methods
//不能是async函数,因为返回值不再是return出去的对象,而是promise
setup参数
setup(props, {attrs,slots,emit}) {}
props参数: 是一个对象,里面有父组件向子组件传递的数据,,子组件使用props接受所有的属性
//包含props配置声明,且传入了所有属性的对象
context对象
attrs对象 获取当前组件标签上的属性, 该属性是在props中没有声明的接受的所有属性的对象
emit方法, 分发事件的
slots对象 插槽
ref-reactive比较
用ref处理对象或数组,内部会自动将对象/数组转换为reactive
ref内部: 通过给value属性添加getter/setter来实现对对象内部所有数据的劫持
reactive内部: 通过使用proxy来实现对对象内部所有数据的劫持,并通过Reflect操作对象内部数据
ref的数据操作: 在js中要 .value, 在模板中不需要(内部解析模板时会自动添加value)
ref中如果放入的是一个对象,那么是经过了reactive的处理,形成了一个Proxy类型的对象
计算属性computed
计算属性中的函数如果只传入一个回调函数表示的是get
//1.返回的是一个Ref类型的数据
const fullName = computed(() => {
return user.firstName + '_' + user.lastName
})
2.const fullName = computed({
get() {
return user.firstName + '_' + user.lastName
},
set(val: string) {
const names = val.split('_');
user.firstName = names[0];
user.lastName = name[1];
}
})
监视watch
const fullName = ref('');
watch(user, ({ firstName, lastName}) => {
fullName.value = firstName + '_' + lastName
},{immediate: true, deep: true})
//immediate 默认会执行一次watch, deep深度监视
//监视多个数据 监视非响应式的数据的时候
watch([() => user.firstName, () => user.lastName, fullName], () => {
})
