vue3特性二

Ref

指定类型

const ids = ref<number[]>([])
delIds.value.push(id)

计算属性computed()用法

<script setup>
import { computed } from "vue";
let num = 1;
const cput = computed(() => {
  console.log("计算属性:", num);
  num++;
  return num;
});
console.log("end:", cput); // 这样调用，不会执行计算属性内部，也就不会打印
console.log("end:", cput.value); //这样调用，会执行计算属性内部；结果2
//html部分用{{cput}}默认是用了 cput.value，所以也会打印
</script>

useRouter与useRoute的区别

useRouter返回 router实例，相当于在模板中使用$router,必须在setup中调用
useRoute返回 当前路由地址，相当于在模板中使用$route,必须在setup中调用

---

template #号

<template #title> 中的 #为 v-slot 简写

 <template #title>
      <menu-item :title="route.meta.title" :icon="route.meta.icon"></menu-item>
</template>

---

defineProps 和 defineEmits

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的：

---

modelValue 和 update:modelValue

.sync 将替换为 v-model

<ChildComponent :title.sync="pageTitle" />
<!-- 替换为 -->
<ChildComponent v-model:title="pageTitle" />

已将 prop 和 event 命名更改为
modelValue 和 update:modelValue

<template>
  <input :value="msg" @change="changeValue" />
</template>

<script lang="ts" setup>
  import { defineProps, defineEmits } from 'vue'

  const props = defineProps({
    msg: {
      type: String,
      required: true
    }
  })
//这样在函数中就不需要this.$emit()方式调用了
  const emit = defineEmits(['update:msg'])//先声明有几个
 function changeValue(e: InputEvent) {
    //调用其中一个
    emit('update:msg', e.target.value)
  }
</script>

过滤器 or 全局属性

vue3 过滤器已被移除，用 全局属性 替代

挂载到vue原型链
// main.js 
const app = createApp(App)
app.config.globalProperties.$http = xxx;  // 注册全局方法
app.config.globalProperties.$global_var = 'xxx'; // 注册全局属性
 
组件中使用
import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance();
console.log(proxy.$http)
console.log(proxy.$global_var)

将 props 传递给路由组件

vue3中，路由传参，需要 props 配置来解除这种行为：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]

替换成

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const routes = [{ path: '/user/:id', component: User, props: true }]

这允许你在任何地方使用该组件，使得该组件更容易重用和测试。