vue3 新语法 setup

相信大家都已经很熟悉vue3的新特性，简单记录一下vue3中setup的一些语法

下一篇将记录script中的setup语法糖解脱return     script中的setup语法糖

1. setup  ref  reactive  ref

<template>
 <div class="page">
   {{a}}
   {{b.name}}
 </div>
</template>

<script lang="ts">
import { ref,reactive,defineComponent } from 'vue'
export default defineComponent({
  setup() {
    let a = ref(0)
    let b = reactive({name:'xiaoming'})
    console.log(a.value);
    console.log(b.name);
    
    
    return {
      a,b
    }
  },
})
</script>

2. 组件props，attrs，slot，结构赋值时避免props失去响应性使用toRefs 

// 父组件
<template>
  <div class="page">
    <TableList/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TableList from '../../components/common/TableList.vue';
export default defineComponent({
  components: { TableList },
  setup() {
  },
})
</script>


// 子组件
<template>
  <div class="page">
    
  </div>
</template>

<script lang="ts">
import { defineComponent,toRefs } from 'vue'
export default defineComponent({
  emits:['close'],
  props: {
    tableData: { type: Array, required: false},
  },
  setup(props,ctx) {
    let { tableData } = toRefs(props)

    console.log(ctx); // attrs  emit  slots
    
    return {
      tableData
    }
  },
})
</script>

3. 生命周期 因为setup执行在created后，所以可以在setup里面写onMounted

<script lang="ts">
import { defineComponent,onMounted } from 'vue'
export default defineComponent({
  beforeCreate(){
    console.log('----------beforeCreate');
  },
  created(){
    console.log('----------created');
  },
  setup() {
    onMounted(() => {
      console.log('----------onMounted');
    })
  },
  mounted(){
    console.log('----------mounted');
  }

  // ----------beforeCreate
  // ----------created
  // ----------onMounted
  // ----------mounted
})
</script>

4. setup中不存在this，所以官方放出getCurrentInstance获取一些全局变量

<script lang="ts">
import { defineComponent,getCurrentInstance } from 'vue'
export default defineComponent({
  setup() {
    let { proxy } = getCurrentInstance() as any
    console.log(proxy);
    
  },
})
</script>

5. watch watchEffect unwatch  computed 

<script lang="ts">
import { defineComponent, watch,ref,watchEffect,computed } from 'vue'
export default defineComponent({
  setup() {
    let num = ref(0)
    let firstName = ref(0)
    let lastName = ref(0)

    watch(num, (newValue, oldValue) => {
      console.log('--------------' + num.value)
    })

    const unwatch =  watch([firstName, lastName], (newValues, prevValues) => {
      console.log(newValues, prevValues)
    },
    { deep: true,immediate:true })
    unwatch() // 取消监听

    // watchEffect：不需要手动传入依赖，每次初始化时会执行一次回调函数来自动获取依赖，无法获取到原值，只能得到变化后的值
    watchEffect(() => {
      console.log(num.value)
    }, 
    {
      flush: 'post' // 确保模板引用与 DOM 保持同步"pre" | "post" | "sync" post(默认)，sync表示在状态更新时同步调用，pre则表示在组件更新之前调用
    })

    
    const num2 = computed(() => num.value + 1)
    const num3  = computed({
      get() {
        return 1;
      },
      set(value) {
        console.log(value);
      },
    });
    return {
      num,firstName,lastName,num2,num3
    }
  },
})
</script>

6. provide inject

<script lang="ts">
import { defineComponent, provide, inject } from 'vue'
export default defineComponent({
  setup() {
    provide('num', 1)
    const userGeolocation = inject('num')
  },
})
</script>

7. router

import { useRouter,useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
router.push('/PageIndex')
router.push({path:'/PageIndex',query:{id:1}}) 
// 获取参数 
console.log(route.query.id)
// 监听路由
watch(() => route, (newV, oldV) => {
  console.log(newV, oldV);
},
{ deep: true })

8. store

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from "vuex"
export default defineComponent({
  setup() {
    const store = useStore()
    const userName = store.state.userName

    console.log(store); // state commit dispatch getters和vue2同样使用
  },
})
</script>