一、生命周期

// 在beforeCreate执行前执行，组件实例创建前，执行
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
// 挂载DOM前执行
beforeMount -> onBeforeMount
// 挂载DOM后执行
mounted -> onMounted
// 更新组件前执行
beforeUpdate -> onBeforeUpdate
// 更新组件后执行
updated -> onUpdated
// 卸载销毁前 执行
beforeDestroy -> onBeforeUnmount
// 卸载销毁后执行
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

二、setup

3.0之后的代码基本上都是在setup中完成的，它是一个函数，在组件实例创建前执行，所以，不能使this关键字， 模板中需要的数据、函数在setup中返回

1. 创建基本的数据

<script>
 export default{
    name: 'App',
     setup(){
       // 创建一个普通数据，可以在模板中直接使用
        const msg = 'hi vue3'
      // 创建一个函数，可以在模板中进行调用
        const say  = ()=> {
            console.log('hi vue3')
         }
           return { msg }
      }
}
</script>

2.创建响应式数据,可以使用reactive、ref、toRef、toRefs

<script>
  exprot default{
    name:'App',
    setup(){
      // 1. 创建一个响应式数据，数据改变，页面显示的内容也发生变化
      const obj  = reactive({
        name:'lisi',
        age:18
      })
    // 修改的时候，可以直接修改对象的属性
     const updateName = ()=>{
       obj.name = 'zhangsan'
      }
    // 2. 创建一个响应式数据，可以直接在模板中使用name
    const name = toRef(obj,'name')
     
    // 2.2 多个响应式数据
    const obj2 = toRefs(obj)
     // 3. 创建一个简单的响应式数据
     const count= ref(0)
    // toRef、toRefs，ref会将数据封装成一个对象，值保存在value中，如果需要修改值，可以通过修改value实现
     const updateRef = ()=>{
      name.value = 'wangwu'
      count.value++
      }
    return { // ...0bj2 包含了obj对象的每个数据，可以直接使用
    obj,updateName,name,...obj2,count,updateRef
    }
  }
</script>

3. 计算属性

计算属性是通过一定规则计算出来的，是只读，无法修改的
可以通过computed进行创建

<script>
  export default{
  name:'App',
  setup(){
  const age = ref(18)
  // 1. computed内可以接收一个回调函数，函数内部就是具体的逻辑规则
  const newAge = computed(()=>{
      return age.value + 1
    })
  //2. computed内还可以接受一个对象，变相的实现修改计算属性的目的，可以和v-model进行绑定
  const newAge2 = computed({
    // get函数，获取计算属性的值
    get(){
      return age.value + 1
    },
    // set函数，接受一个参数value，无法直接修改newAge2,但是可以通过修改age变相的修改newAge2的值
    set(value){
      age.value = value -1
    }
  })
  }
}
return {
  age,newAge,newAge2
}
</script>