提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
Vue3 组合式 API 的基础 —— setup
一、setup 是什么
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
- 为了开始使用组合式 API,我们首先需要一个可以实际使用它的地方。在 Vue 组件中,我们将此位置称为 setup。
- 它是一个组件选项。
二、组合api特点
- 更加直观,接近原生js
- 按需加载
- 没有this,降低了耦合性,提高复用性
三、setup()
- 相当于created生命周期
- 需要 return 返回,在模板中使用
四、ref值类型 响应对象
- const count = ref(5),在setup访问count值,count.value 来访问
- 可以作为dom引用,const inp = ref(null),
,inp.value.innerText
五、reactive引用类型 响应式
- const list = reactive(默认值)
- 错误: list = xxx 直接赋值破坏了引用
- 正确: list.push(xxx)
六、watch监听
watch("count",(nval,oval)=>{
//执行回调函数
})
七、watchEffect监听效果
-
只有引用的数据变化都会执行回调函数
const stop = 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.globalProperties.xxx = yyy
十一、getCurrentInstance获取当前实例
- 不推荐使用(this)
const app =getCurrentInstace().appContext
- const xxx = app.config.globalPropertites.xxx,获取到全局的而方法
十二、setup使用vuex
import {useRouter,useRoute} from 'vue-router'
const router = useRouter();
const route = useRoute()
等同于this.$router 和this.$route
十三、setup(props,context)参数
- props 传入参数 (响应式)
- context(1.attrs 属性 2.emit 事件发送器(同 e m i t ) 3. s l o t s 插 槽 同 emit)3.slots 插槽 同 emit)3.slots插槽同slots4.expose 暴露数据)