liuwei

v-modal的使用。

绑定input事件,把当前input标签的value值赋值给绑定变量
v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。

Vue实现数据双向绑定的原理

vue.js是采用数据劫持，并结合发布者——订阅者的模式：通过Object.defineProperty()来劫持vue中各个属性的setter、getter，在数据变动的时候，再发布消息给订阅者

Vue响应式原理的核心就是Observer、Dep、Watcher。

Observer中进行响应式的绑定，在数据被读的时候，触发get方法，执行Dep来收集依赖，也就是收集Watcher。

在数据被改的时候，触发set方法，通过对应的所有依赖(Watcher)，去执行更新。

到此够了

https://juejin.cn/post/6844903858850758670#heading-7

https://juejin.cn/post/6989106100582744072#heading-11

1、利用Proxy或Object.defineProperty生成的Observer针对对象/对象的属性进行"劫持"，也就是将对象的属性进行递归遍历，包括子属性对象的属性，都加上 setter和getter 变成响应式；,在属性发生变化后通知订阅者。

2、解析器Compile解析模板中的Directive(指令)，将模板中的变量替换成数据，然后再更新视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据变动了，就会接到通知更新视图

3、Watcher属于Observer和Compile桥梁,它将接收到的Observer产生的数据变化,并根据Compile提供的指令进行视图渲染,使得数据变化促使视图变化

watcher：

1、在自身实例化时往属性订阅器(dep)里面添加自己(看dep)

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

Object.defineProperty优缺点

优点：兼容性好
需要对每个属性进行便利监听，嵌套对象需深层舰艇啊，造成性能问题。

通过下标方式修改数组数据或者给对象新增删除属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作， Vue 内部通过重写函数的方式解决了这个问题。

再说一下vue2.x中如何监测数组变化

重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化

那你知道Vue3.x响应式数据原理吗？

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

vue.use() vue.components()区别

 

1.都可以用来注册组件，vue.components()注册组件第一个参数是组件名，第二个参数是要注册的组件。vue.use()更切确的说是注册插件，它会执行install方法。
2.vue.use()注册组件，参数可以可以是对象，或者函数，它们都执行了install方法

3.vue.use() 可以一次性注册多个组件 ，vue.components()一次只能注册一个组件

vue组件中的data必须是函数

 

Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;

javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响

这都是因为js本身的特性带来的，跟vue本身设计无关

在 Vue 中，子组件为何不可以修改父组件传递的 Prop

保持单向数据传输。防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
并且，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

nextTick原理

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新
简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
应用场景：v-if 的时候获取dom   mounted里面操作dom（注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick）

vue项目权限控制

v-if和v-for哪个优先级更高

 

1. 显然 v-for优先级高于v-if；
2. 两者同级出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免的浪费性能；
3. 避免出现这种情况，可在外层嵌套一层进行v-if判断，然后在内部进行v-for循环；
4. 如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项，减少dom操作；

 

在 v-for 时给每项元素绑定事件需要用事件代理吗？为什么？

理论上，使用事件代理无论是监听器数量和内存占用率都比v-for好。
但实际上当组件销毁时，vue 也会自动将所有的事件处理器都移除掉，所以减少内存占有也做到了。
2.在 v-for 中，给元素绑定的都是相同的事件，所以除非上千行的元素需要加上事件，其实和使用事件代理的性能差别不大，所以也没必要用事件代理

vue中update方法

Vue 的update 是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；update 方法的作用是把 VNode 渲染成真实的 DOM。

vue中的keepalive原理

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include 与 exclude(优先级大于include) 。

需要缓存的VNode节点保存在this.cache中，在render时，如果VNode的name符合在缓存条件（可以用include以及exclude控制），则会从this.cache中取出之前缓存的VNode实例进行渲染。

vue中computed和watch的原理和区别

相同： computed和watch都起到监听/依赖一个数据，并进行处理的作用
异同：

computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当属性值没有发生改变时, 多次访问计算属性会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。主要用于对同步数据的处理，但是methods方法中是每次调用, 都会执行函数的, methods它不是响应式的

watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。

 

为什么要用虚拟DOM（虚拟dom优点）？对虚拟DOM的理解？（两题共享答案）

 

Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。（对虚拟DOM的理解？加上这句）

 

前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢,更因为频繁变动DOM会造成浏览器的回流或者重回,这些都是性能的杀手,因此我们需要虚拟DOM,在patch过程中尽可能地一次性将差异更新到DOM中,这样保证了DOM不会出现性能很差的情况.

 

现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中review不严格,可能会有开发者写出性能较低的代码,更重要的是省略手动DOM操作可以大大提高开发效率.

 

