组合api特点

1. 更加直观，接近原生js
2. 按需加载
3. 没有this，降低了耦合性，提高复用性

setup（）

setup()函数是vue3中，专门为组件提供的新属性。它为我们使用vue3的Composition API新特性提供了统一的入口。
相当于created生命周期，需要 return 返回，在模板中使用
   

ref值类型 响应对象

const count = ref(5)
在setup访问count值
count.value 来访问
可以作为dom引用
const inp  = ref(null)
<p ref="inp">
inp.value.innerText
reactive

引用类型 响应式

const list = reactive(默认值)
x  list = xxx  直接赋值破坏了引用
√ list.push(xxx)
watch

监听

watch("count",(nval,oval)=>{
   //执行回调函数
})
watchEffect

监听效果

只有引用的数据变化都会执行回调函数
const stop = watchEffect(()=>{
   localStorage.setItem("count",count.value)

})
	stop 用来停止监听
stop()

生命周期

没有created在原有生命周期添加on 如：onBeforeMount


挂载前
onMounted
挂载完毕
onBeforeUpdate
更新前
onUpdated
更新完毕
onUnMount
卸载前
onUnMounted
卸载完毕

全局配置

app.config.globalProperties.xxx = yyy 
    getCurrentInstance

获取当前实例

不推荐使用(this)
const app  =getCurrentInstace().appContext
const xxx = app.config.globalPropertites.xxx
获取到全局的而方法

setup使用vuex

import {useStore} from ‘vuex’
const store = useStore()
store.commit("user/addScore" ,v)

setup 使用路由

import {useRouter,useRoute} from 'vue-router'
const router = useRouter();
const route = useRoute()
等同于this.$router 和this.$route
# setup 参数

props 和 context

1. props 用于获取组件中定义的 props

<template>
    <div class="home">
        <h2>{{ title }}</h2>
    </div>
</template>

<script>
import {computed, ref, reactive, toRefs, watch} from 'vue';
export default {
    name: 'Home',
    components: {},
    props: {
        title: {
            type: String,
            default: 'hello world'
        }
    },
    setup(props) {
        console.log('props.title :>> ', props.title);
        // 监听title发生改变
        watch(
            () => props.title,
            (newTitle, oldTitle) => {
                console.log('newTitle, oldTitle :>> ', newTitle, oldTitle);
            }
        );
    }
};
</script>

2. context，在 setup 函数内不能使用 this，那么就可以使用 context 获取插槽

需要 title 发生改变时给发送一个事件, context.emit('change-title', title)

<template>
    <div class="home">
        <h2>{{ title }}</h2>
    </div>
</template>

<script>
import {computed, ref, reactive, toRefs, watch} from 'vue';
export default {
    name: 'Home',
    components: {},
    props: {
        title: {
            type: String,
            default: 'hello world'
        }
    },
    setup(props, context) {
        console.log('props.title :>> ', props.title);
        // 监听title发生改变
        watch(
            () => props.title,
            (newTitle, oldTitle) => {
                console.log('newTitle, oldTitle :>> ', newTitle, oldTitle);
                context.emit('change-title', title);
            }
        );
    }
};
</script>