Vue3学习

Vue3学习

• toRefs使解构后的数据 重新获得响应式。

  语法格式：toRefs(object)

1.setup()

1. 组合api的起点，将来的组合api的代码，基本上在这里。

2. 可以理解为，在beforeCreate钩子执行前执行，

3. 函数中不能使用this, ===>undefined

4. 模板中需要使用的数据和函数，需要在setup中返回。

2.组合api生命周期

• setup 创建实例前
• onBeforenMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpDated 更新组件后
• onBeforeUnmopunt 卸载销毁前
• onUnmounted 卸载销毁后

vue3可以定义相同的钩子函数，去实现不同的逻辑

3.reactive 函数

定义响应式数据：

• reactive 是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

• 通常是用来定义响应式对象数据。

4.toRef函数

• toRef是函数，转换响应对象中某个属性为单独响应式数据，并且值是关联的。

==注意：==从响应式数据对象中解构出的属性数据，不再是响应式数据。

setup(){
   
const name=toRef(obj,'name')
const obj=reactive({
   
    name:"js,
    age:10"
})
//修改姓名
const updateName()=>{
   
    //toRef转换响应式数据包装成对象，value存放值的位置
name.value='zs'
}
return {
   name,updateName}

}

5.toRefs函数

场景：不想使用某个对象，但是需要将对象中的所有属性，定义为响应式数据。

• toRefs是函数，转换响应式对象中所有属性为单独响应式数据对象成为普通对象。

setup(){
   
//1. 响应式数据对象
    const obj=reactive({
   
      name:'ls',
       age:10
    })
//解构，展开响应式数据对象
    const obj2=toRefs(obj)

      return {
   ...obj2}
}

6.ref函数

• 定义响应式数据，用于简单数据类型

  • 再修改值，获取值的时候 需要 .value
  • 在模板中使用ref申明的响应式苏剧，可以省略.value

  setup(