开发环境：是程序员开发使用的环境，配置比较随意，为了开发调试方便，一般打开全部错误报告测试环境：克隆一份生产环境的配置，一个程序在测试环境工作不正常，那肯定不能把它发布到生产上线上环境：正式提供对外的服务，也就是用户使用的环境，一般关闭所有错误报告，打开错误日志

函数防抖（Debounce）：指触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。如：搜素框，滚动条函数节流（throttle）：指连续触发事件但在n秒中只执行一次，避免某些事件频繁触发。如：按钮点击

unplugin-vue-components 是一款按需自动导入Vue组件的库，支持 Vue2 和 Vue3，同时支持组件和指令。使用此插件库后，不再需要手动导入组件，插件会自动识别按需导入组件以及对应样式，我们只需要像全局组件那样使用即可。

在前端页面布局中经常会把一些按钮通过fixed或absolute固定到底部，但如果页面上有input或textarea被点击获取焦点时，在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去，有时会十分影响美观，下面是在Vue项目中如何通过隐藏的方式实现不被顶上去的

在项目开发中，我们经常会碰到Tab切换的功能，而在Vue中想实现这样的功能也应该有很多种，常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难，看看官网介绍或看几篇博客应该就能实现。但这里面其实还有很多细节需要我们去做，如Tab切换时，切换过的Tab组件状态怎样缓存在项目中经常会有 页面A -> 页面B -> 页面...

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调，也就是说immediate值为true，则首次赋值时就执行handler函数，immediate值为false，则首次赋值时就不执行handler函数；当需要监听一个对象的改变时（注意这里监听的是整个对象），正常的watch无法监听到对象内部属性的改变，此时需要使用deep对对象进行深度监听

Vue的抽象组件，自身不会渲染一个DOM元素，也不会出现在父组件链中，能将组件在切换过程中将状态保存在内存中，防止重复渲染DOM；包裹动态组建时，会缓存不活动的组件实例，而不是销毁它们；当组件在 <keep-alive>内被切换时，它的activated和deactivated这两个生命周期钩子函数将会被执行。include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串

通过config.resolve.alias设置的别名在Vue的template模板和style样式内使用前面需加上~，在script脚本中则直接使用别名，不需加~；data中引用assets图片时，必须使用require('xxx')方式引用，否则会当字符串处理而无法显示图片

概念什么是同源策略同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源是指：协议、域名、端口都相同什么是跨域跨域就是不同源，就是不满足协议、域名、端口都相同的约定如：看下面的链接是否与 http://www.test.com/index.ht...

Vue3 组件 v-model 和 defineModel 使用 ，从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏，这个宏可以用来声明一个双向绑定 prop，通过父组件的 v-model 来使用defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：1. 它的 .value 和