前端面试（2024/10/30，10/31，11/6）

面试1 2024/10/30

1.对echarts熟悉吗，数据是怎么结合

ECharts的基本使用方法

1. ‌引入ECharts库‌：首先需要在HTML文件中引入ECharts的JavaScript文件。可以通过下载echarts.js文件或使用CDN链接来引入。
2. ‌准备容器‌：在HTML中准备一个用于显示图表的容器（通常是一个<div>元素）‌。
3. ‌初始化ECharts实例‌：使用echarts.init()方法初始化一个ECharts实例，并将该实例绑定到容器上‌。
4. 配置图表选项‌：通过设置各种配置项（如标题、图例、坐标轴、数据等）来定义图表的样式和内容‌。
5. 渲染图表‌：将配置项应用到ECharts实例上，ECharts会自动渲染图表
   ECharts的数据结合方式

在ECharts中，数据是通过配置项中的series属性来结合的。series属性定义了图表的数据源和图表类型。
‌

2.请求数据的时候用的是什么，什么协议，http还是https，数据是实时的吗，大屏实时更新是怎么做的（从网络方面回答，websoket还是http）

axios
https://blog.csdn.net/weixin_46599489/article/details/127614827

请求协议axios
websorket 网络方面

http: 超文本传输协议（Hypertext Transfer Protocol，HTTP），是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。

Vue大屏数据可视化怎么实时更新的问题可以通过以下几种方法实现：WebSocket、API轮询、Vue的生命周期钩子函数。推荐使用WebSocket，因为它能够提供低延迟、双向的实时通信，非常适合实时数据更新的需求。WebSocket可以保持客户端与服务器之间的长连接，在服务器数据发生变化时，立即推送更新数据给客户端，从而实现实时数据更新效果。

https://www.fanruan.com/blog/article/207055/

3.用户权限范围内，路由和按钮

权限
https://www.cnblogs.com/jocongmin/p/18231880

4.token有效期（单令牌，双令牌）

在Vue应用中处理token的有效性通常涉及到双令牌策略，即使用两个令牌：一个是当前有效的令牌（access token），另一个是在后台刷新令牌（refresh token）。

当access token过期时，你可以使用refresh token去后台请求一个新的access token。这里是一个简化的例子：

// 假设你有一个函数来处理API请求
function apiRequest(url, token) {
  // 添加token到请求头
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  return axios.get(url);
}
 
// 用于刷新令牌的函数
function refreshToken(refreshToken) {
  const refreshTokenUrl = 'your-refresh-token-endpoint';
  return apiRequest(refreshTokenUrl, refreshToken)
    .then(response => {
      // 假设响应包含新的access token和refresh token
      const newAccessToken = response.data.accessToken;
      const newRefreshToken = response.data.refreshToken;
      // 更新全局token或者本地存储
      updateTokens(newAccessToken, newRefreshToken);
      return newAccessToken;
    });
}
 
// 更新token的函数
function updateTokens(accessToken, refreshToken) {
  // 更新全局变量或本地存储
  // 例如：localStorage.setItem('accessToken', accessToken);
  // localStorage.setItem('refreshToken', refreshToken);
}
 
// 拦截器处理token过期
axios.interceptors.response.use(null, (error) => {
  // 假设401是token过期的状态码
  if (error.response.status === 401) {
    const refreshToken = localStorage.getItem('refreshToken');
    return refreshToken(refreshToken)
      .then(newAccessToken => {
        // 重新发送原始请求
        error.config.headers['Authorization'] = `Bearer ${newAccessToken}`;
        return axios(error.config);
      })
      .catch(() => {
        // 刷新令牌失败，可能需要重定向到登录页面
      });
  }
  return Promise.reject(error);
});

在上述代码中，我们定义了一个refreshToken函数来处理令牌刷新，并在axios的响应拦截器中处理了令牌过期的情况。如果access token过期，我们会尝试使用refresh token去获取新的access token，并更新存储的令牌。如果刷新令牌也过期，则可能需要重定向用户到登录页面。

