vue3的API详细方法具体使用
免费下载资源
目录
2.4、生命周期也都变成了API在setup中使用, 是个函数，内部是个回调
4、vue3.0的响应式核心（Proxy, Reflect）
9.1、shallowReactive、shallowRef、reactive、 ref区别
12、自定义reactive 、shallowReactive
13、自定义shallowReadonly、readonly
0、简述
1、defineComponent
是个函数，定义一个组件，内部可以传入一个配置对象；
2、setup
是个函数，return一个对象，setup中定义的对象和方法，被return出来的，都可以在模板中使用；
2.1、执行时机
setup在beforeCreate之前执行，且执行一次
setup执行时，当前组件还未创建，组件实例对象，this不能使用，所以不能通过this调用该data/computed/methods中的相关内容
2.2、返回值
setup返回一个对象，内部的属性和方法是给html模板使用的
setup 中的对象内部中的属性，和data函数return对象的属性会合并成组件对象的属性
setup 中的对象内部中的方法，和methods中方法会合并成组件对象的方法
setup 不能是一个async 函数，因为返回的不再是return的对象，而是promise，模板看不到return对象中的属性数据
2.3、setup(props, context)
props： 对象，有父级传给子组件的数据，在子组件中使用props接收所有属性
context： 对象，有attrs对象， emit方法， slot插槽
attrs：获取当前组件标签上的所有属性的对象，但是该属性是在props中没有声明接收的所有的属性的对象，相当于this.$attr
2.4、生命周期也都变成了API在setup中使用, 是个函数，内部是个回调
3、响应式数据（ref(), reactive()）
ref（x）
- 是一个函数，定义一个基本数据类型的响应式的数据；
- .value 取值， 模板中不可以用.value;
reactive （{ name:xx, age:xx }）
- 定义对象，把对象中的属性变成深层次的响应式；
- 返回的就是Proxy的代理对象，被代理的对象就是传入的对象
ref中如果放对象，那么是经过reactive处理，会变成一个proxy对象
4、vue3.0的响应式核心（Proxy, Reflect）
const user = {
name: '小米'，
age: 20,
wife：{
name: '小一'，
age: 19
}
}
// user ---> 目标对象
// handler ---> 处理器对象，用来监听数据，及数据的操作
// 都是深层次的修改更新
const proxyUser = new Proxy(user, {
// 获取目标对象的属性值
get(target, prop) {
return Reflect.get(target, prop)
},
// 修改目标对象的属性值、或者为目标对象添加新的属性
set(target, prop, val) {
return Reflect.set(target, prop, val)
},
// 删除目标对象的属性值
deleteProperty(target, prop) {
return Reflect.deleteProperty(target, prop)
}
})5、计算属性和监听
computed如果只传入一个回到，表示get，返回的是一个Ref类型的对象
setup () {
const user = {
firstName: '11',
lastName: '22'
}
const fullName1 = computed(() => {
return user.firstName + '_' + user.lastName
})
return {
user,
fullName1
}
}如果传入一个对象里，既有get，又有set
setup () {
const user = {
firstName: '11',
lastName: '22'
}
const fullName1 = computed(() => {
return user.firstName + '_' + user.lastName
})
const fullName2 = computed({
get() {
return user.firstName + '_' + user.lastName
}
set(val: string) {
const names = val.split('_')
user.firstName = name[0]
user.lastName = name[1]
}
})
const fullName3 = ref('')
watch(user, ({firstName, lastName}) => {
fullName3.value = firstName + '_' + lastName
}, {immediate: true, deep: true})
//fullName3是响应式数据，user.firstName, user.lastName不是响应式数据
watch(() => user.firstName, () => user.lastName, fullName3, () => {
})
// watchEffect不需要配置immediate deep
watchEffect(() => {
fullName3.value = firstName + '_' + lastName
})
return {
user,
fullName1,
fullName2.
fullName3
}
}6、hook函数（use开头命名）
7、toRefs
toRefs 可以把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref类型的对象，通过.value取值
8、ref
获取页面中的元素
9、composition API
9.1、shallowReactive、shallowRef、reactive、 ref区别
reactive 深度响应式的监听
ref 深度响应式的监听，做了reactive处理
shallowReactive 浅监听
shallowRef 浅监听
9.2、readonly、shallowReadonly
readonly 深度只读属性，内部嵌套的对象不可以修改
shallowReadonly 浅只读，内部嵌套的对象可以修改
9.3、toRaw、markRaw
toRaw(props) 把代理对象变成普通对象，数据变化，界面不变化
markRaw(props) 标记的对象，从此就不能成为代理对象
9.4、toRef、ref
toRef(propsObj, prop) 把响应式数据对象中的某个属性变成ref对象；修改时，propsObj中也修改
ref(propsObj.prop) 把响应式数据对象中的某个属性变成ref对象; 修改时，propsObj中未修改
9.5、customRef
定时器
10、provide、inject 跨组件取值
provide（‘color’, ref('red')）父级设置
inject('color') 孙组件取值
11、响应式数据判断
isRef 是否为一个ref对象
isReactive 是否由reactive创建的响应式代理
isReadonly 是否由readonly创建的只读代理
isProxy 是否由reactive或者readonly创建的代理
12、自定义reactive 、shallowReactive
13、自定义shallowReadonly、readonly
14、自定义shallowRef、Ref
15、自定义isReacitve
16、自定义isRef
17、自定义isReadOnly
18、自定义isProxy
19、Fragment（片段）
不需要根标签
20、Teleport（瞬移）
让组件的html在父组件界面外的特定标签下插入显示
21、Suspense（不确定的）
在等待异步组件渲染一些后备内容，可以让我们在空白时，创建一个平滑的用户体验
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)