一 组合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)
<p ref="inp">
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 暴露数据