5.vue router 怎么控制权限，路由排列顺序，404的位置，放在前面，404匹配的规则，通配符

路由列表里面有常量路由和非常量路由，排列路由，404匹配的规则

在Vue Router中控制权限通常是通过导航守卫来实现的。你可以在全局前置守卫中判断用户是否有权限访问某个路由。如果没有权限，可以重定向到登录页面或者一个错误页面。

关于路由排列顺序，Vue Router 不强制要求你以特定顺序声明路由。通常，你可以根据应用的需求来安排路由的顺序。

关于404页面，通常你会将一个路由配置为通用的路径（如*），然后将其重定向到404页面。将404页面放在路由配置的最前面，确保如果请求的路径没有匹配到任何已定义的路由，Vue Router 能够首先尝试匹配404页面。

下面是一个简单的例子，展示如何设置Vue Router来控制权限和配置404页面：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import NotFound from './views/NotFound.vue';
 
Vue.use(Router);
 
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    // 404 page should be the last route
    {
      path: '*',
      name: '404',
      component: NotFound
    }
  ]
});
 
// Global before each route guard
router.beforeEach((to, from, next) => {
  // Check for authentication for non-public routes
  if (to.matched.some(record => record.meta.requiresAuth) && !isUserAuthenticated()) {
    // User is not authenticated, redirect to login page
    next({ path: '/login', query: { redirect: to.fullPath } });
  } else {
    // Continue to the target route
    next();
  }
});
 
function isUserAuthenticated() {
  // Your logic to check if the user is authenticated
  return true; // or false
}
 
export default router;

在这个例子中，我们定义了一个全局前置守卫，在每次路由跳转前检查目标路由是否需要认证。如果需要，用户没有认证，则重定向到登录页面。404页面是作为最后一个路由配置的，这样如果其他路由都无法匹配时，Vue Router 会显示404页面。

6.中缀表达式

‌中缀表达式是一种通用的算术或逻辑公式表示方法，操作符位于两个运算数之间，例如表达式3 + 4的中缀形式为3 + 4‌。这种表示方法符合人类的运算习惯，但不利于计算机解析，因为计算机需要处理括号和运算符的优先级。

‌中缀表达式转后缀表达式的过程‌需要使用栈来辅助转换。首先，从左到右遍历中缀表达式的每个字符：

• 遇到数字时，将其压入栈中。
• 遇到运算符时，需要比较其与栈顶运算符的优先级。如果当前运算符的优先级高于栈顶运算符，则将当前运算符压入栈中；否则，弹出栈顶运算符并将其加入到后缀表达式中，直到当前运算符的优先级高于栈顶运算符或栈为空。
• 遇到左括号时，直接压入栈中；遇到右括号时，弹出栈中的左括号，并将其加入到后缀表达式中。
• 遍历结束后，将栈中剩余的运算符依次弹出并加入到后缀表达式中。

通过这种方式，可以将中缀表达式转换为后缀表达式，使其更适合计算机处理。

面试2 2024/10/31

1vue开发中常见的问题及解决方案

https://blog.csdn.net/lpw_cn/article/details/135275425

vue项目有什么难点

vue后台项目中遇到的技术难点以及解决方案

开发vue项目都遇到过哪些问题怎么解决的

echarts形成缩略图

vue中使用代码编辑器 vue2-ace-editor

vue 使用vue-json-viewer 展示 JSON 格式的数据

echarts中heatmap热力图和scatter散点图互不影响展示

echarts-热力图+高亮+轨迹

echatrs-地图，根据数据进行点状显示和指向

tree-transfer

使用docx-preview插件预览docx后缀文件、预览HTML文件

js中监听sessionStorage和localStorage的变化

el-cascader添加全选，设置全选、不选、半选

vue项目刷新当前页面-推荐

解决—el-input第一次回车会刷新页面

