初学Vue3-记录

1.vue3的生命周期

回顾vue2.x生命周期钩子函数：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed 认识vue3.0生命周期钩子函数
• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后 定义响应式数据：
• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

setup () {
  // 定义响应式数据
  const obj = reactive({
      name: 'xxx',
      age: 18
    })
  // 定义好数据必须还回数据
  return {odj}
}

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

setup () {
  // 定义响应式数据
  const obj = reactive({
      name: 'xxx',
      age: 18
    })
  // 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
  // let { name } = obj 不能直接解构，出来的是一个普通数据，会导致通过方法修改数据不成功
  const name = toRef(obj, 'name')
  return {odj}
}

• toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的

setup () {
  // 定义响应式数据
  const obj = reactive({
      name: 'xxx',
      age: 18
    })
  // 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
  // const obj2 = {...obj}// 不能解构，出来的是一个普通数据，会导致通过方法修改数据不成功
  const obj3 = toRefs(obj)// 正确方法
  console.log(obj3)// 打印出来的对象和原对象有些区别，值实际在对象value当中
  return {odj,obj3}
}

• ref函数，常用于简单数据类型定义为响应式数据

setup () {
  // 通过ref定义简单数据类型为响应式数据
  const name =ref('值')
  return {name}
}

在vue3当中每当使用到这些函数方法，都要从vue中导入包括生命周期。