vue中名词解释

No	名称	略写	作用	应用场景	其他
1	单页面应用 （Single-page application）	SPA	1，控制整个页面 2，抓取更新数据 3，无需加载，进行页面切换	丰富的交互，复杂的业务逻辑的web前端	一般要求后端提供api数据接口
2	单文件组件 Single-File  Components (也被称为*.vue文件)	SFC	将js，html，css封装到一个文件中	1，书写格式类似于html 2，vue文件编译后为标的javascript和css文件。 在实际项目中，一般使用SFC编译器的结构件工具比如vite或者vue cli（基于webpack）	vue的标识性功能
3	选项式API	Options API	用多个vue选项的对象来描述逻辑，如data，methods，mounted	基于组合式API构建而成	这些选项所定义的属性，可以暴露在函数内部的this上，这个this指向当前组件实例
4	组合式API	Composition API	使用导入的函数来描述逻辑 （可以大幅度的简化代码）	其中定义的变量和函数可以在template直接使用	通常使用        <script setup> 作用-告知vue如何编译
5	根组件		app.vue	它是应用中所有组件的根组件	每一个应用都会有一个根组件
6	挂载应用	.mount	参数为一个容器 app.mount(#app)	应用实例在调用此方法后才被渲染	返回值是一个根组件实例，不是应用实例
7	计算属性	computed（）		相应的功能，普通函数也可以实现，但是函数在每次渲染都会被调用，但计算属性不会，只有在响应式依赖被改变时调用	自动跟踪响应式依赖，当对象改变时，相应的计算依赖对象值都会改变
8	表单输入绑定		1，导入ref 2，定义ref 3，v-model绑定	绑定方发 import {ref} from vue const message =ref('')←初始值 <input v-mode="message" />
9	声明周期钩子函数		组件实例创建过程 1，设定数据监听 2，编译模板 3，挂载实例到DOM 4，数据变更是改变DOM 。。。。。		可以在特定阶段运行自己的逻辑代码
10	侦听器	watch（）	每次响应式状态发生变化时候触发回调函数。		深度侦听容易产生性能问题
11	模板引用		通过ref		可以直接访问DOM元素
12	组件	components	名称格式	1，传递props 2，监听事件 3，通过插槽分配内容       使用<slot>站为符号 4，动态组件     通过componet元素的is sttribute来实现。	组件可以被重复多次使用
13	组件注册		1，全局注册		缺点   1，生产环境打包的情况下无法移除 2，大型项目中不宜维护
			2，局部注册	1，<script setup> 中无需注册 2，无<script setup> import componenta form './componenta.js' expoet default{  components:{  componenta  }, }	优点， 依赖明确，打包自动移除
14	Props		外部向内部传入值		通常从父组件向子组件传递数据的时候使用
15	事件		Props 传属性（相应式） emit   传事件	命名      cameCase 例；$emit（someEvent） 使用      kebak-case 例；     some-event	prop命名相同 事件校验方式也相同。
16	透传attributes		没有被给组件声明为props emits的attribute或者事件监听器		防止继承的话，需要重新创建一个<script> inheritattrs;false
17	插槽	slots	父组件设定的网页的内容在子组件的<slots>设定位置现实。	具名插槽：N对N 动态插槽	插件内容无法访问
18	依赖注入		Provide：设定向子组件要传递的值 Inject：从父组件中接受传递过来的值		为了解决多层组件间数据传递的问题，如果使用Props会很繁琐 Provide和Inject通常在不同的组件中运行。
19	组件的公共实例上的内置属性和方法	this	非只读：$data　响应式的数据对象属性 只读： $Props   $el    实例管理的DOM的根节点 $slots  父组件传入的插槽对象 $refs  DOM元素和组件实例对象。 $attrs 组件所有透传attributes的对象 $emit   出发一个自定义事件
20	组合式函数		利用组合式API来封装和服用有状态逻辑的函数	侧重于有状态逻辑 1，有状态的逻辑 常用于管理随时间而变的逻辑状态 2，无状态的逻辑； 常用于公共的逻辑	1，命名方式； use + 驼峰命名 常使用ref作为参数，而不是reactive（） 2，组合函数在<scripte setup> setup()中，始终被同步调用 优点 1，优化代码结构
21	自定义指令	Custom Directives		官网不推荐在组件上应用自定义指令	只有功能只能通过直接的DOM操作来实现时，才应该使用自定义指令。 应尽量使用自定义指令
22	插件	Plugins	为vue添加全局功能的工具代码
23	工具链		1，构建工具 vite（官方推荐 Vue Cli基于webpack） 2，IDE  vscode volar语法高亮，props智能提示， 为typescript提供自动补全和类型检查 官方强烈推荐vscode，因为 vscode对ts有着很好的内置支持。 volar是官方的vscode扩展，v2时候使用 3，浏览器开发工具	4，测试
24	路由	在客户端执行			通过调用浏览器的api来管理当前应该渲染的页面
25	状态管理	状态 State 试图 View 交互 Action		vuex是一个状态管理库 pinia是最新的一个状态管理库，对typescript更加友好，官方推荐使用
26	测试	官方推荐使用 vitest（单元测试框架）
27	服务器端渲染	SSR	页面在服务器段渲染而不是常见的浏览器端进行渲染。		优点 1，更快的页面加载 2，更好的seo 爬虫可以直接看到完全渲染的页面
28	搭配TS使用vue		vue是使用typescript来编写的
29	vue使用方式		1，独立的js脚本 2，作为组件嵌入 3，spa应用
30	组合式API		是一个一系列的api集合	包含如下api 1，响应式api ref和reactive，直接创建相应是状态，计算属性和侦听器 2，生命周期钩子 在组件的各个周期创建逻辑 3，注入依赖	优点 1，更好的复用 2，灵活的代码组织 3，代码压缩更友好。
31	响应式系统	vue最标志性的功能就是低侵入性的响应式系统。			响应式是基于运行时的。
32	vue的渲染机制	vue的渲染机制是基于虚拟DOM来构建的	virtual DOM 简称vdom	将所需的UI通过数据结构虚拟在内存中表示出来， 并且与真实的dom保持同步	vdom概念最先由React提出
33	挂在	mount	一个运行时渲染会遍历整个vdom，并以此来构建真实的DOM树
34	渲染函数	vue模板编译后便成为了vdom渲染函数。			使用场景； 处理高度动态渲染逻辑的可重用组件中使用哦个