vue相关知识点整理

每个点都是用自己语言概括出来的，言简意赅，所以很好理解。

Vue优点

轻量级框架只有几十KB。视图数据结构分离，组件化，虚拟DOM，运行速度快性能高。

 

V-show跟v-if区别

同：控制元素的显示跟隐藏。

不同：v-if是条件渲染，惰性的，条件是true就渲染。动态向DOM树中添加删除DOM元素。V-show不管初始条件总是渲染，基于CSS 的 “display” 切换。

所以，运行时频繁切换条件用v-show，因为切换开销小，初始消耗大。反之用v-if。

 

<keep-alive></keep-alive>的作用

vue内置组件，可以让它包含的组件保留状态，避免重新渲染，内置include和exclude属性。对应钩子函数activated和deactivated，组件激活触发activated，移除触发deactivated。

 

V-modal的原理和使用

表单数据双向绑定，本质是语法糖。它里面是两个操作：①v-bind绑定value属性②v-on给当前元素绑定input事件。

 

Axios,以及安装

它是请求后台资源的模块。安装：npm install axios --save安装好，然后import引入，然后.get或者.post。如成功就返回在.then函数，失败就在.catch函数。

 

vue.cli项目里src目录每个文件夹和文件的用法

Assets静态资源；components组件；router路由；app.vue应用主组件；main.js入口文件。

 

Computed和watch的区别以及应用场景

Computed：是计算属性，依赖其他属性值，有缓存，一个属性受多个属性影响的时候用到，比如做购物车商品结算的时候。

Watch：观察作用，类似数据监听回调，监听数据变化时都会执行回调进行后续操作。当一条数据影响多条数据的时候用到，比如做搜索的时候。

 

Vue组件中的data为什么必须是一个函数

因为组件是用来复用的，而js的特性（对象是引用关系）。如果是对象，作用域没有隔离，子组件的data属性值相互影响。如果是函数，组件实例间的data属性值不会互相影响。而vue的实例，是不会被复用的，所以不存在引用对象的问题。

 

Vue双向数据绑定如何实现（vue实现双向绑定的原理）

数据劫持结合发布者订阅者模式。Object.defineProperty()来劫持各个属性的setter，getter。

 

单页面应用和多页面应用的区别以及优缺点

多页面（MPA）：一个应用中有多个页面，页面跳转的时候整页刷新。

单页面应用（SPA）：浏览器初始的时候加载所有html,js,css。一旦加载完，不会因为用户操作进行页面重载或跳转；它用路由机制实现  变换交互，避免页面重载。

优点：用户体验好，快，内容改变不需要重载整页，对服务器压力较小。前后端分离。

缺点：不利于SEO，初次加载耗时多，导航不可用，只能自己实现前进后退。

 

Vue-router路由实现模式

三种：①hash：使用地址栏URL hash值（#符号后面的内容）。②history：利用H5 history interface的pushState()和replaceState()方法，需特定浏览器支持。③abstract：支持所有js运行环境。

 

Vue生命周期

生命周期：每个vue实例在被创建时都要经历的一个初始化过程。总共是8个阶段，也就是创建前（beforeCreated）、后(created)，载入前(beforeMount)、后(mounted)，更新前(beforeUpdate)、后(updated)，销毁前(beforeDestory)、后(destoryed)。

 

Vue ssr，服务端渲染，优缺点

vue把渲染的整个HTML的工作在服务端完成，服务端形成HTML返回给客户端这个过程就叫做服务端渲染。优点：更好SEO，首屏加载更快。缺点：更多的开发条件限制（只支持beforeCreated和create），更多的服务器负载（可采用缓存策略）

 

Vuex是什么，怎么使用，场景，几种属性/模块

它是专为vue应用程序开发的状态管理模式，每个vuex应用的核心就是store仓库。“store”就是一个容器，包含应用大部分的状态——state。

使用：①已安装vuex的情况下直接引用。②安装vuex，npm install vuex --save→src下建vuex文件夹→文件夹里建store.js→store.js里引入vue和vuex，使用use vuex→定义数据方法→实例化vuex.store。

场景：单页应用组件间状态，音乐播放，登录状态，加购物车。父子、隔代、兄弟组件通信。

五种，分别是state，Getter，Mutations，Action，Module。

 

Vue组件间通信有哪几种方式

父子组件通信：props/$emit。 父子、隔代、兄弟组件通信：vuex。

 

虚拟dom优缺点，实现原理

优点：保证性能，提高开发效率，跨平台。缺点：性能要求高的应用无法针对性的极致优化）。

实现原理：①js模拟真实dom树，对真实dom进行抽象。②diff算法：比较两颗虚拟dom树的差异。③pach算法：把两个虚拟dom对象的差异应用到真正的DOM树。

 

对vue项目优化

①代码层面的优化：v-if和v-show，computed和watch区分使用场景，v-for遍历必须为item添加key且避免同时使用v-if，图片资源路由懒加载

②webpack层面优化：webpack对图片压缩，提取公共代码，提取组件的css...

③web技术优化：，浏览器缓存，cdn，谷歌performance查找性能问题。

 

MVVM框架

Mvc:model,controller,view,允许view和model直接通信，背离了开发遵循的开放封闭原则。

Mvvm:view,viewmodel,model:实现数据和视图的分离，通过数据驱动视图，开发只需要处理ViemMode。dom操作被封装，前端不需要操作DOM更新视图。完全解耦了view层和model层，这是前后端分离的重点。

实现的三个核心点：①响应式：如何监听data属性变化②模板解析：模板如何解析③渲染：模板如何被渲染成HTML。

 

Vue，angular，react的区别

与angular的区别：

①数据流： React是单项数据流，Vue是双向绑定②模板渲染：React通过原生语法如if， map等方法动态渲染模板，Vue通过指令动态渲染模板。

 

与react的区别：

同：特殊文件格式，都是用虚拟dom，重点都是组件，都有配套的路由和状态管理库。

不同：vue运行更快，react用jsx渲染页面，vue用简单模板。

 

Vue监听事件

Vue操作DOM的方法