vue3基础知识100问

官网文档一定是要拜读的https://cn.vuejs.org/guide/introduction.html

1 vue3项目启动流程

创建应用实例：使用 createApp 函数创建一个根应用实例，一个vue项目就是一个组件树，子组件都是通过路由加载到这个根组件的。

所谓的组件就是一个vue文件，里面包含了css js html.

配置应用：可以设置全局组件、指令、插件等。

挂载应用：调用 mount 方法将应用挂载到 DOM 元素上

javascript 复制代码

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 1. 创建应用实例
const app = createApp(App)

// 2. 配置应用（可选）
// app.use(router)
// app.use(store)
// app.component('MyComponent', MyComponent)

// 3. 挂载到DOM
app.mount('#app')

2 vue3生命周期

beforeCreate (选项式API) / setup() (组合式API)

created (选项式API) / setup() 完成

beforeMount

render() 执行

虚拟DOM → 真实DOM

mounted

3 组件传参

(1)父向子组件单向传参：父组件用:变量名=变量值，子组件用pros接收变量名

(2)子向父组件传参只能用emit进行事件传递，然后父组件用@监听事件=回调函数进行处理

(3)爷爷与孙子传递用provide、inject

(4)平级关系多个组件传参可以用pina，用于共享状态

4 组件明名风格

javascript 复制代码

<el-form-item label="轮播图">  短横线风格
   <ChooseImage :limit="9" v-model="form.banners"/>  首字母大写的驼峰风格
</el-form-item>

5 v-mode双向数据绑定：

V-model在父子组件中共享这个值变化，即双向绑定的意思

双向绑定：v-model = :value + @input

默认属性/事件：Vue 3 使用 modelValue 和 update:modelValue

多个绑定：支持多个 v-model:xxx 绑定 → 真实DOM mounted

javascript 复制代码

<!-- 父组件使用 -->
<template>
  <CustomInput v-model="username" />
</template>

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const username = ref('')
</script>

<!--子组件 CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

javascript 复制代码

<!-- 父组件 -->
<template>
  <UserForm
    v-model:firstName="firstName"
    v-model:lastName="lastName"
  />
</template>

<script setup>
import { ref } from 'vue'
import UserForm from './UserForm.vue'

const firstName = ref('')
const lastName = ref('')
</script>

<!-- 子组件UserForm.vue -->
<template>
  <input
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

<script setup>
defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName'])
</script>

6 setup带来哪些变化：

原先data方法返回的是包装的ref对象，现在都直接使用ref来定义对象

原先的生命周期函数，都可以通过方法形式引入，不推荐mixin

原先需要暴露的对象，直接不需要，只要在里面书写，就直接暴露给template使用

原先需要comment注册的，只要在script setup里面导入import组件，直接就能用