javascript面试总结
谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。
具有以下优点：
1. 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试：界面素来是比较难于测试的，测试可以针对ViewModel来写。
Vue 有哪些指令？
v-html：输出真正的HTML
v-pre：跳过大量没有指令的节点加快编译
v-cloak：这个指令是用来保持在元素上直到关联实例结束时进行编译
v-once：v-once关联的实例，只会渲染一次
v-if：v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素
v-else：v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用
v-else-if：v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句
v-text：v-text主要用来更新textContent，可以等同于JS的text属性
v-show：也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性
v-for：用v-for指令根据遍历数组来进行渲染
v-bind（简写冒号【 ：】）：动态的绑定一个或者多个特性
v-model：这个指令用于在表单上创建双向数据绑定。v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值;
v-model修饰符
.lazy 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
.number 自动将用户的输入值转化为数值类型
.trim 自动过滤用户输入的首尾空格
v-on（简写【 @ 】）：v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名；
事件修饰符
.stop 阻止事件继续传播
.prevent 事件不再重载页面
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
简述Vue的响应式原理
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。
Vue中如何在组件内部实现一个双向数据绑定
父组件通过 props 传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值
Vue中如何监控某个属性值的变化
可以通过watch 和计算属性computed
Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决
属性会添加进去但是不能形成双向绑定，可以用this.$set(this.obj, 'b', 'obj.b') 来动态添加属性并实现双向绑定
delete和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete直接删除了数组 改变了数组的键值。
如何优化SPA应用的首屏加载速度慢的问题
将公用的JS库通过script标签外部引入，减小chunk-vendors.js的大小，让浏览器并行下载资源文件，提高下载速度；在配置 路由时，页面和组件使用懒加载的方式引入，在调用某个组件时再加载对应的js文件；文件传输采用压缩传输；加一个首屏 loading 图，提升用户体验；最后实在不行可以采用服务器渲染
前端如何优化网站性能
1.减少HTTP请求：图标合并，js合并，css合并等
2.使用CDN
3.添加Expires头（即利用浏览器缓存）
4.压缩传输
5.css文件放到文件头部
6.js文件放到文件尾部
7.减少DNS查找：建议将组件放到至少两个但不多于4个主机名下，减少DNS查找的同时也允许高度并行下载。
8.精简并压缩js和css
9.避免重定向
10.http和ajax的 get请求可以被缓存，尽量采用get
网页从输入网址到渲染完成经历了哪些过程
大致可以分为如下7步：
输入网址；
发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
与web服务器建立TCP连接；
浏览器向web服务器发送http请求；
web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
浏览器下载web服务器返回的数据及解析html源文件；
生成DOM树，解析css和js，渲染页面，直至显示完成；
jQuery获取的dom对象和原生的dom对象有何区别
js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价。
jQuery如何扩展自定义方法
(jQuery.fn.myMethod=function () {
alert('myMethod');
})
// 或者：
(function ($) {
$.fn.extend({
myMethod : function () {
alert('myMethod');
}
})
})(jQuery)
使用：
$("#div").myMethod();
计算属性和 watch 的区别
计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。
所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。
说出一下区别会加分
computed 是一个对象时，它有哪些选项？
computed 和 methods 有什么区别？
computed 是否能依赖其它组件的数据？
watch 是一个对象时，它有哪些选项？
有get和set两个选项
methods是一个方法，它可以接受参数，而computed不能，computed是可以缓存的，methods不会。
computed可以依赖其他computed，甚至是其他组件的data
watch 配置
handler
deep 是否深度
immeditate 是否立即执行
总结
当有一些数据需要随着另外一些数据变化时，建议使用computed。
当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watcher
组件中 data 为什么是函数（为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？）
因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。
keep-alive的应用场景和特点
特点：
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。
场景：
商品列表页点击商品跳转到商品详情，返回后仍显示原有信息订单
列表跳转到订单详情，返回，等等场景。
生命周期：
初次进入时：created > mounted > activated；退出后触发 deactivated再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中
语法糖 v-model 是怎样实现的
v-model本质上就是语法糖，即利用v-model绑定数据后，其实就是既绑定了数据，又添加了一个input事件监听：
`<input v-model="testMsg">` 等价于`<input :value="testMsg" @input="testMsg = $event.target.value">`
怎样理解单向数据流
这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
vue的生命周期
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
简述一下provide/inject
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。prop只能用于父子组件间通信， 如果层次更深，就可使用provide/inject
组件间的通信
父子 props/event children ref provide/inject
兄弟 bus vuex
跨级 bus vuex provide.inject
路由的跳转方式
<router-link to='home'> router-link标签会渲染为<a>标签，咋填template中的跳转都是这种；
另一种是编程是导航 也就是通过js跳转 比如 router.push('/home')
route的区别
router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样
route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等
谈谈slot插槽
slot简介
vue路由的钩子函数
第一种：全局导航钩子
router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
第三种：单独路由独享组件。
beforeEnter
每个钩子方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
聊聊你对Vue.js的template编译的理解？
compile是从mount后开始进行中, 整体逻辑分为三个部分
解析器(parse) - 将 模板字符串 转换成 element ASTs
优化器(optimize) - 对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化
代码生成器(generate) - 使用 element ASTs 生成 render 函数代码字符串
vue-router实现原理？
前端路由简介以及vue-router实现原理
vuex有哪几种属性？
分别是 State、 Getter、Mutation 、Action、 Module
vuex的State特性
一、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
二、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
vuex的Getter特性
一、getters 可以对State进行计算操作，它就是Store的计算属性
二、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
三、 如果一个状态只在一个组件内使用，是可以不用getters
vuex的Mutation特性
一、Action 类似于 mutation，不同在于：
二、Action 提交的是 mutation，而不是直接变更状态。
三、Action 可以包含任意异步操作
自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数
全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
v-for为什么使用key?
需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。
v-on绑定多个方法
<p v-on="{click:dbClick,mousemove:MouseClick}"></p>
<p @click="one(),two()">点击</p>
vue常用的修饰符
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。
vue-router的params和query的区别
用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据
params刷新 会 丢失 params里面的数据。
网友评论