setup快来啦看看吧

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

 本期就到这里了