vue3.2中setup语法糖的详细使用说明

vue3.2中setup语法糖的详细使用说明

1.setup语法糖使用

在vue3.0中，setup函数中的变量必须return出来才能给template使用，3.2中使用setup语法糖无需return变量就可以在template中使用了

2.data中数据和method方法使用

3.组件引入

引入的组件可以直接使用，无需再通过components进行注册

4.父子组件传值props

5.子组件给父组件传值emit

6.provide 和 inject 祖孙传值

7.通过ref获取和defineExpose 暴露属性

8.computed计算属性的使用

<script setup>
import { reactive, computed } from "vue";
//数据
let personInfo = reactive({
  firstName: "上官",
  lastName: "婉儿",
});
// computed计算属性简写
personInfo.fullName = computed(() => {
  return personInfo.firstName + "-" + personInfo.lastName;
});
// computed计算属性完整写法
personInfo.fullName = computed({
  get() {
    return personInfo.firstName + "-" + personInfo.lastName;
  },
  set(val) {
    const arry = val.split("-");
    personInfo.firstName = arry[0];
    personInfo.lastName = arry[1];
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

9.watch监听的使用

<script setup>
import { reactive, watch } from "vue";
let sum = ref(1);
let msg = ref("哈哈哈");
let personInfo = reactive({
  name: "张三",
  age: 18,
  job: {
    work:"IT"
  },
});

watch([sum, msg],
  (newVal, oldVal) => {
    console.log("监听sum和msg", newVal, oldVal);
  },
  { immediate: true }
);

watch(() => personInfo.job,
  (newVal, oldVal) => {
    console.log("personInfo数据变了", newVal, oldVal);
  },
  { deep: true } //深度监听
);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

10.路由useRoute和useRouter的使用

<script setup>
  import { useRoute, useRouter } from 'vue-router'

  // 声明
  const route = useRoute()
  const router = useRouter()
    
  // 获取query数据
  console.log(route.query)
  // 获取params数据
  console.log(route.params)

  // 路由跳转
  router.push({
      path: `/home`
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

11.store仓库的使用

<script setup>
  import { useStore } from 'vuex'
  import { user } from '../store/index'

  const store = useStore(user)
    
  // 获取Vuex的state
  console.log(store.state.name)
  // 获取Vuex的getters
  console.log(store.state.getName)
  
  // 提交mutations
  store.commit('updateName')
  
  // 分发actions的方法
  store.dispatch('updateName')
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

12.await的使用

setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup

<script setup>
  import { getInfo } from '@/api/user'
  const data = await getInfo()
  console.log(data)
</script>
1
2
3
4
5