setup是什么?
为了开始使用组合式 API,我们首先需要一个可以实际使用它的地方。在 Vue 组件中,我们将此位置称为 setup。
它是一个组件选项。
setup的特点是什么?
1.按需加载
2.没有this,降低了耦合性,提高复用
在哪里使用steup?
setup
是一个组件选项,所以像别的组件选项一样,写在组件导出的对象里。
<script>
export default {
name: "App",
setup() {
// ...
return {
// ...
}
},
}
</script>
reactive引用类型响应式
const list=reactive(默认值)
x list =xxx 直接复制破坏了引用
对 list.push(xxx)
watch监听
watch("count",(nval)=>{
//执行回调函数
})
watchEffect监听效果
只有引用的数据变化都会执行回调函数
const stop=watchEffect(()=>{
localStorage.setitem("count",count.value)
})
computed计算
computed("age",{
get(){return count.value},
Set(v){count.value=v}
})
生命周期
没有created
在原有生命周期添加on
onBeforeMount
挂载前
onMounted
挂载完毕
onBeforeUpdate
更新前
onUpdated
更新完毕
onUnMount
卸载前
onUnMunted
卸载完毕
全局配置
app.config.globaIPropertites.xxx=yyy
setup使用vuex
import {useStore} from 'vuex'
const store=useStore()
store.commit("user/addScore",v)
steup 使用路由
import {useRouter,useRoute} from 'vue-router'
const router =useRouter();
const route =useRoute()
等同于this.$router和this.$route
steup(props,context)参数
props 传入参数 (响应式)
context
attrs 属性
emit 事件发送器(同$emit)
slots 插槽 同$slots
本期就到这里了