17.Vue中给对象添加新属性时，界面不刷新怎么办?
原因：vue2响应式采用object.defineProperty进行劫持，那个添加新属性时，新的属性不会具有get和set方法，不是一个响应式所以界面不刷新
解决：Vue.set() 向响应式对象中添加一个property，并确保这个新 property 同样是响应式的
vue3通过proxy劫持和reflect映射实现响应式，不会有这个问题
18.vue组件通讯方式
通过 props 传递
props校验：name:{type:String,required:true,default:默认值} required是否必要
通过 $emit 触发自定义事件
使用 ref
EventBus
Provide 与 Inject
Vuex
19.vue3setup的父传子怎么去写？
介绍三种方法：
第一种：使用vue2写法通过props和$emit
第二种：setup函数写法
setup(props,context)，通过props接收数据，通过context.emit(‘调用父组件方法’，传递参数)
第三种：script中setup
const emits = defineEmits(["changeNumber"]); // 也可以不赋值，取值通过{{num}}获取 const props = defineProps({ num: { type: Number, default: () => [], }, list: { type: Array, }, }); const changeNum = function () { emits("changeNumber", 888); // console.log(11111111111); };
20.setup可不可以直接写async和await？
可以
setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup
<script setup> import Api from '../api/Api' const data = await Api.getData() console.log(data) </script>
21.vue生命周期
vue2
beforeCreate – 首次访问data
created – 首次访问this生命周期
mounted – 页面展示
vue3
区别：
beforeCreate -> setup() 开始创建组件之前，创建的是data和method
created -> setup()
beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。
mounted -> onMounted 组件挂载完成后执行的函数
beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。
updated -> onUpdated 组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。
destroyed -> onUnmounted 组件卸载之前执行的函数。dszhuoyi
activated -> onActivated 组件卸载完成后执行的函数
deactivated -> onDeactivated
22.说说 Vue 中 CSS scoped 的原理
添加scoped标签后会给组件中所有标签元素，添加一个唯一标识，这个唯一标识就是自定义属性，data-v-xxxxxxxx这样的字眼，同时对应的样式选择器也会添加这个唯一的属性选择器
23.$nextTick原理
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
nextTick原理
24.data是函数不是对象
vue是一个单页面应用最终所有的实例都会挂载到app.vue文件，如果data是一个对象那么会导致数据污染。通过函数返回对象的方式，利用函数作用域的限制避免数据污染
25.路由守卫
vue路由守卫分为三种：全局路由守卫，独享路由守卫,组件路由守卫
to： 进入到哪个路由去
from： 来自哪个路由
next：是否跳转
全局守卫： router.beforeEach((to,from,next)=>{})
独享路由守卫： beforeEnter:(to,from,next)=>{}
组件路由守卫： beforeRouteEnter:(to,from,next)=>{}, beforeRouteUpdate , beforeRouteLeave
26.vue设置全局变量
方法一：
vue2.x挂载全局是使用 Vue.prototype.$xxxx=xxx 的形式来挂载，然后通过 this.$xxx来获取挂载到全局的变量或者方法。
const {proxy} = getCurrentInstance() console.log(proxy.$data)
方法二：
provide/inject
27.vue中keep-alive
属性：include和exclude
语法：
// 指定home组件和about组件被缓存 <keep-alive include="home,about" > <router-view></router-view> </keep-alive> // 除了home组件和about组件别的都缓存 <keep-alive exclude="home,about" > <router-view></router-view> </keep-alive>
钩子函数：
activated 当组件被激活（使用）的时候触发 可以简单理解为进入这个页面的时候触发
deactivated 当组件不被使用（inactive状态）的时候触发 可以简单理解为离开这个页面的时候触发
进入开启缓存的组件
初始进入和离开 created ---> mounted ---> activated --> deactivated 后续进入和离开 activated --> deactivated
28.vue插槽
slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。
默认插槽：又名匿名插槽，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。
作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。
实现原理：当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.s l o t 中，默认插槽为 v m . slot中，默认插槽为vm.slot中，默认插槽为vm.slot.default，具名插槽为vm.s l o t . x x x ， x x x 为插槽名，当组件执行渲染函数时候，遇到 s l o t 标签，使用 slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到slot标签，使用slot.xxx，xxx为插槽名，当组件执行渲染函数时候，遇到slot标签，使用slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。
29.vue2和vue3区别
双向绑定更新
vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。
vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。
这⾥是相⽐于vue2版本，使⽤proxy的优势如下
1.defineProperty只能监听某个属性，不能对全对象监听 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
2.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。
获取props
vue2在script代码块可以直接获取props，vue3通过setup指令传递
API不同
Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）
建立数据data
vue2是把数据放入data中，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造得时候触发。
生命周期不同
vue2 -------- vue3
beforeCreate -> setup() 开始创建组件之前，创建的是data和method
created -> setup()
beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。
mounted -> onMounted 组件挂载完成后执行的函数
beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数。
updated -> onUpdated 组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。
destroyed -> onUnmounted 组件卸载之前执行的函数。dszhuoyi
activated -> onActivated 组件卸载完成后执行的函数
deactivated -> onDeactivated
是否支持碎片：vue2.0 只允许有一个根标签，vue3.0支持碎片化，可以拥有多个根节点
main.js文件不同：vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数 vue3中需要使用结构的形式进行操作，引入的是工厂函数
diff算法不同
更好的支持ts
30.Vue3.0 所采用的 Composition Api (组合式)与 Vue2.x 使用的 Options Api(选项式) 有什么不同？
options Api 当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解 。composition Api它将功能定义在一起，利于查找和理解
Composition API 对 tree-shaking 友好，代码也更容易压缩
Composition API中见不到this的使用，减少了this指向不明的情况
如果是小型组件，可以继续使用Options API，也是十分友好的
31.vue3中hook
本质是一个函数，把setup函数中使用的Composition API（组合式api）进行了封装，类似于vue2中的mixin
自定义hook优势：复用代码，让setup中的逻辑更清楚易懂
32.vue组件和插件的区别
组件： Vue 组件是一个可复用的 Vue 实例，可以带有自己的状态和方法。组件可以包含其他组件，从而形成一个复杂的 UI 列表。
优点
可以将代码封装成一个可复用的组件，提高开发效率。
组件具有良好的可维护性，易于修改和更新。
缺点
组件的功能和作用比较独立，不太适用于全局功能的扩展。
组件的管理和组织需要一定的规范，否则可能会导致混乱和不易维护。
插件： Vue 插件可以扩展 Vue 的全局功能，在应用程序中可以重复使用。常见的插件如 vue-router、vuex、axios 等。
优点
插件可以方便地扩展 Vue 的全局功能。
插件可以使代码重复利用，提高开发效率。
开源社区中已经有大量的插件可以用于解决常见的问题。
缺点
插件具有一定的复杂性，需要更多的学习成本。
插件功能可能比较复杂，可能会导致性能下降。
33.vue修饰符
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理
表单修饰符
.lazy 懒加载，光标离开标签时，才赋值给value
.trim 过滤首位空格
.number 限制输入类型为数字或转为数字
事件修饰符
.stop 阻止事件冒泡
.prevent 组织事件默认行为
.once 事件只触发一次
.capture 开启事件捕获
.self 事件只在自身触发
鼠标按键修饰符
left 左键点击
right 右键点击
middle 中键点击
键值修饰符
普通键（enter、tab、delete、space、esc、up…）
系统修饰键（ctrl、alt、meta、shift…）
v-bind修饰符
.async 对props进行双向绑定
.prop 设置自定义标签属性，避免暴露数据，防止污染html结构
.camel 将命名为驼峰命名法
34.Vue路由中，history和hash两种模式有什么区别？
hash: hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。
优点：浏览器兼容性较好，连 IE8 都支持
缺点：路径在井号 # 的后面，比较丑
history: history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求
优点：路径比较正规，没有井号 #
缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了
35.params和query区别
params 和 query 都是用于传递参数的，但它们的传参方式和使用场景是不同的。
params 通过路由路径传递参数，在路由配置中使用 :paramName 的形式进行声明
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, }, ], })
query 通过 URL 查询字符串（即问号后面的部分）传递参数，在路由地址后面使用 ? 连接多个参数键值对
不需要在router中配置 /search?q=vue 会自动匹配到search组件
区别：
params 适合用于必须存在的参数传递，例如用户详情页或文章详情页的访问。
query 适合用于可选的参数传递，例如搜索功能中关键词的传递。
36.vue2中assets和vue3中public区别 ？
在 Vue 2 中，assets 目录是默认存在的，可以直接在项目的根目录下创建，它通常用来存放组件需要的图片、样式等静态资源文件。这些文件会被打包到 JavaScript 文件中，在代码中使用相对路径引用。
在 Vue 3 中，可以通过配置 vue.config.js 文件来设置 public 目录，它的作用与 assets 目录类似，用来存放静态资源文件。但是，与 Vue 2 不同的是，public 目录下的文件不会被打包，而是会直接复制到输出目录下
37.单页应用如何提高加载速度？
使用代码分割：将代码拆分成小块并按需加载（懒加载），以避免不必要的网络请求和减少加载时间。
缓存资源：利用浏览器缓存来存储重复使用的文件，例如 CSS 和 JS 文件、图片等。
预加载关键资源：在首次渲染之前，先提前加载关键资源，例如首页所需的 JS、CSS 或数据，以保证关键内容的快速呈现。
使用合适的图片格式：选择合适的图片格式（例如 JPEG、PNG、WebP 等），并根据需要进行压缩以减少文件大小。对于一些小图标，可以使用 iconfont 等字体文件来代替。
启用 Gzip 压缩：使用服务器端的 Gzip 压缩算法对文件进行压缩，以减少传输时间和带宽消耗。
使用 CDN：使用内容分发网络（CDN）来缓存和传递文件，以提高文件的下载速度和可靠性。
优化 API 请求：尽可能地减少 API 调用的数量，并使用缓存和延迟加载等技术来优化 API 请求的效率。
使用服务器端渲染：使用服务器端渲染（SSR）来生成 HTML，以减少客户端渲染所需的时间和资源。但需要注意，SSR 也可能增加了服务器的负担并使网站更复杂。
