Vue 的生命周期
beforeCreate（Vue实例的数据观测和事件系统都未初始化） =>created（Vue实例的数据观测已经初始化，但是DOM元素还未挂载）=>beforeMount（Vue实例的虚拟DOM已经生成，但尚未替换真实DOM）=>mounted（Vue实例已经挂载到了真实的DOM上，可以访问DOM元素。）=>beforeUpdate（数据已经更新，但是DOM尚未重新渲染）=> updated（Vue实例的数据和DOM都已经更新，可以执行一些DOM相关的操作）=>beforeDestory（在Vue实例销毁之前调用，在这一阶段，Vue实例仍然完全可用。）=>destroyed（在Vue实例销毁之后调用。
在这一阶段，Vue实例及其相关的DOM已经被销毁，无法再访问。）
vue 生命周期的作用是什么?
Vue 生命周期中有多个事件钩子，让我们在控制整个 Vue 实例过程时更容易形成好的逻辑。
第一次页面加载会触发哪几个钩子?
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
简单描述每个周期具体适合哪些场景
beforecreate : 可以在这加个 loading 事件，在加载实例时触发
created : 初始化完成时的事件写在这⾥，如在这结束 loading 事件，异步请求也适宜在这⾥调⽤
mounted : 挂载元素，获取到 DOM 节点
updated : 如果对数据统⼀处理，在这⾥写上相应函数
beforeDestroy : 可以做⼀个确认停⽌事件的确认框
nextTick : 更新数据后⽴即操作 dom
vue使用自定义组件
1、创建自定义组件：
首先，你需要创建自定义组件。组件可以是单文件组件（.vue文件），也可以是普通的JavaScript文件。
2、通过import语句导入自定义组件。
3、通过components选项注册自定义组件。
Vue 路由跳转的几种方式
1、router-link
用于在Vue单页面应用中导航到不同的路由。
<router-link to="/about">About</router-link>
2、编程式导航
this.$router.push()方法进行路由跳转：
this.$router.push('/about');
3、router-view
简述 MVVM 框架
Model: 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。
View: 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。
ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。
Vue 的路由实现：hash 模式和 history 模式
hash 模式 (默认)
工作原理: 监听网页的 hash 值变化 —> onhashchange 事件, 获取 location.hash
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转
主要用在单页面应用 (SPA)
history 模式
工作原理: 主要利用 history.pushState() API 来改变 URL, 而不刷新页面.
其实一共有五种模式可以实现改变 URL, 而不刷新页面.
需要后台配置支持, 如果输入一个并不存在的 url, 需要后端配置做 “兜底配置”, 不是粗暴的返回 404, 而是返回首页
4种vue指令
v-if：判断是否隐藏；
v-for：数据循环；
v-bind:class：绑定一个属性；
v-model：实现双向绑定
v-if 和 v-show 的区别
v-if 通过控制 dom 节点的方式，添加和删除元素，进而实现显示或隐藏元素，v-show 通过设置 dom 元素的 display 来实现显示或隐藏的操作，并不会删除 dom
v-if 隐藏会将组件销毁，显示时会将其内部的监听事件重建，v-show 只是设置 display，并不会阻止子组件内部的监听事件
v-if 有着更高的切换消耗，v-show 有着更高的初始渲染消耗
W3C 标准
W3C（World Wide Web Consortium，万维网联盟）是一个制定Web标准的国际组织，它的标准旨在确保不同浏览器、设备和平台之间的互操作性，提高Web内容的可访问性和可用性。
HTML标准：
使用符合HTML规范的标签和语法，确保文档结构的正确性和清晰度。
避免使用过时的HTML元素和属性，推荐使用语义化的HTML标签来描述文档结构和内容。
CSS标准：
使用符合CSS规范的样式语法和属性，确保样式表的可读性和可维护性。
避免使用浏览器私有前缀（vendor prefix），而是优先选择标准的CSS属性和特性。
采用层叠和继承的原则，合理组织和管理样式规则，避免样式冲突和重复。
JavaScript标准：
遵循ECMAScript标准的语法和规范，确保JavaScript代码的可移植性和兼容性。
使用严格模式（strict mode）来减少错误，并使用合适的错误处理机制处理异常。
避免使用过时的JavaScript特性和API，优先选择新的Web标准和技术。
响应式设计：
使用响应式设计原则来确保网站在不同设备和屏幕尺寸下都能正确显示和良好交互。
使用CSS媒体查询来针对不同的设备和分辨率应用不同的样式，以实现自适应布局和设计。
兼容性测试：
在主流浏览器（如Chrome、Firefox、Safari、Edge等）和不同操作系统（Windows、Mac、iOS、Android等）上进行兼容性测试。
使用W3C提供的在线工具（如HTML Validator、CSS Validator等）对代码进行验证，确保符合W3C标准。
UI/UX设计
UI（User Interface，用户界面）设计关注用户与产品之间的界面交互，包括页面布局、颜色、字体、图标等。
UX（User Experience，用户体验）设计关注用户在使用产品时的整体感受和体验，包括用户需求分析、用户行为研究、用户测试等。
Ajax
Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用于创建动态网页的技术，通过在后台与服务器进行少量数据交换，实现网页的异步更新。相比传统的同步请求方式，Ajax能够在不重新加载整个页面的情况下，局部更新页面内容，提高了用户体验和页面的响应速度。
特点：
异步：Ajax请求是异步执行的，不会阻塞页面的加载和渲染，用户可以继续操作页面。
基于事件：Ajax请求是基于事件驱动的，可以通过回调函数处理异步请求的响应结果。
局部更新：Ajax可以局部更新页面的内容，无需重新加载整个页面，减少了数据传输量和页面加载时间。
工作原理：
发送请求：通过JavaScript创建XMLHttpRequest对象，然后使用该对象发送HTTP请求到服务器。
处理响应：服务器接收到请求后，处理并生成响应数据，然后将数据返回给客户端。
更新页面：客户端接收到响应数据后，使用JavaScript处理数据，并更新页面的部分内容，通常是通过DOM操作实现。
应用场景：
动态加载内容：如动态加载文章评论、新闻列表等。
表单验证：通过Ajax向服务器发送验证请求，实时检查用户输入的合法性。
单页面应用（SPA）：通过Ajax获取数据，动态更新页面内容，实现页面的无刷新加载和路由跳转。
盒模型
盒模型是CSS中用于布局的基本概念之一，指的是元素的内容、内边距、边框和外边距四个部分的组合。
内容区域（Content）：
内容区域是盒模型中最内部的部分，它包含了元素的实际内容，如文本、图片等。
内容区域的大小由元素的宽度（width）和高度（height）属性决定。
内边距（Padding）：
内边距是内容区域与边框之间的空白区域，用于控制元素内容与边框之间的间距。
可以使用padding属性设置元素的内边距大小，常见的值包括像素（px）、百分比（%）等。
边框（Border）：
边框是围绕在内容区域和内边距外部的线条，用于装饰和分隔元素。
可以使用border属性设置元素的边框样式、宽度和颜色等。
外边距（Margin）：
外边距是盒模型中最外部的部分，用于控制元素与其他元素之间的间距。
外边距在元素外部创建空白区域，可以用于调整元素在页面中的位置和布局。
响应式布局
响应式布局是一种设计和开发网页的方法，使得网页在不同设备上（如桌面、平板、手机）都能良好地显示和交互。
媒体查询（Media Queries）：
媒体查询是CSS3中的一种功能，允许根据设备的特性和属性（如屏幕尺寸、分辨率、设备类型等）应用不同的样式。
使用媒体查询可以针对不同的设备和屏幕尺寸应用不同的样式，从而实现响应式布局。
弹性布局（Flexbox）：
弹性布局是CSS3中的一种布局模型，旨在使容器内的子元素能够灵活地伸缩和排列，以适应不同尺寸的容器。
使用弹性布局可以实现自适应的页面布局，使页面元素能够根据设备的尺寸和屏幕方向自动调整和重新排列。
网格布局（Grid Layout）：
网格布局是CSS3中的另一种强大的布局模型，允许将页面划分为行和列的网格，从而更灵活地控制页面的布局。
使用网格布局可以实现复杂的页面布局，并且能够在不同设备上提供一致的布局效果。
流式布局（Fluid Layout）：
流式布局是一种相对于固定布局的布局方式，它使用百分比或者其他相对单位而不是固定单位来定义元素的宽度和高度。
使用流式布局可以使页面元素根据视口的大小自动调整大小和位置，从而适应不同尺寸的屏幕。
less&sass
Less或Sass的语法和功能，包括变量、嵌套规则、Mixin混合、函数等特性，可以使用这些特性来简化和优化CSS代码。
使用Less或Sass来模块化和组织CSS代码，将样式分解为多个文件或模块，每个模块负责管理特定的样式功能或组件，使得代码结构清晰、易于维护。
合理使用变量和Mixin混合来避免重复代码，提高代码的重用性和可维护性。例如，定义颜色、字体、间距等样式的变量，以及常用样式的Mixin混合。
使用Less或Sass的嵌套规则来简化CSS选择器的书写，提高代码的可读性和可维护性。但要注意避免过度嵌套，以免影响性能和产生样式层级过深的问题。
使用继承来减少重复的样式定义，但要谨慎使用，确保继承的样式逻辑清晰、易于理解，避免引入不必要的样式耦合和影响。
将样式按照模块或组件进行划分，每个模块或组件独立开发、测试和维护，降低代码的耦合度，便于团队协作和项目的扩展。
遵循团队或项目约定的编码规范，统一命名规范、缩进风格、注释规范等，以确保团队协作的一致性和代码的可读性。
使用Less或Sass提供的功能和工具进行代码优化和压缩，减少不必要的代码和文件大小，提高页面加载性能。
表现与数据分离
表现与数据分离是一种设计原则，旨在将应用程序的不同方面分开处理，使得各个部分之间相互独立，易于管理和维护。
在Web开发中，表现与数据分离通常指的是将网站的结构（HTML）、样式（CSS）和行为（JavaScript）分离开来，使它们各自负责不同的责任。
通过表现与数据分离，开发者可以更轻松地修改和维护代码，提高代码的可读性、可维护性和复用性，同时也便于团队协作和版本控制。
Web语义化
Web语义化是指使用具有语义的HTML标签来描述页面的结构和内容，以及使用适当的标记来表达文档的含义，使得网页在没有样式表、脚本或者屏幕阅读器等辅助工具的情况下也能够清晰地呈现给用户，并且对搜索引擎有更好的理解。
例如，使用
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
