VUE3.2最新总结，不看工地搬砖，看完月入过万

setup组合api

一、组合api特点

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

二、setup（）

相当于created生命周期
需要return返回，在模板中使用

三、ref值类型 响应对象

const count  = ref(5)
在setup访问count值
const.value来访问

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

inp.value.innerText

四、reactive引用类型 响应式

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

 

五、watch监听

watch('count',(value,oval)=>{
执行回调函数
})

六、watchEffect监听效果

只要引用的数据变化都会执行回调函数
watchEffect(()=>{
localStorage.setItem('count',count.value)
})
stop  用来停止监听
stop()

七、computed计算

computed('count2',()=>count.value*2)
computed('age',{
get(){return count.value},
set(v){count.value = v}
})

八、生命周期

没有created
在原有生命周期中添加on
onBeforeMount
挂载前
onMounted
挂载完毕
onBeforeUpdate
更新前
onUpdated
更新完毕
onUnMount
卸载前
onUnMounted
卸载完毕

九、全局配置

app.config.globlProperties.xxx=yyy

十、getCurrentInstance获取当前实例

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

十一、setup使用vuex

import{userStore}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)参数

props 传入参数（响应式）

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