一、transition和transition-group的区别：
transition：针对的是一个元素，比如v-if,v-show
transition-group：针对是多个元素，比如使用v-for
二、transition动画过渡的时候什么时候生效？
1.v-if
2.v-show
3.动态组件
4.组建根节点三、vue创建项目有两种方法：
1.vue init webpack 项目名称
2.vue create 项目名称 ➡️【推荐】四、vue中点击div获取当前元素
1、div绑定的方法上参数：$event;
获取当前点击的元素：$event.target;
绑定事件的元素：$event.currentTarget
如果获取当前div元素的style样式，就使用$event.target.style或$event.currentTarget
修改style样式使用:$event.currentTarget；
2.使用this.$refs.name (name就是div的当前元素名字）⚠️注：建议多个div用第一个传参的方法，一个div可以使用第二种方法
五、vue中侦听器watch时，调用this报undefined的问题
watch：{
'$route':(to,from)=>{
this.a = to.name
}
}这里报错undefined，是因为不能写成箭头函数，由于箭头函数绑定了父级作用域的上下文，不会取所在组件的实例，正确的写法：
watch: {
'$route':function(to, from){
this.a = to.name
}
}官方文档有说明，不建议用箭头函数，具体可查看官方文档：https://cn.vuejs.org/v2/api/#watch
六：vue网页全屏功能screenfull
参考API:https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API
由于这种原生方法存在问题，建议采用第三方库 screenfull 实现切换功能
七：图片加载出来慢的问题
1.图片懒加载
如果一个网站的页面包含大量的图片，一般初始加载的时候，我们是期望它不要加载所有的图片的，只需要加载用户当前看得到的区域内的图片就行了。
但是默认情况下 img 标签内的图片都会立即加载。这样可能会阻塞页面内其他资源的加载，解决此问题的方法是使用图片的懒加载。
2.服务端图片资源优化
把这些优化交给服务端来做，当前端发起图片请求时，图片资源的提供着根据请求内容来提供最优资源给客户端，比如imageKit:
ImageKit 会根据请求时的网络情况、设备信息等提供最合适的图片资源，这样做 hmtl 中就仅仅需要一个 img src 便可。
3.异步解码
图片传输到浏览器上要想展示，还需要经过解码。除了硬件本身外，如何解码直接影响着图片展示在用户眼前的时机了。
img 标签的 decoding 属性用于指定浏览器图片解码方式。
• sync：同步解码。浏览器在主线程上立即解码图片。这可能会阻塞其他任务，例如页面布局和绘制，直到图片解码完成。如果你有一个小的图片，或者图片在视觉上非常重要，选择这个值。
• async：异步解码。浏览器在后台线程上解码图片，这样就不会阻塞其他任务。这对于大型图片或者不那么重要的图片比较有用，因为它们可能需要更长的时间来解码，而且不会影响到页面的其他部分。
• auto：自动解码。默认值，让浏览器自己决定如何进行解码。浏览器可能会根据图片的大小、当前的 CPU 使用情况等因素来决定使用同步还是异步解码。
如此，浏览器将异步解码名为 “a.jpg” 的图片。这意味着浏览器将在后台线程上解码图片，从而避免影响页面的其他任务。
4.根据情景的不同来加载
不同的设备，所需的图片大小不需要一致， 在 4K 屏上，需要高分辨率的，对应的小屏幕如手机上，如果仍然加载高分辨的图片，这无疑是一种浪费。
通过结合使用 srcset 和 sizes 属性，可以实现根据屏幕分辨率加载不同的图片。
通过结合使用 srcset 和 sizes 属性，可以实现根据设备特性和视口宽度选择最佳图像资源和布局大小，从而提供更好的用户体验和性能优化。
srcset属性
srcset属性允许开发者为不同的屏幕分辨率或设备条件指定多种图像源。其基本语法如下：
* 基于宽度的用法：例如 
。这里，浏览器会根据设备的屏幕宽度选择最合适的图片加载。
* 基于像素密度的用法：例如 
。这里，1x的图片用于标准分辨率屏幕，2x的图片用于高分辨率屏幕。sizes属性
sizes属性定义了一组媒体条件（类似于CSS媒体查询），以及每个媒体条件下图像所占视口宽度的百分比或具体像素值。其基本语法如下：
* 百分比用法：例如 
。这里，浏览器会根据视口宽度选择合适的图片尺寸。
* 固定像素值用法：例如 。这里，浏览器会根据设备的像素尺寸选择合适的图片尺寸。
* 5.优先加载
使用 或 来预加载关键图片或连接到图片服务器，以便浏览器提前开始下载。 这对于首屏的关键图片特别有用。
6.缓存
如果服务器指示允许缓存，浏览器将在本地存储资源，这意味着用户下次访问该站点时不必再次请求它们。
若要使用缓存，需要将 HTTP Cache-Control 标头添加到 HTTP 响应中，这可以通过不同的方式完成，具体取决如何缓存，简单示例如下：Cache-Control: max-age=86400
这样的话浏览器会将结果缓存一天（86,400 秒），具体的缓存策略可自行设定。
7.压缩图片
8.选择合适的图片格式
选择合适的图片格式: WebP 优于 JPEG 和 PNG，提供更好的压缩和质量。 如果浏览器不支持 WebP，可以使用 元素提供 fallback。 对于简单的图形或图标，考虑使用 SVG 矢量图形