前端思维导图
Morpho menelaus
2025-03-05
样式绑定
列表渲染
样式绑定
不完全的前端知识点，希望大家指正
树图思维导图提供《前端》在线思维导图免费制作，点击“编辑”按钮，可对《前端》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：1628310ee9bc017ec9f2a7dac97121ee
思维导图大纲
相关思维导图模版
前端思维导图模板大纲
CSS样式
超链接样式
默认样式：
默认情况下：字体为蓝色，带有下划线
鼠标点击时：字体为红色，带有下划线
鼠标单击后：字体为紫色，带有下划线
超链接伪类（要按照顺序进行定义）
a:link 定义a元素未访问的样式
a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过a元素的样式（适用于任何元素）
a:active 定义鼠标单击激活的样式
鼠标样式
浏览器鼠标样式
使用cursor属性定义：cursor：数值；
常用：default pointer text
自定义鼠标样式
cursor：url（图片地址），属性值；
图片是.cur文件
属性值取值：default pointer text
背景样式
背景图片样式属性
background-image 背景图片地址
语法：background-image url（图片地址）；
background-repeat 定义背景图片重复方式，如纵向重复、横向重复
repeat 在水平方向和垂直方向上同时平铺（默认值）
repeat-x 在水平方向平铺
repeat-y 在垂直方向平铺
no-repeat 不平铺
background-position 定义背景图片位置
语法：background-position：水平距离 垂直距离；
取值
像素值
关键字
top left
top center
top right
left center
center center
right center
bottom left
bottom center
bottom right
background-attachment 定义背景图片是否随元素滚动
scroll 随元素滚动（默认值）
fixed 固定不动
背景颜色属性 background-color
简写：background
图片样式
图片大小 width，height
图片边框 border
图片对齐
水平对齐 text-align（在图片的父元素定义）
left
right
center
文字环绕 float
left
right
垂直对齐 vertical -align （定义：vertical-align 属性定义周围的行内元素或文本相对与该元素的垂直方式）
top 顶部对齐
bottom 底部对齐
baseline 基线对齐
middle 中部对齐
表格样式
caption-side 表格标题位置（在table元素中定义）
top 标题在顶部（默认值）
bottom 标题在底部
border-collapse 表格边框合并（在table元素中定义）
separate 边框分开，有空隙（默认值）
collapse 边框合并，无空隙
border-spacing 表格边框间距（在table元素中定义）
列表样式
列表项符号：list-style-type
取值---有序列表
decimal 阿拉伯数字：1、2、3...（默认值）
lower-roman 小写罗马数字：i，ii，iii...
upper-roman 大写罗马数字：I、II、III...
lower-alpha 小写英文字母：a，b，c...
upper-alpha 大写英文字母：A，B，C...
取值---无序列表
disc 实心圆 ●
circle 空心圆○
square 正方形■
取值---none
去除列表项符号
列表项图片：list-style-image
list-style-image:url（图片路径）
边框样式
整体样式
想要为一个元素定义边框样式，必须同时设置border-width，border-style，border-color才会有效果
border-width 定义边框的宽度
border-style 定义边框的外观
none 无样式
dashed 虚线
solid 实线
border-color 定义边框的颜色
简写：border:1px solid red；
局部样式
border-top
border-bottom
border-left
border-right
文本样式
text-indent 首行缩进
text-indent ：像素值；
text-align 水平对齐
left 左对齐
right 右对齐
center 居中对齐
text-decoration 文本修饰
none 去除所有的划线效果
underline 下划线
line-through 中划线
overline 下划线
text-transform 大小写转换
none 无转换（默认值）
uppercase 转换为大写
lowercase 转化为小写
capitalize 只将每个英文单词首字母转换为大写
line-height 行高
letter-spacing 字母间距
word-spacing 词间距（针对于英文单词）
字体样式
font-family 字体类型
可以指定多个字体；不定义默认是宋体
font-size 字体大小
font-weight 字体粗细
取值
100-900的数值（不建议）
关键字
normal 正常（相当于数值400）
lighter 较细（相当于数值100）
bold 较粗（一般只用这个）（相当于数值700）
bolder 很粗（相当于数值900）
font-style 字体风格
normal 正常
italic 斜体
oblique 斜体
有的字体有italic 属性，有的字体没有。oblique让没有italic 属性的字体也能有斜体效果
color 字体颜色
子主题 9
JavaScript
html
html5新增的元素
常见的面试题
html4与html5的区别
1.语义化标签
多媒体支持
绘图和图形
表单控件
API增强
移除过的元素
兼容性和跨平台性
w3c
万维网（WWW）的发明者蒂姆·伯纳斯-李爵士（Sir Tim Berners-Lee）创立
W3C的使命是领导Web技术的发展，制定并推广开放Web标准，确保Web的长期稳定发展及其在全球范围内的普遍可用性。
什么是web?
Web，全称为World Wide Web（全球广域网），也被广泛称为万维网，是一种建立在Internet（互联网）之上的信息系统的应用形式。Web的核心特点是基于超文本（Hypertext）和超媒体（Hypermedia）技术，它允许用户通过点击超链接（Hyperlinks）在不同网页之间自由跳转，从而便捷地浏览和获取信息。
web的组成部分
网页（Web Pages）
超链接（Hyperlinks）
浏览器（Web Browsers）
HTTP（HyperText Transfer Protocol）
统一资源定位符（URLs）
Web服务器（Web Servers)
对Web标准的理解
结构
HTML
CSS
行为
JavaScript是一种脚本语言
给网页增加了交互性和动态功能，可以响应用户操作，实现数据验证、动画效果、异步数据加载等功能。ECMAScript是JavaScript的标准规格，由ECMA International组织制定。
W3C也提出了DOM
定义了如何通过JavaScript操作HTML文档以及与浏览器交互的方法。
可访问性
WAI-ARIA
规定了增强Web应用可访问性的最佳实践，确保残障人士能够使用辅助技术无障碍地访问网页内容。
拓展
XML、SVG、JSON等其他标准和协议，共同构建了Web开发的基础框架
学习HTML5的三个理由
为啥要学习HTML5
HTML4与HTML5的对比
学习HTML5三大理由
跨平台兼容性
使开发者能够创建多种设备上无缝运行web应用和网站
强大且统一的API
引进了一系列丰富的API，比如有Canvas绘图、多媒体支持（无需插件即可播放视频和音频）、离线存储、地理位置等
语义化和可访问性增强
新增的语义化标签<header><footer><nav>等 ，有利于搜索引擎化，也能提高内容的可读性和无障碍访问性
<!DOCTYPE>元素
Title元素 (`<title>)
Meta元素 (`<meta>)
Link元素 (`<link>)
Script元素 (`<script>)
Base元素 (`<base>)
定义页面中所有链接（href属性）的基址或默认打开方式。
<base href="https://example.com/" target="_blank">
Style元素 (`<style>)
HTML5新增内容
1.语法的改变
1.内容类型
文件后缀还是.html|.htm，ContentType依然是“text/html"
2.字符编码
3.标记
单标记（空元素）
<hr>、<br>、<img>、<input>
双标记
在HTML 5中，元素的标记有些可以省略。具体来说，元素的标记分为“**不允许写结束标记**”、“**可以省略结束标记**”和“**开始标记和结束标记全部可以省略**”三种类型。让我们来针对这三类情况列举一个元素清单，其中包括HTML 5中的新元素
不允许写结束标记的元素有:area、base、br、col、command、embed、hr、imginput、keygen、link、meta、param、source、track、wbr.
可以省略结束标记的元素有:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th.
可以省略全部标记的元素有:html、head、body、colgroup、tbody。
属性
布尔属性
<!-- 只写属性不写属性值代表属性为true -->
<input type="button" disabled>
<input type="text" readonly>
<input type="checkbox" checked>
<!-- 不写属性代表属性为false -->
<input type="checkbox">
<!--属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串，代表属性为true-->
<input type="checkbox" checked="">
2.新增的结构元素
1.article元素：用于表示文档、页面或应用程序中独立、完整且可以**单独被外部引用的内容**，如博客文章、新闻报道、论坛帖子等。
2.section元素： 用来对页面内容进行**逻辑分区**,**章节**，通常包含一个主题性的内容片段和关联的标题。
3.nav元素：一个可以用来作为**页面导航的链接组**，其中的导航元素链接到其他页面或当前页面的其他部分。
4.1. aside元素：用来表示当前页面或文章的附属信息部分，它可以包含于当前页面或主要内容相关的引用。侧边栏，广告，导航条，以及其他类似的有别于主要内容的部分。
3.新增的其他元素
4.废除的元素
5.废除的属性
6.新增的表单元素
HTML5新增的内容
表单元素
canvas绘制图形
多媒体元素
本地存储
HTML4
基本结构标签（骨架）
“<html></html>”HTML标签
页面中最大的标签，亦称“根标签”
“<head></head>”文档的头部
在head标签中必须包含title标签
"<title></title>"文档的标题
“<body></body>”文档的主体
notebook中写的代码，最后另存为html格式就能打开，显示body中的文字“牛逼plus”
语法规范
html标签是由尖括号包围的关键词如<html>，通常成对出现如<html></html>。第一个是开始标签，第二个是结束标签，结束标签比开始标签多一个反斜杠“/”。也有极少数特殊情况，为单标签，如<br/>，关键词后有“/”结束标志。
标签之间的关系
包含（嵌套）
并列
布局
表格标签
作用：显示、展示数据
基本语法
<table></table>用于定义表格
<tr></tr>用于定义表格中的行，必须嵌套在table标签中
<td></td>用于定义表格中的单元格，必须嵌套在tr中
表头单元格标签
<th></th>加粗居中显示
表格的相关属性
align
对齐方式
border
边框，默认为""无边框
cellpadding
单元格边沿与内容之间的空白，默认1像素
cellspacing
单元格之间的空白，默认2像素
width/height
表格的宽/高度
表格结构标签
头部：<thead>
内部必须有<tr>标签，一般位于第一行
主体：<tbody>
合并单元格
方式
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
目标单元格
跨行：最上侧的单元格
跨列：最左侧
步骤
确定合并方式
找目标单元格，写合并代码，如<td colspan="2"></td>
删除多余的单元格
列表标签
作用：布局
无序列表
有序列表
自定义列表
表单标签
作用：收集用户信息
组成
表单域
<form>用于定义表单域，<form>标签会将范围内的表单元素提交给服务器
常用属性
属性
属性值
作用
action
url地址
用于指定接收并处理数据的服务器的url地址
method
C
提交数据的方式，其取值为get或post
name
名称
用于指定表单的名称，以区分同一个页面中的多个表单域
表单元素
input输入表单元素
<input type="属性值" name="属性值" value="属性值" />（单标签）
select下拉表单元素
<select>
<option>A</option>
<option>B</option>
</select>
<option>中定义selected="selected"则此选项被默认选中
textarea文本域
<textarea cols="50"(每行可显示50个字符) rows="10"（可显示10行）>
文本内容
</textarea>
<label>用于绑定一个表单元素
<label for="man"> 男：</lable>
<input type="radio" name="sex" id="man"/>
HTML的注释和特殊字符
注释：给程序员看的，不显示在页面中：
<!--注释语句--> 快捷键：ctrl+/
特殊字符：一些符号很难或不方便直接使用时用特殊字符来代替
如：在网页中想显示"<p>"，需要改为“< p >”再比如空格为 
HTML常用标签
标题标签
共分六个等级即<h1>-<h6>（h为head的缩写）
作用：作为标题使用，并依据重要性递减，一级最重要
<h1>标题标签均为双标签，有结束标签。</h1>
效果：文字加粗加大，且独占一行
段落标签
将文字分段显示
<p>段落</p> “一段一P”
段与段之间有较大的间隔
换行标签（单标签）
强制换行
这是要换的行<br/>
只有行距，没有较大的间隔
文本格式化标签
加粗
<strong></strong>或<b></b>
斜体
<em></em>或<i></i>
删除线
<del></del>或<s></s>
下划线
<ins></ins>或<u></u>
<div>和<span>标签
无语义，相当于收纳盒，用来装内容
<div>表示分区，独占一行为一个区</div>
<span>表示跨度</span><span>一行可以有多个</span>
图像标签
<img src="图像URL"/>
单标签
src是<img/>的必须属性，用于指定文件的路径和文件名
<img/>的其他属性
alt
当图像不能正常显示时所显示的文字
title
鼠标放到图片上时所显示的文字
width / height / border
设置图像的宽度/高度/边框粗细
格式：<img+空格+属性="属性值"+空格+属性="属性值"+......+/>属性不分先后，属性之间必须加空格
超链接标签
从当前网页跳到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式" 文本或图像 </a>
href:用于指定链接目标的url地址
target:用于指定链接页面的打开方式，其中"_self"为当前页面打开，"_blank"为在新窗口中打开
链接分类
外部网站
内部链接：网站站点内部页面的相互链接
空链接：herf="#"
下载链接：herf="***.zip/doc/exe"
锚点链接：快速定位到网页中的某个位置
步骤：1.属性设置#名字的形式如<a href="#名字">他的名字是</a>
2.目标位置的标签里添加id属性=名字 如<h1 id="名字">小猪佩奇</h1>
基础
路径
目录文件夹和根目录
目录文件夹：普通文件夹，收纳了做网页相关的所有素材，如html文件、多媒体文件等
根目录：打开目录文件夹的第一层
相对路径：以“引用文件”为参考建立出的目录路径
同级路径 <img src="img.jpg" />
下一级路径 <img src="images/img.jpg" />
上一级路径 <img src="../img.jpg" />
绝对路径:在电脑中的位置或网络中的地址
<img src="D:\.....\...\....\img.jpg" />或
<img src="http://www.*******.com/.../logo.jpg" />
用vscode创建html文件
打开VS code，新建文件（Ctrl+N），保存(Ctrl+S)为“.html”文件,输入“！”，按下Tab键
或者新一点的版本可以直接创建html文件
ES6
变量
let
const
用es5实现const，通过修改属性描符writable:
writable属性不可以被修改
configurable属性不可被删除，属性描述符不可被修改
enumerable属性不可被遍历
value属性的值
set
get
vue兼容到ie8，因为ie8不支持defineProperty
Object.defineProperty(obj,'a',{writable:false})
函数内的块级作用域：闭包
作用：实现模块化
缺点：造成内存泄漏
箭头函数
箭头函数，this指向定义时的作用域
普通函数，this指向调用时的作用域
数组和对象
判断是否是数组：Array.isArray
把伪数组转化为数组：Array.from()||[...]Array.prototype.slice.call()
对象的解构：let{callback}=this.props
对象的合并：Object.assign({},{a:1},{b:2})
最简单的深拷贝：JSON.strigify==>JSON.parse()只能处理对象，处理不了数组
promise
三个状态
初始化状态：pennding
完成状态：resolved
拒绝状态：rejected
二个参数
由pendding变为resolved时调用resolve方法
由pennding变为rejected时调用reject方法
四个方法
把promise合在一起：Promise.all()
任意一个promise完成即可：Promise.race()
生成一个状态立刻由pennding改为resolved的promise：Promise.resolve()
生成一个状态立刻由pennding改为reject的promise：Promise.rejected()
错误捕捉：catch
链式调用，只需直接返回常量即可
原生实现promise：利用setTimeout把同步操作变成异步操作
async/awiat
异步函数：会阻塞代码的执行
awiat一个promise这个表达式的执行结果就是resolve的参数
错误捕获：try/catch捕获错误
generator
异步函数，前面带个*
用yield修饰异步操作
第一次调用，返回一个迭代器
调用迭代器的next方法，继续往下执行，遇到yield语句或者return结束
yiled表达式的返回值，下一次调用next传进来的参数
class
面向对象OOP(Object Oriented Programing)
es6 class
特点
重载
抽象
继承
封装
es5函数+原型链
继承：extends
js只有单继承
super关键字
super()，作为函数的时候，实现继承，拷贝父类，返回子类的this
super.render()，作为对象的时候指向父类，this指向子类
静态属性和静态方法，不需要实例化即可调用
静态属性写在类的外面
静态方法用static修饰
模块和解构
模块的导入/导出
export function getData(){}
import {getData} from '…'
export default
import getData
export * from '…'
require.js
两个参数，define
数组：依赖列表
函数：注入前面的依赖作为函数参数
common.js
导出：module.exports
导入：require
Vue2核心知识
Vue实例
new Vue(options)
el
指定Vue实例挂载的元素，可以是一个CSS选择器字符串，或一个DOM元素。
data
定义数据
1. 值可以为对象，也可以为函数，但组件中必须是函数。
2. data中尽量不要用箭头函数。
3. data中后续动态添加的新属性，Vue将无法监听这些属性的变化（不是响应式的），可以使用$set()解决该问题。
props
接收父组件传递的属性
子组件不能直接修改接收到的props的值——单项数据流。
三种接收方式
1. 仅接收
2. 接收的同时：限制类型
type
3.接收的同时：限制类型、限制必要性、指定默认值
type
required
default
methods
定义方法
Vue所管理的函数，不要用箭头函数定义。
非Vue所管理的函数，一般用箭头函数定义。
this指向
组件中：this是组件实例对象。
vm中：this是vm。
computed
计算属性
根据已有的数据计算得出新的属性值。
基于依赖进行计算。
内部具有缓存机制。
对比methods
计算属性依赖的内容发生变更时，才会重新计算。而方法是只要页面重新渲染，就会重新调用执行。
计算属性可以有getter和setter方法，可以通过setter方法来对计算属性进行修改，但使用频率不高。
watch
用于监听数据
被监视的可以是：data、computed、props等。
配置深度监视可以监测对象内部属性的改变。
与computed的对比
computed返回一个计算后的值，而watch没有返回值，它主要用于执行一些逻辑操作，例如异步请求数据等。
template
用于定义Vue实例的模板。
MVVM模型
模型（Model）
可以是：从服务器获取的数据、本地存储的数据。
视图（View）
视图通常由HTML模板表示，用于将模型的数据渲染到视图上。
视图模型（ViewModel）
视图和模型之间的桥梁，它负责处理视图和模型之间的通信和交互。
模板语法
插值语法
在模板中输出变量，可以写JavaScript表达式。例如：{{1+2}}，{{a}}，{{str.toUpperCase()}}，但不能写语句。
指令语法
v-model
基本使用
用于输入类DOM元素，实现双向数据绑定。可以实现表单元素值的双向同步。
进阶使用
用在组件标签上，是一种组件通信方式。
v-bind
简写为：将Vue实例的数据，绑定到元素的属性上。绑定的数据可以是属性或计算属性。
v-if、v-else、v-else-if
用于根据条件来添加或移除元素。
v-show
根据条件来控制元素的显示和隐藏。通过修改元素的display CSS属性来实现，元素始终存在于DOM中。
v-for
用于循环渲染列表中的元素，下面的【列表渲染】中会详细说。
v-on
简写为@，用于监听DOM事件，并触发Vue实例中对应的方法，可以通过指令参数传递事件名，也可以使用修饰符来对事件进行处理，下面的【事件处理】中会详细说。
v-text
用于将数据渲染到元素的文本内容中。v-text会将数据转换为字符串，而v-html会解析数据中的HTML标签。
样式绑定
class样式绑定
字符串写法
:class="xxx"，要绑定的样式，类名不确定。
对象写法
:class="{active:xxx}"，要绑定的样式，个数确定、类名确定，但不确定用不用。
数组写法
:class="[xxx,xxx,xxx]"，要绑定的样式，个数、类名都不确定。
style样式绑定
字符串写法
:style="xxx"，字符串写法。
对象写法
:style="xxx"，对象写法适用于：样式的属性名确定，但值不确定。
数组写法
:style="xxx"，对象写法适用于：样式的属性名确定，但值不确定。
列表渲染
v-for
遍历数组
<li v-for="(item,index) in arr" :key="index"> {{item}} </li>
遍历对象
<li v-for="(value,key,index) in car" :key="index"> {{value}} - {{key}} - {{index}}</li>
遍历字符串
<li v-for="(char,index) in str" :key="index"> {{char}} - {{index}} </li>
遍历指定次数
<li v-for="(number,index) in 10" :key="index"> {{number}} - {{index}} </li>
特殊情况（均不报错）
<h1 v-for="(a,b) in null">尚硅谷</h1>
<h1 v-for="(a,b) in undefined">尚硅谷</h1>
<h1 v-for="(a,b) in '' ">尚硅谷</h1>
<h1 v-for="(a,b) in true ">尚硅谷</h1>
key的作用
提高性能
key属性帮助Vue跟踪每个节点的身份，当数据发生变化时，Vue可以更准确地确定哪些节点是新创建的、被修改的或被删除的。Vue通过比较新旧节点的key来最小化DOM操作，提高性能。
注意点
key具有唯一性，最好使用唯一的标识符，若后续有破坏顺序的操作，一定要避免使用随机数或索引值。
数组更新检测
Vue中操作数组，一定要用这7个数组的变更方法
push
unshift
pop
shift
sort
reverse
splice
事件绑定
事件绑定
使用 v-on:xxx 或 @xxx 绑定事件，xxx是事件名，同原生 DOM 事件名。
事件对象
Vue在触发事件回调时，会主动的给我们传入一个参数 —— event（事件对象）。
事件传参
不传递参数
@click="show" ，show 方法会收到一个event（事件对象）。
传一个参数
@click="show(6)" ，show方法只会收到一个6。
传多个参数
@click="show(6,7,8)" ，show方法会收到：6、7、8。
传参+事件对象
@click="show($event,6)"，show方法会收到：event、6。
事件修饰符
.stop
阻止事件冒泡。使用.stop修饰符可以阻止事件向上冒泡，即停止事件传播到父元素。
.prevent
阻止默认事件。使用.prevent修饰符可以阻止元素的默认行为，例如阻止表单提交或链接跳转等。
.once
只触发一次事件处理函数。使用.once修饰符可以确保事件处理函数只执行一次，之后会自动解绑。
键盘事件别名
回车 => enter
删除 => delete （退格 、 删除 按键）
退出 => esc
空格 => space
换行 => tab（必须配合keydown去使用）
上 => up
下 => down
左 => left
右 => right
生命周期
何为生命周期？
在特定时刻自动执行的函数，(又称周期函数、钩子函数)
整体流程
1. beforeCreate
在初始化之前执行的函数
2. Created
在初始化之后执行的函数
3. beforeMount
在组件内容被渲染到页面之前自动执行的函数
注意：此时无法找到任何模板DOM节点
4. mounted
在组件内容被渲染到页面之后自动执行的函数
5. beforeUpdate
在数据将要变化之前自动执行的函数
6. updated
在数据发生变化之后自动执行的函数
7. beforeUnmount
在VUE实例销毁之前自动执行的函数
8. unmounted
在VUE实例销毁之后自动执行的函数
整体图示
子主题1
组件化
什么是组件？
每个组件都有自己的结构、样式和行为，并且可以在应用程序中独立使用或与其他组件组合在一起形成更大的功能。组件具备复用性，可以使用多次。
定义组件
Vue.extend(options)
其中的options和new Vue(options)几乎一样，但也有点小区别：
① 组件配置中不能写el。
② 组件配置中data必须写成函数。
全局组件
注册方式：Vue.component('组件名'，{})。
特点：全局组件只要定义，随处可以使用。
局部组件
注册方式：在父组件里new Vue({components:{Hello:Hello}})。
特点：只能在其父组件中使用。
关于组件名
一个单词组成
第一种写法：(首字母小写)：school
第二种写法：(首字母大写，推荐)：School
多个单词组成
第一种写法：kebab-case命名，例如：atguigu-school
第二种写法：CamelCase命名，例如：AtguiguSchool
VueComponent
组件的本质是一个构造函数，名为VueComponent
VueComponent是Vue.extend()生成的
Vue 和 VueComponent 的关系
子主题1
slot插槽
默认插槽
父组件写法
<Hello><span>你好啊</span></Hello>
子组件写法
<slot>default value</slot>
具名插槽
概念：一个组件里，可以设置多个插槽，然后在父组件里可以写多个<template>来填充这些插槽。
父组件
<template slot="header">
子组件
<slot name="header"></slot>
作用域插槽
当子组件的具体标签输出方式，要有父组件决定时，可以使用作用域插槽。
父组件
<Game>
<template scope="parmas">
<span>{{parmas.games}}<span>
</template>
</Game>
子组件
<slot :games="games"></slot>
mixin 混入
什么是混入
混入（mixin）是一种用于在多个组件之间共享代码的技术。使用混入，您可以定义一组可重用的逻辑，然后将其混入到需要该逻辑的组件中。这样可以避免代码重复，提高代码的可维护性和可重用性。
优先级
数据和方法：组件data ，methods 优先级高于mixin data，methods优先级。
生命周期：生命周期函数，先执行mixin里面的，再执行组件里的。
自定义的属性、组件中的属性、优先级高于mixin属性的优先级。
局部mixin
mixins:[myMixin]
全局mixin
Vue.mixin( )
特别注意：Vue3中尽量避免使用mixin，因为可以使用CompositionAPI来代替，可维护性更高。
Vue3核心知识
核心特性
组合式API
set()函数
ref/reactive响应式API
computed/watch
生命周期钩子变化
更好的TypeScript支持
性能优化(Tree-shaking支持更好)
响应式系统
vue3和vue2的区别
vue3:Proxy实现
支持Map/Set等数据结构
自动检测深层变化
vue2:Object.defineProperty
数组变异方法
需要$Set处理新属性
生命周期变化
beforeDestory --> beforeUnmount
destoryed --> unmount
新增renderTracked/renderTriggered(调试用)
查看更多
相似思维导图模版
首页
我的文件
我的团队
个人中心