前端vue 导出 xlsx（后端只需要提供列表数据）

通过点击左侧的树获取人员列表，将选中的人员回显到已选择部分（树，多选框）

1.前端预览，电脑上没有word怎么预览

https://blog.csdn.net/st646889325/article/details/141713764

2.下载调用接口后，浏览器怎么识别返回的文件流

可以使用axios库下载文件流。具体步骤如下：
后端通过URL地址或API接口将文件流传递给前端。
前端使用axios库发送GET请求，获取文件流数据。
在响应拦截器中获取文件流数据，并创建一个Blob对象。
创建一个a标签，设置它的href属性为Blob URL，download属性为文件名，触发点击事件进行下载。

3.从技术角度难度最高的项目

哪些系统哪些功能

4.vue框架的认识

vue框架的认识
Vue.js 是一个构建用户界面的渐进式框架。它的核心库主要关注视图层，非侵入式设计，它可以与其他库或已有项目整合。

Vue的主要特点包括：

• 响应式数据绑定和组件系统。
• 解耦视图和数据，它允许你在一个普通的JavaScript对象上进行声明式渲染。
• 使用虚拟DOM和增量DOM渲染，提供高效的DOM更新。
• 使用单文件组件，组件内包含HTML、CSS和JavaScript，使得开发过程更加清晰、高效。
• 使用路由和状态管理的插件，可以轻松实现复杂的单页面应用。

5.vue使用的是单应用界面还是多应用界面，多应用界面怎么用

Vue 通常用于构建单页面应用（SPA），但是如果你需要构建多页面应用的话，也可以使用 Vue。以下是实现多页面应用的一些建议：

• 创建多个 Vue 实例

为每个页面创建一个 Vue 实例，这样每个页面都可以拥有自己独立的 Vue 实例，它们之间不会相互影响。在每个页面上，你可以使用 Vue 组件来组织和管理该页面的所有逻辑。

• 使用路由管理多页面

在每个页面上，你可以使用 Vue Router 管理路由。在这种情况下，每个页面就相当于一个子路由。你可以使用不同的路由来实现每个页面的页面切换和导航。

• 共享组件和逻辑

如果你需要在多个页面上使用相同的组件和逻辑，可以将它们提取到单独的文件中，并在多个页面中导入它们。

• 使用 webpack 打包多页面应用

如果你使用 webpack 打包应用程序，可以配置多个入口文件来生成多个页面。每个入口文件都是一个独立的 Vue 实例，可以为每个页面提供独立的逻辑和组件。

总之，使用 Vue 实现多页面应用的关键是要将每个页面视为一个独立的实例，并且使用路由管理页面之间的导航。虽然这需要更多的工作，但它可以为你带来更好的灵活性和可维护性。

Vue 通常被用于构建单页面应用程序，但是也可以使用 Vue 来构建多页面应用程序。下面是一些步骤：

• 创建一个多页面应用程序的基本结构。每个页面都需要一个 HTML 文件、一个对应的 JavaScript 入口文件以及一个 CSS文件。在这个结构之中，每个页面的 Vue 实例可以在 JavaScript 文件中定义。
• 配置 Vue Router。使用 Vue Router 可以让你在多个页面之间切换，同时也可以共享状态。这是使用 Vue进行多页面应用程序开发的一个重要工具。
• 在每个页面的 HTML 文件中引入各自的 JavaScript 入口文件。在这些文件中，你需要创建 Vue 实例，并将其挂载到对应的HTML 标签上。这些实例需要在 Vue Router 中注册。
• 使用 Vue CLI 来构建多页面应用程序。Vue CLI可以自动为你生成多个页面，同时也提供了一些其他的功能，如代码分割、性能优化等等。

总结：使用 Vue 创建多页面应用程序需要一些额外的工作，但是这些工作可以使你的应用程序更易于维护，更容易扩展。使用 Vue Router 可以允许你在多个页面之间切换，并且使用 Vue CLI 可以加速你的开发过程。

