Vue3笔记

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()</