setup()

1.Vue3.0中一个新的配置项，值为一个函数
2.组合式 API 的入口
只有在
    需要在非单文件组件中使用组合式 API 时。
    需要在基于选项式 API 的组件中集成基于组合式 API 的代码时
才使用setup()
其他情况下，都应优先使用<script setup>语法。

ref()函数

作用: 定义一个基本类型响应式的数据
语法:
    const xxx =ref(值)
若要在JS中使用数据，使用
    xxx.value
若要在html中，使用
    {{xxx}}

reactive()函数

 作用：定义一个对象类型的响应式数据
 语法：
     const xxx = reactive()  接收一个对象或数组
 响应式原理基于proxy实现

vue的响应式原理

vue2的响应式原理

通过Object.defineProperty()对属性的读取、修改进行拦截,重写set get
缺陷：
    1.一次只能定义一个属性
    2.深度遍历，重写每个的getter/setter，消耗性能
    3.对象新增属性监听不到，需要使用set
    4.数组通过索引修改监听不到

vue3的响应式原理

通过proxy实现
优点：
    1.proxy代理整个对象
    2.能监听到对象新增、删除属性
    3.数组根据索引修改可监听
    4.不会深度遍历，只有用到的时候才会定义，性能更高

计算属性

computed函数

语法：let xxx = computed( () => {

} )
功能与vue2一致

watch函数

语法：
    watch(xxx,(newValue,oldValue) => {
    
 })

watchEffect函数

不用指明监听的哪个属性，回调中用到哪个属性就监听哪个
watchEffect(()=>{
    
})
与computed的区别
    computed注重的是计算出的值，必须要return
    watchEffect更注重过程，可以不写return

使用vuex

语法：
    let store = useStore()
    // 需要使用计算属性
    let xxx = computed(()=>{
        store.state.xxxxx
    })

vue3的生命周期

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

vue的代码重用方式

vue2

使用mixin
缺点：
    如果一个基本类型或引用类型相同名，后引入的会覆盖前面的
    但是以自身页面的伪最高级，不会被覆盖

vu3

使用hook
优点：
    如果有相同名字，会立即报错

vue3的父传子

父组件：
    <xxx  title="" />
子组件
    const props = defineProps({
        title:{
        //类型
            type:.....,
        //
            default:'',
        }
    })