vue2 面试题

一、.vue的性能优化怎么做？

1.编码优化：

• 不要把所有的数据都放在data中；
• v-for时给每个元素绑定事件用事件代理；
• keep-alive缓存组件；
• 尽可能拆分组件，提高复用性、维护性；
• key值要保证唯一；
• 合理使用路由懒加载，异步组件；
• 数据持久化存储的使用尽量防抖、节流优化；

 2.加载优化：

• 按需加载；
• 内容懒加载；
• 图片懒加载；       

3.用户体验：

• 骨架屏 

4.SEO优化：

• 预渲染；
• 服务端渲染ssr； 

5.打包优化：

•  CDN形式加载第三方模块；
• 多线程打包；
• 抽离公共文件；

6.缓存和压缩：

• 客户端缓存、服务端缓存；
• 服务端gzip压缩; 

 二、vue3和vue2有哪些区别？

1.双向数据绑定的原理不同；

2.是否支持碎片；

3.API不同；

4.定义数据变量方法不同；

5.生命周期的不同；

6.传值不同；

7.指令和插槽不同；

8.mian.js不同；

三、 vue中如何做强制刷新？

1.localtion.reload()；

2.this.$router.go(0)；

3.provide和inject；

四、vue的过滤器怎么使用？

用来对文本进行格式化处理，使用方式有两种，一个是插值表达式；一个是v-bind；

分为:

全局过滤器：

Vue.filter('add',function(v){
    return v < 10 ? '0'+v : v
})
<div>{{33 | add}}</div>

 局部过滤器：

和methods同级，

filter:{
  add:function(v){
    return v < 10 ? '0'+v : v
 }
}

​

五、封装一个可复用的组件，需要满足什么条件？

1.低耦合，组件之间的依赖越小越好；

2.从父级传入信息，不要在公共组建中请求数据；

3.传入的数据要进行效验；

4.处理事件的方法写在父组件中；

六、如何封装一个组件？

1.使用Vue.extend()创建一个组件；

2.使用Vue.component()方法注册组件；

3.如果子组件需要数据，可以在props中接收定义；

4.子组件修改好数据，要把数据传递给父组件，可以用emit()方法；

原则：

        把功能拆开；

        尽量让组件原子化，一个组件做一件事情；

        容器组件管数据，展示组件管视图；

七、vuex的响应式处理？

vuex是vue的状态管理工具。

vue中可以直接触发methods中的方法，vuex是不可以的。处理异步，当触发事件的时候，会通过dispatch来访问actions中的方法，actions中的commit会触发mutations中的方法从而修改state里的值，通过getter把数据更新到视图。

Vue.use(vuex)，调用Install方法，通过applyMixin(vue)在任意组件内执行this.$router就可以访问到store对象。

vuex的state是响应式的，借助的就是vue的data，把state存到vue实例组件的data中。

八、vue和jQuery的区别是什么？

1.原理不同：vue是数据绑定，jq先获取dom再处理；

2.着重点不同：vue是数据驱动，jq是着重于页面；

3.操作不同：vue进行了dom操作，我们只需关注数据即可，jq先获取dom对象，然后赋值，事件绑定等；