vite等知识点

快速删除node-modules文件夹

安装一个包

文件命名规范

新手在组件命名的时候不够规范，根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。
而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。

解决方案

vite创建vue3项目

由vite创建vue3项目 (vite得需要考虑node版本号，只支持部分node版本）
pnpm create vite my-vue-app --template vue
创建项目很快，运行时得先进行pnpm install ,不然会报错，不同于webpack运行

在vue3中watch监听数据:一个是handler别忘了，对于监听对象而言，deep:true别忘了
xxx : { handler: function(){ doSth}, deep:true }

安装vue vscode snippets插件，采用 vbase 选择 -3直接就创建基本架构。

对话框：一般会有一个 showDialog 的属性进行展示与隐藏的功能, 一般是 v-if的指令去判断 showDialog的属性，通过点击事件去判断是否存在：简单写法 @click = 'showDialog = !showDialog' 这种内部一行就能解决的方式。

通信方式

对于父子组件的数据通信而言，不仅仅是数据的传输，还有事件的产生；
简单一个例子展现事件
Father: @cancel = ‘father-method’
Son: @click = ‘cancel’

具名插槽

父组件
<template #title> <div>guts</div></template>
子组件
<div> <slot name="title">具名插槽</slot></div>
为什么需要插槽？- 灵活性

vue3的 v-model的变化

关于子组件传入的数据发生变化，更新父组件 v-model的数据：
this.$emit('update:xxx-xxx', this.xxxXxx)
待细看

关于键盘的enter与esc

对于某些表单只需要简单的回车就确定了： @keyup.enter = 'doSth'
对于取消表单信息只需要：@keyup.esc = 'doSth'

组合式API

为何需要组合式？

小改动：在setup中需要变量用到 ref() , 改变值需要 变量.value；
ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值：

let a = ref('zs')
function test() { a.value = 'ls'}

将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值而非引用传递的。

reactive一般复杂对象而言，修改元素就正常修改就好。

生命周期的写法:在括号内部写入方法，倾向于箭头函数写法
onMounted(() => { console.log("onMounted"); });

watch的写法：
就像我们在组件中使用 watch 选项并在 user property 上设置侦听器一样，我们也可以使用从 Vue 导入的 watch 函数执行相同的操作。它接受 3 个参数：

一个想要侦听的响应式引用或 getter 函数
一个回调
可选的配置选项
import { ref, watch } from ‘vue’
const counter = ref(0)
watch(counter, (newValue, oldValue) => {
console.log('The new counter value is: ’ + counter.value)
})

computed写法：
与 ref 和 watch 类似，也可以使用从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性。让我们回到 counter 的例子：

import { ref, computed } from ‘vue’

const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2

这里我们给 computed 函数传递了第一个参数，它是一个类似 getter 的回调函数，输出的是一个只读的响应式引用。为了访问新创建的计算变量的 value，我们需要像 ref 一样使用 .value property。

父传子

//定义属性：通过defineProps方法
let props = defineProps({ modelValue: { type: String, default: "", }, title: { type: String, default: "", }, });

代码

关于组合式API， 有内置的 defineEmits({})等方法，使用之前的也是可以的。

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, onUnmounted } from "vue"; 

//定义属性
let props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
});

//事件触发器
let emit = defineEmits({});

function submit() {
  emit("update:model-value", props.modelValue);
  emit("submit", props.modelValue);
}
function cancel() {
  emit("cancel");
}

onBeforeUnmount(() => {
  console.log("beforeUnmount");
});

onUnmounted(() => {
  console.log("unmounted");
});

</script>

路由的跳转

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()//获取上层路由传递的参数

function pushWithQuery(query) {
    //路由跳转
    router.push({
        name: 'search',
        query: { //传递query参数
            ...route.query,//上一层路由参数
        },
    })
}

了解下2级路由与路由传参等