6.vue2和vue3的区别

核心区别
‌双向数据绑定原理‌：‌Vue2使用Object.defineProperty，而‌Vue3使用‌:Proxy。Proxy可以监听对象和数组的变化，而Object.defineProperty只能监听某个属性，不能对全对象监听。‌
‌生命周期钩子‌：Vue2有11个生命周期钩子，Vue3有13个，包括setup、onBeforeMount、onMounted等。

‌API‌：Vue2使用选项式API，Vue3使用组合式API，主要通过setup函数定义数据和方法。
‌支持碎片化‌：Vue2中模板只能有一个根节点，Vue3可以有多个根节点。

‌‌v-for和v-if的优先级‌：Vue2中v-for的优先级高于v-if，Vue3中v-if的优先级高于v-for。

双向数据绑定原理

Vue2使用Object.defineProperty来实现数据的双向绑定，通过getter和setter来实现数据的监听。而Vue3使用Proxy，可以监听对象和数组的变化，效率更高。

生命周期钩子

Vue2有11个生命周期钩子，而Vue3有13个，包括setup、onBeforeMount、onMounted等。这些钩子在组件的不同阶段被调用，用于执行特定的逻辑。

API
Vue2使用选项式API，数据和方法分别定义在data和methods中。Vue3使用组合式API，主要通过setup函数定义数据和方法，使得代码更加集中和简洁。

支持碎片化
在Vue2中，模板中只能有一个根节点。而在Vue3中，模板可以有多个根节点，这有利于减少内存的使用。

v-for和v-if的优先级
在Vue2中，v-for的优先级高于v-if，这可能导致性能问题。而在Vue3中，v-if的优先级高于v-for，这避免了不必要的虚拟DOM的生成和删除。

7.vite和webpack的区别，vite和webpack做过哪些配置和优化

‌vite和webpack在构建速度、开发体验和项目规模等方面存在显著区别。‌

首先，在构建速度方面，vite通常比webpack更快。vite在开发模式下不进行打包，而是利用现代浏览器支持的ES Module特性，按需编译模块，从而极大地缩短了启动时间。相比之下，webpack需要将所有模块打包成一个bundle.js文件，这在大型项目中会导致编译时间显著增加。‌

其次，在开发体验上，vite提供了更快的热更新功能。vite的热更新是增量更新，只更新修改的文件，而webpack的热更新需要重新编译整个应用，这在大型项目中会导致编译速度变慢。‌

在项目规模方面，webpack由于其高度的可配置性和成熟的生态，适合大型、复杂的项目。而vite由于其轻量和速度，更适合中小型项目和快速原型开发。‌

此外，vite可以用于开发Vue、React等前端项目，并且配置简单，启动和更新速度快，能够节省开发时间

8.vite的运行环境，通过什么跑起来

‌Vite的运行环境是通过本地资源服务器和一套构建指令组成的。‌

Vite 的运行环境主要依赖于其本地资源服务器和构建指令。Vite 本质上是一个本地资源服务器，它利用现代浏览器的ESM（ECMAScript Modules）特性来提供服务。在开发环境中，Vite 不进行打包操作，而是直接将源代码提供给浏览器。当浏览器遇到import语句时，Vite 会实时编译这些代码，并将其转换为 ESM 格式返回给浏览器，从而实现按需加载‌。

Vite 的运行原理
Vite 的运行原理主要体现在以下几个方面：

‌No-bundle模式‌：在开发环境中，Vite 不生成一个完整的打包文件（bundle），而是利用浏览器的原生 ESM 支持，按需加载和编译代码。这种方式减少了启动时间，因为不需要等待整个项目的打包过程‌。

‌esbuild预构建‌：Vite 在开发环境中依赖esbuild进行预构建，这进一步提高了启动速度。esbuild 是一个快速的 JavaScript 编译器，能够快速编译代码‌。

