https://zhuanlan.zhihu.com/p/101330697
1、讲一下MVVM?
MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。
2、vue生命周期
image.png
beforeCreate 是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。
created 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.refs属性对Dom进行操作。
beforeUpdate 发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
updated 发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。
beforeDestroy 发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。
destroyed 发生在实例销毁之后，这个时候只剩下了dom空壳。组件> 已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
3、说一下v-modal的原理
根据官方文档介绍，v-model本质上就是语法糖，即利用v-model绑定数据后，其实就是既绑定了数据，又添加了一个input事件监听。
v-modal是什么？
v-modal是双向绑定的指令，能将页面上控件输入的值同步更新到data属性，也会在更新data绑定的属性时，更新页面上控件输入的值。
v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。
一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。
4、vue的组件通信方式
父子组件通信： props
子组件向父组件通信：使用Vue自定义事件。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件。
$emit/$on
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。
var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});
5、data里为什么使用函数返回而不使用对象？
对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。
而在Vue中，我们更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。
所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当我们每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。
6、computed和watch的区别
computed具有缓存功能，依赖的属性发生变化就会更新视图。适用于计算属性。
watch没有缓存功能，更多的是观察作用，可以监听某些数据执行回调。
7、set的作用
解决如下问题：
在vue开发中，经常会遇到这样的问题：当我们给响应式的对象新增属性时，新增的属性并不会显示到页面中；同样的对于响应式的数组，增加元素、修改数组长度时，数组的这些变化也不会反映到页面中（响应式对象和响应式数组是指在vue初始化时期，利用Object.defineProperty()方法对其进行监听，这样在修改数据时会及时体现在页面上）。
原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新
通过Vue.set方法设置data属性，如上：Vue.set(data,'sex', '男').
或者this.$set(target, key, value)
源码中重要的2行是
上面代码中最重要的就是如下代码：
defineReactive(ob.value, key, val)
ob.dep.notify()
这两行是将新增属性设置为响应式，并手动触发通知该属性值的更新，这就是通过this.$set()设置之后新增的属性会变成响应式并及时体现在页面中的原因。
8、nextTick的作用
根据官方文档的解释，在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
使用场景
vue中异步加载数据，数据更新 => dom更新后才能进行 scroll-better 的初始化操作。
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中.
总结如下：
1）vue用异步队列的方式来控制DOM更新和nextTick回调先后执行
2）microtask因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕
3）因为兼容性问题，vue不得不做了microtask向macrotask的降级方案
9、keep-alive的作用
https://www.jianshu.com/p/9523bb439950
在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
include - 字符串或正则表达，只有匹配的组件会被缓存。exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存。
10、vue中修改组件修改组件默认样式?
如果当前项目使用的是lang='stylus'：当前组件最层div的样式名称 >>> 需要修改的第三方默认样式样式名 {}
如果使用的是lang='less'或lang='scss' ：当前组件最层div的样式名称 /deep/ 需要修改的第三方默认样式样式名 {样式内容}比如： .lxfix /deep/ .control-label{margin-top: 5px;}
11、 less和scss的区别：https://www.cnblogs.com/wangpenghui522/p/5467560.html
Sass和Less都属于CSS预处理器,其基本思想是，用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。
不同之处:
1.编译环境不一样 Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。
2.变量符不一样，Less是@，而Scss是$。
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
4、Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
5. 引用外部CSS文件 css@import引用的外部文件如果不想编译时多生成同名的.css文件，命名必须以_开头, 文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为同名css文件.
6.Sass和Less的工具库不同 Sass有工具库Compass, Less有UI组件库Bootstrap.
12、hash和history路由的区别？
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
hash 模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id 如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
原理：history api （pushState、replaceState、go、back、forward） 则给了前端完全的自由，通过在window对象上监听popState()事件。
13、 路由钩子函数
全局钩子函数：beforeEach()、afterEach()
单个路由钩子函数：beforeEnter()
组件间钩子函数：beforeRouteEnter(to, from, next) 这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有创建出来
beforeRouteUpdate
14、响应式原理/双向数据绑定
官方文档这样说的：当你把一个普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。这些getter/setter对用户来说是不可见的，但是内部它们让Vue能够追踪依赖，在属性被访问和修改时通知变更。
深入理解：
1) 监听器Observer: 对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
2) 解析器Compile: 解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
3)订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式。
4）订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。
Vue 3.x数据响应式原理
vue3.0源码分析见网址 https://www.cnblogs.com/woai3c/p/13285243.html
Vue2.x的数据响应式核心是Object.defineProperty，
而Vue3.x核心是Proxy。两者相比，Proxy的效率更高，原因是Proxy是直接监听对象，而defineProperty是监听每个对象里的属性。Proxy是ES6新增的，IE浏览器不支持。
Proxy解决了这2个问题的存在：无法监听数组变化
数组元素基本数据类型无法响应式。
添加/删除对象属性很麻烦.
实现方式如下：
let handler = {
get (target, key, receiver) {
if (typeof (target[key]) === 'object' && target[key] !== null) {
new Proxy(target[key], handle);
}
return Reflect.get(target, key, receiver) // 返回target[key]
},
set (target, key, value, receiver) {
return Reflect.set(target, key, value)
}
}
let proxy = new Proxy(obj, handler);
proxy.age.name = '测试';
15、vue的模板编译原理 https://blog.csdn.net/yuan_me_da/article/details/103690161
将模板解析为AST（抽象语法树）—— 解析器
遍历AST标记静态节点 —— 优化器
使用AST生成渲染函数 —— 代码生成器
16、diff算法
在数据发生变化，vue是先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode ，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode ，来实现更新节点。
1）先去同级比较，然后再去比较子节点
（2）先去判断一方有子节点一方没有子节点的情况
（3）比较都有子节点的情况
（4）递归比较子节点
当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。
17、vuex
https://www.cnblogs.com/LittleStar-/p/9982606.html
18、vue3.0新增了哪些特性？
19、vue和react的区别
1、模板渲染方式的不同
在表层上，模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染。
在深层上，模板的原理不同,通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。
Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现对这一点，这样的做法显得有些独特，会把HTML弄得很乱。
2、渲染过程不同
Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。
3、框架本质不同
Vue本质是MVVM框架，由MVC发展而来；
React是前端组件化框架，由后端组件化发展而来。
4、数据流不同
vue是响应式的数据双向绑定系统，而react是单向数据流，没有双向绑定。
5、监听数据变化的实现原理不同
Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。
React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加鲁棒。
6、Vuex和Redux的区别
从表面上来说，store注入和使用方式有一些区别:
在Vuex中，$store被直接注入到了组件实例中，因此可以比较灵活的使用：使用dispatch、commit提交更新，通过mapState或者直接通过this.$store来读取数据.
在Redux中，我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。
另外，Vuex更加灵活一些，组件中既可以dispatch action，也可以commit updates，而Redux中只能进行dispatch，不能直接调用reducer进行修改。
20、双向数据绑定和单项数据绑定的区别
单向数据绑定优缺点：
优点：
单向数据流，所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。
同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性。
缺点：
则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的样板代码。
同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。
双向数据绑定：
优点：在表单交互较多的场景下，会简化大量业务无关的代码。当数据data发生变化时，页面自动发生更新。
缺点：“暗箱操作”，无法追踪局部状态的。
21、vue中key的作用
https://www.jianshu.com/p/6e1ed6438dc9
key的主要作用是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
v-for中的key为什么不使用index？
因为被发现与相应 key 的绑定关系有变化，所以被重新渲染，这会影响性能。
22、webpack打包
什么是webpack?
webpack是一个模块打包机，它会根据文件间的依赖关系对其静态分析，然后将这些模块按照指定规则生成静态资源。当webpack处理程序时，它会递归的构建一个关系图，其中包含应用程序需要的每个模块，
然后将这些模块打包成一个或多个bundle文件。
主要承担的功能：打包：将多个文件 打包成 一个文件，减少服务器压力和下载带宽 转换：将预编译语言 转换成 浏览器识别的语言 优化：性能优化
webpack和gulp的区别：
gulp:强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。Gulp是通过task对整个开发过程进行构建。
webpack:webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
webpack常见的配置属性：
entry入口文件、output出口文件
loader: 让 webpack 能够去处理那些非 JavaScript 文件,可以将所有类型的文件转换为 webpack 能够处理的有效模块.
// webpack 配置
module.exports = {
module: {
rules: [{
test: /.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']执行顺序从右到左或从下到上
}]
}
};// 如上，css 文件编译顺序依次为：postcss-loader ---> css-loader ---> style-loader
// 编译过程中，第一个loader的值 传递给下一个loader，依次传递；最后一个loader编译完成后，将预期值传递给 webpack
常用的loader:
1.sass-loader、less-loader、stylus-loader、style-loader、css-loader
2.babel-loader
3.file-loader: 之文件处理、url-loader:图片处理
4.vue-loader
loader和plugin的区别
loader：转换文件，因为webpack本身只能打包commonjs的文件，使用loader主要是转换文件，配合完成打包。
plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件：
1.HtmlWebpackPlugin，将入口js文件添加至html，并移至输出目录，可实现html压缩，去除引号等一些优化功能
2.CleanWebpackPlugin，每次打包之前清空指定目录
3.HotModuleReplacementPlugin，热更新代码，开发时使用
4.DefinePlugin，定义每个模块都能访问的变量
5.DllPlugin、DllReferencePlugin，预编译模块，可优化webpack打包速度
6.VueLoaderPlugin；将loader配置应用于vue单文件组件
网友评论