setup组合api

一 组合api特点

1. 更加直观，接近原生js

2. 按需加载

3. 没有this，降低了耦合性，提高复用性

二 setup（）

1.相当于created生命周期

2.需要 return 返回，在模板中使用

三 ref 值类型 响应对象

1       const count = ref(5)

        在setup访问count值
        count.value 来访问

2        可以作为dom引用
        const inp  = ref(null)
        

        inp.value.innerText

四 reactive 引用类型 响应式

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

五 watch 监听

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

六 watchEffect 监听效果

1 只有引用的数据变化都会执行回调函数

2 

const stop = watchEffect(()=>{
   localStorage.setItem("count",count.value)

})

3

stop 用来停止监听
stop()

七 computed 计算

1 computed(“count2”,()=>count.value*2)

2 

computed(“age”,{
get(){ return count.value},
set(v){count.value = v}
})

八 生命周期

1 没有created
在原有生命周期添加on

2 onBeforeMount
挂载前

3 onMounted
挂载完毕

4 onBeforeUpdate
更新前

5 onUpdated
更新完毕

6 onUnMount
卸载前

7 onUnMounted
卸载完毕

九 全局配置

app.config.globalProperties.xxx = yyy

十 getCurrentInstance  获取当前实例

1 不推荐使用(this)

2 const app  =getCurrentInstace().appContext

3 const xxx = app.config.globalPropertites.xxx  获取到全局的而方法

十 setup使用vuex

1

import {useStore} from ‘vuex’
const store = useStore()

2 store.commit("user/addScore" ,v)

十一 setup 使用路由

1 import {useRouter,useRoute} from 'vue-router'

2 const router = useRouter();
const route = useRoute()
等同于this.$router 和this.$route

十二 setup(props,context) 参数

1 props 传入参数 （响应式）

2 context

attrs 属性 emit 事件发送器（同$emit） slots 插槽 同$slots   expose 暴露数据