‌模块热更新（HMR）‌：Vite 利用浏览器的缓存策略和 ESM 支持，实现了快速的模块热更新，减少了重新加载页面的需要‌。

Vite 的优势和应用场景
Vite 的主要优势包括：

• ‌快速的冷启动‌：由于不进行完整的打包，Vite 的开发服务器启动速度非常快，通常在毫秒级‌。
• 模块热更新‌：支持快速的模块热替换，减少了开发过程中的等待时间‌。
• ‌按需加载‌：利用浏览器的 ESM 支持，实现按需加载项目资源，提高了应用性能‌。

这些优势使得 Vite 特别适合用于大型项目和需要快速开发迭代的应用场景。

9.做小程序时踩过什么坑

面试3 2024/11/6

1.flex的原理是什么

分配的是什么
‌Flex布局的原理是通过给父元素添加flex属性，来控制子元素的位置和排列方式‌。
Flex是Flexible Box的缩写，意为“弹性布局”，它为盒状模型提供了最大的灵活性。任何一个容器都可以指定为Flex布局，当父容器设置为Flex布局后，其子元素的float、clear和vertical-align属性将失效‌。

Flex布局的基本概念
在Flex布局中，采用Flex布局的元素称为Flex容器（flex container），其所有子元素自动成为容器成员，称为Flex项目（flex item）。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置称为main start，结束位置称为main end；交叉轴的开始位置称为cross start，结束位置称为cross end‌。

Flex布局的主要属性

• ‌flex-direction‌：设置主轴的方向，决定项目的排列方向。取值有：row（默认，从左到右）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）‌。
• ‌justify-content‌：设置主轴上的子元素排列方式。取值有：flex-start（默认，从主轴起点开始）、flex-end（从主轴终点开始）、center（居中）、space-around（项目之间的间隔相等）、space-between（项目之间的间隔相等，但第一个项目前和最后一个项目后没有间隔）‌。
• ‌flex-wrap‌：设置子元素是否换行。取值有：nowrap（默认，不换行）、wrap（换行）、wrap-reverse（反向换行）‌。
• ‌align-items‌：设置侧轴上的子元素排列方式（单行）。取值有：flex-start、flex-end、center、baseline‌。
• ‌align-content‌：设置侧轴上的子元素的排列方式（多行）。取值有：flex-start、flex-end、center、space-between、space-around、stretch（默认，拉伸以填满容器）‌。

Flex布局的应用场景
Flex布局广泛应用于各种场景，特别是在移动端开发中，由于其操作方便且布局灵活，深受开发者喜爱。然而，需要注意的是，早期的IE浏览器版本可能不支持或仅部分支持Flex布局‌。

2.css常用函数有哪些

‌CSS中常用的函数包括以下几种‌：

‌颜色函数‌：

• ‌rgb()‌：基于红(red)、绿(green)、蓝(blue)三原色的混合。例如：rgb(255, 64, 128)
  表示一种特定的紫色‌。
• ‌rgba()‌：在rgb()基础上添加了透明度(alpha)控制，取值范围为0(完全透明)到1(完全不透明)。例如：rgba(255,64, 128, 0.5) 表示半透明的紫色‌。
• ‌hsl()‌：使用色调(hue)、饱和度(saturation)、亮度(lightness)模型定义颜色。例如：hsl(300,
  100%, 50%) 表示一种鲜艳的蓝色‌。