最后,也是Virtual DOM最初的目的,就是更好的跨平台,比如Node.js就没有DOM,借助Virtual DOM,因为Virtual DOM实现SSR(服务端渲染)

虚拟DOM真的比真实DOM性能好吗（虚拟dom缺点）

● 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
● 正如它能保证性能下限，繁变动DOM会造成性能差，虚拟DOM最小量更新，尽可能地一次性将差异更新到DOM中，还是更快的。

为什么不建议用index作为key?

使用index 作为 key和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2...这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作

Vue中key的作用

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，diff 操作可以更准确、更快速

vue 中 key 值的作用可以分为两种情况来考虑：
● 第一种情况是 v-if 中使用 key。由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此当使用 v-if 来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。如果是相同的 input 元素，那么切换前后用户的输入不会被清除掉，这样是不符合需求的。因此可以通过使用 key 来唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。这个时候 key 的作用是用来标识一个独立的元素。

● 第二种情况是 v-for 中使用 key。用 v-for 更新已渲染过的元素列表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处的每个元素。因此通过为每个列表项提供一个 key 值，来以便 Vue 跟踪元素的身份，从而高效的实现复用。这个时候 key 的作用是为了高效的更新渲染虚拟 DOM。

 

Vue的路由实现：hash模式 和 history模式

 

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

 

Vue 的父组件和子组件生命周期钩子执行顺序是什么

a. 加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
b. 子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated
c. 父组件更新过程 父beforeUpdate->父updated
d. 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

MVC,MVVM模式的区别

MVC:是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。

View 传送指令到 Controller；Controller 完成业务逻辑后，要求 Model 改变状态；Model 将新的数据发送到 View，用户得到反馈

MVVM:vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

mvvm主要解决了mvc中大量 dom操作使得页面渲染性能降低，加载速度变慢，影响用户体验

vue优点

轻量级框架，大小只有几十kb；
双向数据绑定。组件化。视图，数据，结构分离。

虚拟DOM。
运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

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

 

答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

 

请说下封装 vue 组件的过程？

答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)
　　2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
　　3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
　　4. 封装完毕了，直接调用即可

 

 

Vuex原理

全局状态管理，在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，修改可以得到全局的响应，一个实例化的Vuex.Store由state, mutations和actions三个属性组成:

state中保存着共有数据
改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的
如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.

为什么 Vuex 的 mutation 中不能做异步操作？

知道状态 是何时更新的，进行状态地追踪，方便调试

https://www.jianshu.com/p/d071e205b249

vuex 严格模式（优先级低）

严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。
这能保证所有的状态变更都能被调试工具跟踪到。

vue-cli 替我们做了哪些工作？（优先级低）

 

首先需要知道 vue-cli 是什么？它是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合

.vue 文件 --> .js 文件
ES6 语法 --> ES5 语法
Sass,Less,Stylus --> CSS
对 jpg,png,font 等静态资源的处理
热更新
定义环境变量，区分 dev 和 production 模式

如果开发者需要补充或修改默认设置，需要在 package.json 同级下新建一个 vue.config.js 文件

 

vue路由的钩子函数

由钩子函数分为三种类型如下：
第一种：全局钩子函数。

router.beforeEach((to, from, next) => {})
第二种：针对单个路由钩子函数

beforeEnter(to, from, next){next() //正常跳转，不写的话，不会跳转}

第三种：组件级钩子函数

beforeRouteEnter(to, from, next){ // 这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有

Vue 组件间通信有哪些方式?（优先级低）

props/emit/attrs/parent/$children 与 ref

vue生命周期

 

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreate阶段，vue实例的挂载元素,el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

vue.js的两个核心是什么？（优先级低）

 

数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

vue2.0中的$router 和 $route的区别

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

vue 路由跳转四种方式 (带参数)（优先级低）

1. router-link
2. this.$router.push() (函数里面调用)
3. this.$router.replace() (用法同上,push)
4. this.router.go(n)向前或者向后跳转n个页面，n可为正整数或负整数

SR了解吗？（优先级低）

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。

SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求

assets和static的区别

答：相同点：assets和static两个都是存放静态资源文件
不相同点：assets中在项目打包时，会压缩体积，代码格式化。

static中放置的静态资源文不会压缩格，而是直接上传至服务器。体积大，占用服务器空间
建议：引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，第三方文件已经经过处理，我们不再需要处理，直接上传。

你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？（优先级低）

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

Vue.extend()（优先级低）

场景:vue 组件中有些需要将一些元素挂载到元素上,这个时候 extend 就起到作用了 是构造一个组件的语法器 写法: 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数