生命周期钩子

vue3.0中可以继续使用vue2.x中的生命周期钩子，但有两个被更名：
beforeDestroy 改名为 beforeUnmount
destroyed 改名为 unmounted
vue3.0也提供了Composition API 形式的生命周期钩子，与vue2.x中钩子对应关系如下：
beforeCreate = => setup()
created = => setup()
beforeMount = => onBeforeMount()
mounted = => onMounted()
beforeUpdate = => onBeforeUpdate()
updated = => onUpdated()
beforeUnmount = => onBeforeUnmount()
unmounted ==> onUnmounted()

computed

与vue2.x中的computed配置功能一致；

<template>
    <h1>个人信息</h1>
    姓: <input type="text" v-modal="person.firstName" />
    名：<input type="text" v-modal="person.lastName" />
    <br/>
    全名：<span>{{ person.fullName }} </span>
</tempalte>
<script>
    import { reactive, computed } from "vue";
    export default {
        setup(){
            let person = reactive({
              firstName: "张",
              lastName: "三",
            })
            //计算属性--简写（没有考虑计算属性被修改的情况）
            // person.fullName = computed( () => {
            //   return person.firstName + person.lastName;
            // })

            //计算属性--完整写法（考虑读和写）
            person.fullName = computed({
              get(){
                return person.firstName + "-" + person.lastName;
              }
              set(value){
                const arr = value.split("-");
                person.firstName = arr[0];
                person.lastName = arr[1];
              }
            })
            return {
              person,
            }
        }
    }  
</script>

漫步人生路Less than 1 minute

vue3_watch

watch

与vue2.x中watch配置一致
监视reactive定义的响应式数据中某个属性时： deep配置有效

vue2写法

<template>
    <h1>求和：{{ sum }}</h1>
    <button @click="sum++">点我+1</button>
</tempalte>
<script>
    
    export default {
        watch: {
            //简写
            // sum(newValue, oldValue){
            //     console.log("sum变化了", newValue, oldValue);
            // }
            // 可配置属性
            sum: {
                immediate: true,    //立即监听
                deep: true,         //深度监听
                handler(newValue, oldValue){
                    console.log("sum变化了", newValue, oldValue);
                }
            }
        }
    }  
</script>

漫步人生路About 1 min

vue3_watchEffect

wachtEffect()

watch的套路是：既要指明监听的属性，也要指明监听的回调
watchEffect的套路是：不用指明监听哪个属性，监听的回调中用到哪个属性，那就监视哪个属性。

const todoId = ref(1)
const data = ref(null)

watch(todoId, async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
}, { immediate: true })

漫步人生路Less than 1 minute

vue3_setup

拉开序幕的setup

setup

理解：vue3.0的新的配置项，值为一个函数
setup是所有composition API(组合API)的“表演舞台”；
组件中所用到的：数据，方法等等，均要配置在setup中；
setup函数的两种返回值：
1、若返回一个对象，则对象中的属性，方法，在模板中均可以直接使用。
2、若返回一个渲染函数：则可以自定义渲染内容
注意点：
1、尽量不要与vue2.x配置混用
· vue2.x配置（data,methods,computed...）中可以访问到setup中的属性，方法。
· 但在setup中不能访问到vue2.x配置（data，methods，computed...）。
· 如有重名，setup优先。
2、setup不能是一个async函数，因为返回值不再是return对象，而是promise，模板中看不到return对象中的属性

漫步人生路About 5 min