• ‌hsla()‌：在hsl()基础上添加透明度控制。例如：hsla(300, 100%, 50%, 0.9)表示接近全透明的鲜艳蓝色‌。
• ‌currentColor‌：表示元素当前的字体颜色，常用于与字体颜色保持一致的场合。例如：.text{color:#FF69B4;border-bottom:2px solid currentColor;}‌。

‌长度单位与计算函数‌：

• ‌calc()‌：允许在声明CSS属性值时进行数学计算，非常适合动态调整布局或创建响应式设计。例如：.container{width:calc(100%-30px);}‌。
• ‌rem‌：相对于根元素(通常是html标签)的字体大小。例如：font-size: 1.6rem‌。
• ‌em‌：相对于当前元素的父元素字体大小。例如：padding: 0.5em‌。

‌其他常用函数‌：

• ‌var()‌：插入自定义属性的值，确保风格的一致性和灵活性。例如：:root{–primary-color:
  blue;}color:var(–primary-color);‌。
• ‌attr()‌：获取HTML属性值并用于样式。例如：background-color:attr(data-color);‌。
• ‌rotate()‌：用于创建动画效果，将元素旋转指定的角度。例如：transform: rotate(45deg);‌。
• ‌scale()‌：放大或缩小元素。例如：transform: scale(2);‌。

这些函数在CSS中广泛使用，能够帮助开发者实现更加丰富和动态的网页效果。

3.bfc是什么

‌BFC（Block Formatting Context）是W3C CSS 2.1规范中的一个概念，它是一个独立的布局环境，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用‌。在一个BFC中，元素布局不受外界影响，块盒与行盒（行盒由一行中所有的内联元素组成）垂直排列。BFC的应用场景包括浮动元素，浮动元素内部子元素主要受该浮动元素影响，而两个浮动元素之间互不影响，类似于一个独立的容器。

https://www.cnblogs.com/wujihuan/articles/15978834.html

4.数组去重有哪些

JavaScript数组去重的12种方法

5.原型链继承规则

JS 常见的 6 种继承方式

6.construct一般用于做什么，能不能省略

‌JavaScript中的constructor属性主要用于判断一个对象是否由某个特定的函数或类实例化，以及获取对象的构造函数信息。‌

constructor属性的用途
‌判断对象来源‌：通过比较对象的constructor属性，可以确定该对象是否由某个特定的函数或类实例化。例如，如果obj.constructor == ClassA，则表示obj是由ClassA函数实例化的‌。

‌获取构造函数信息‌：通过对象的constructor属性，可以获取用于创建该对象的构造函数，从而进行进一步的实例化操作‌。

constructor属性的使用场景和示例

在JavaScript中，每个函数都有一个prototype属性，该属性指向一个原型对象。原型对象有一个constructor属性，指向该函数本身。例如：

function ClassA() {
    this.name = "Zhangsan";
}
ClassA.prototype.url = "http://localhost:9080/myweb";
var obj = new ClassA();
obj.url = "http://www.baidu.com";
obj.name = "Lisi";
if (obj.constructor == ClassA) {
    alert('Object obj initialized by ClassA!');
}

在这个例子中，通过比较obj.constructor和ClassA，可以确认obj是由ClassA函数实例化的‌。

构造函数的作用机制和原型链的概念
在JavaScript中，每个对象都有一个隐式的__proto__属性，指向其原型对象。原型对象有一个constructor属性，指向创建该原型的构造函数。这种机制使得对象可以通过原型链访问共享的方法和属性。例如，修改原型对象会影响所有实例对象，因为它们共享同一个原型‌。

构造函数是否可以省略
‌在JavaScript中，构造函数不能省略‌。构造函数用于创建特定类型的对象，并提供了一种机制来初始化对象的状态。省略构造函数将导致无法正确初始化对象的状态和属性，从而影响程序的正常运行‌。

7.vue中如果组件层级多怎么传值

vue中如果组件层级多怎么传值
在Vue中，组件层级多时传递数据可以使用以下几种方法：

• Props / Events：父组件通过props向子组件传递数据，子组件通过$emit触发事件将数据回传给父组件。
• Vuex：使用Vuex状态管理库，全局状态可以在多个组件之间共享。
• Provide / Inject：父组件提供数据，子组件注入使用，适用于跨多层级的组件通信。
• $attrs / $listeners：$attrs可以将父组件的属性传递给子组件，$listeners可以将父组件的事件监听传递给子组件。

8.$set 是做什么用的，vue

‌Vue中的set方法主要用于在响应式对象中设置或修改属性值，确保Vue能够检测到对象状态的更改并更新视图。具体来说，set方法的作用包括以下几个方面：

• ‌确保响应性‌：当直接给对象或数组添加新属性时，Vue无法自动检测到这些变化。使用$set方法可以确保新添加的属性具备响应性，这样当属性的值发生变化时，Vue能够捕捉到并更新视图‌。
• 修改现有属性‌：虽然直接通过对象的属性来更新值是可行的，但使用$set方法可以提供一个更显式的方式，尤其是在复杂的对象结构中，这可以提高代码的可读性和安全性‌。
• ‌添加或删除对象中的属性‌：当需要向对象添加新属性或删除属性时，必须使用$set方法，因为直接赋值无法触发视图的更新‌。

使用方法
$set方法通常有以下几种用法：

• Vue.set(target, key, value)：其中target是要设置属性的对象或数组，key是要设置的属性的键，value是要设置的新值‌。
• this.$set(target, key, value)：在Vue组件中，通常使用this.$set来设置响应式对象的属性‌。

注意事项

• ‌响应式对象‌：set方法只能用于Vue实例的data对象或其嵌套对象。尝试在非响应式对象上使用set方法只能用于Vue实例的data对象或其嵌套对象。尝试在非响应式对象上使用set将不会起作用‌。
• ‌自动创建属性‌：如果尝试设置的属性不存在，$set会自动创建该属性‌。
• ‌不可写属性‌：如果尝试设置一个不可写的属性（使用Object.defineProperty定义），$set将抛出错误‌。

通过以上介绍，可以更好地理解Vue中$set方法的作用和使用场景。

9.父子组件生命周期加载组件的顺序

vue父组件和子组件生命周期钩子执行顺序
在Vue中，父子组件的生命周期钩子执行顺序大致如下：

父组件的 beforeCreate 和 created。

父组件的 beforeMount。

子组件的 beforeCreate 和 created。

子组件的 beforeMount 和 mounted。

父组件的 mounted。

如果父组件更新，则执行顺序如下：

父组件的 beforeUpdate。

子组件的 beforeUpdate 和 updated（如果有变化）。

父组件的 updated。

如果父组件销毁，则执行顺序如下：

父组件的 beforeDestroy。

子组件的 beforeDestroy 和 destroyed。

父组件的 destroyed。

这里是一个简单的例子来展示这些生命周期钩子的执行顺序：

<template>
  <div>
    <parent-component></parent-component>
  </div>
</template>
 
<script>
import ParentComponent from './components/ParentComponent.vue';
 
export default {
  components: {
    ParentComponent
  }
}
</script>

父组件 (ParentComponent.vue):

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  beforeCreate() {
    console.log('Parent beforeCreate');
  },
  created() {
    console.log('Parent created');
  },
  beforeMount() {
    console.log('Parent beforeMount');
  },
  mounted() {
    console.log('Parent mounted');
  },
  beforeUpdate() {
    console.log('Parent beforeUpdate');
  },
  updated() {
    console.log('Parent updated');
  },
  beforeDestroy() {
    console.log('Parent beforeDestroy');
  },
  destroyed() {
    console.log('Parent destroyed');
  }
}
</script>

子组件 (ChildComponent.vue):

<template>
  <div>Child</div>
</template>
 
<script>
export default {
  beforeCreate() {
    console.log('Child beforeCreate');
  },
  created() {
    console.log('Child created');
  },
  beforeMount() {
    console.log('Child beforeMount');
  },
  mounted() {
    console.log('Child mounted');
  },
  beforeUpdate() {
    console.log('Child beforeUpdate');
  },
  updated() {
    console.log('Child updated');
  },
  beforeDestroy() {
    console.log('Child beforeDestroy');
  },
  destroyed() {
    console.log('Child destroyed');
  }
}
</script>

10.小程序

11.栅格布局

栅格布局（GridRow/GridCol）