目录
1.Vue3
Attrs和 props
Attrs内可以包含所有父级传递的方法和string类型参数
Props只能是参数且需要在上面声明,一旦props声明了,arrts内就不会在现实此参数
1、props 要先声明才能取值,attrs 不用先声明
2、props 声明过的属性,attrs 里不会再出现
3、props 不包含事件,attrs 包含
4、props 支持 string 以外的类型,attrs 只有 string 类型
toRefs()
toRefs() 可以将 reactive() 创建出来的响应式对象转换成内容为 ref
响应式的值的普通对象
在搞清楚 toRefs() 的用法之前,我们需要先了解一下用 reactive() 和 ref()
创建出来的响应式对象的区别:
1、用 reactive()
创建的响应式对象,整个对象是响应式的,而对象里的每一项都是普通的值。当你把它用展开运算符展开后,整个对象的普通值都不是响应式的;
2、而用 ref() 创建的响应式的值,本身就是响应式的,并不依赖于其他对象。
所以当你需要展开 reactive() 创建的响应式对象,又不想让他们失去响应式特点的时候,就需要用 toRefs() 将它进行转换:
// 定义响应式数据对象
const state = reactive({
count: 0
})
// 定义简单的函数,使count每次+1
const add = () => {
state.count++
}
// 将setup函数的内容return出去,供外界使用
return {
// 将 state 展开导出,同时将其属性都转化为 ref 形式的响应式数据
...toRefs(state),
add
}
Reactive ref
reactive:reactive的作用是将对象包装成响应式对象------通过
Proxy代理后的对象。
ref:由传入值返回一个响应式的、可变的且只有value一个属性的ref对象。
readonly()
传入一个响应式对象、普通对象或 ref
,返回一个只读的对象代理。这个代理是深层次的,对象内部的数据也是只读的。
Watch
isRef()
isRef() 顾名思义,是用来判断某个值是否为 ref() 创建出来的响应式的值。
const unwrapper = isRef(foo) ? foo.value : foo
动态img
Transition
transition类名变更
-
v-enter→v-enter-from
-
v-leave →v-leave-from
<transition name="fade">
<div v-show="visible">这是一段文本</div>
</transition>
Style:
.fade-enter-active,
.fade-leave-active {
transition: all 2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
组件v-model
父组件: // 在vue3中v-model默认叫modelValue,vue2中叫value
Vue3
VuYear(v-model="curYear" @yearChange="clickYear")
子组件:
el-select(v-model="currentYear" @change="(val)=>clickYear(val)")
props:{
modelValue:{
type:Number,
default: 0
}
},
setup(props:any, context:any) {
const clickYear = (val:any) => {
context.emit('yearChange',val)
}
const currentYear = computed({
set(value){
context.emit('update:modelValue',value)
},
get()</