vue面试题

watch方法和属性

【2】immediate属性

使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

immediate:true代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

【3】deep属性(深度监听)

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，比如我们 data 里有一个person对象，当我们在输入框中输入数据改变person.name的值时，我们发现person监听函数是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。

三、computed | method | watch的区别【1】computed属性和methods区别

1、computed是响应式的，methods并非响应式。

2、调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。

3、computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。

4、computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的

比如：我们想去时刻监控数据的变化，在视图上显示不同的结果，当然这两中方法都可以实现这种效果，这个时候用computed就比较合理了，因为computed是可缓存的，只要数据层值不改变，computed就不会去改变，而且可缓存，如果数据层的值变了，computed就会实时更新到视图层上，所以说computed是响应式的。

【2】computed属性和watch区别

1、computed里属性名是自定义的，它可以监听一个或多个它所依赖的数据项；而watch一次只能监听一个属性，这个属性函数接收两个参数，一个是新值一个是旧值。

2、computed里自定义的属性不能与data里的属性重复，否则会报错；而watch里监听的属性必须是已存在的，其要么是data里的属性，要么是computed里计算出来的属性。

3、watch是允许异步操作的（访问一个API），并在我们得到最终结果前，设置中间状态。这些都是计算属性computed无法做到的。

watch 负责监听一个特定的值，当该值变化时执行特定的函数。无缓存性。支持异步.

注意：不应该使用箭头函数来定义 watch 函数，因为箭头函数没有 this，它的 this 会继承它的父级函数，而它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例。

如果要在另一个数据变化时做一些事情就用 watch 来观察该变化数据。而且 watch 更适用于数据变化时的异步操作。

• 当 computed 和 method 都能实现一个功能时，使用 computed，有缓存性能更好；
• 当 computed 和 watch 都能实现一个功能时，使用 computed，更简单

vue中如何定义常量

https://www.jianshu.com/p/5191de80827b

在src 下建立 constants 目录

在新建好的constants中建立自己自定义的JS文件

在该自定义js文件中写入代码

在route目录下的index.js中导包并赋值全局常量

使用静态常量

vue的seo优化

• SSR服务器渲染；

  • ssr是vue的服务端渲染技术,

    普通vue是客户端发送请求后,服务器返回空的HTML,css,js等,在客户端进行渲染
    ssr是在服务器渲染成字符串后返回

    SSR是Server Side Rendering的缩写，它可以将组件渲染成为HTML字符串，发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序，它的出现是为了解决SPA问题。

    普通优化,,,关键词,目录结构,内容,链接

• 静态化；

• 预渲染prerender-spa-plugin；
• 使用Phantomjs针对爬虫做处理。

单页面应用优缺点

1、优点：

1).良好的交互体验

用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。

2).良好的前后端工作分离模式

单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。

3).减轻服务器压力

服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

4).共用一套后端程序代码
不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；
2、缺点：

1).SEO难度较高

由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧。

2).前进、后退管理

由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现。

3).初次加载耗时多

为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。

v-show和v-if区别

• vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的。
• 实现本质方法区别

• vue-show本质就是标签display设置为none，控制隐藏
• vue-if是动态的向DOM树内添加或者删除DOM元素

• 编译的区别
• v-show其实就是在控制css

• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
• 编译的条件

• v-show都会编译，初始值为false，只是将display设为none，但它也编译了
• v-if初始值为false，就不会编译了

• 性能
• v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

vue生命周期

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后 ）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）

在实例销毁之前调用，实例仍然完全可用，

这一步还可以用this来获取实例，

一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

vuex的底层原理

vuex其实就是一个重新封装的new Vue 对象，他的动态响应数据就是data属性，而commit这些方法，都只是回调而已。

VUE核心概念

• state:提供一个响应式数据；
• Getter:借助Vue的计算属性computed来实现缓存；

• Mutation；更改state方法；
• Action:触发mutation 方法；

• Module:Vue.set 动态添加state 到响应式数据中；

1. vuex 中核心原理：通过vue 实例，将state数据赋值给data(){return { $$state:state}}
2. commit 实际上就是执行mutations 中的某个方法；

1. 每次访问State的时候，实际上是访问了重写的get 方法；访问实例中的数据属性；

vue-router原理

vue-router的作用就是通过改变URL，在不重新请求页面的情况下，更新页面视图。 简单的说就是，虽然地址栏的地址改变了，但是并不是一个全新的页面，而是之前的页面某些部分进行了修改。

vue在哪个生命周期放异步请求

一般来说，可以在，created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送请求。Created的使用场景：如果页面首次渲染的就来自后端数据。因为，此时data已经挂载到vue实例了。

在 created（如果希望首次选的数据来自于后端，就在此处发请求）（只发了异步请求，渲染是在后端响应之后才进行的）、beforeMount、mounted（在mounted中发请求会进行二次渲染） 这三个钩子函数中进行调用。

因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是最常用的是在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求

有两个优点：

第一点：能更快获取到服务端数据，减少页面 loading 时间；

第二点：放在 created 中有助于一致性，因为ssr 不支持 beforeMount 、mounted 钩子函数。

keep-alive的使用

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

<keep-alive>

<loading></loading>

</keep-laive>

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

被包裹在keep-alive中的组件的状态将会被保留

vue组件中data为什莫是函数

我们知道作用域分为全局作用域、局部作用域（函数作用域）、块级作用域（es6）。
组件中的data设置为一个函数，相当于每个组件实例都有自己的作用域，那么局部作用域中的数据改变是不会影响其他作用域的，也就是说每个组件相互独立，互不影响。这样就保证了组件的复用性和灵活性。

vue和react和angela的区别

1、vue-angular

1）、vue在设计之初参考了很多angular的思想

2）、vue相比于angular来说更加的简单

3)、vue相当于angular要变得小巧很多，运行速度比angular快

4）、vue和angular绑定都可以用{{}}

5）、vue指令用v-xxx，angular用ng-xxx

6）、vue中数据放在data对象里面，angular数据绑定在$scope上面

7）、vue有组件化概念，angular中没有

2、vue-react

他们都有：

1）、react和vue都是用虚拟DOM Virtual DOM

2)、React和Vue都提供了响应式（Reactive）和组件化（Componsable）的视图组件

3）、React和vue都将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库

4）、React使用JSX渲染页面，Vue使用简单的模板

5）、Vue比react运行更快

vue的优点

体积小,数据驱动视图,组件化,虚拟dom

vue甚麽时候封装,如何封装组件,并使用

● 首先，使用Vue.extend()创建一个组件,挂载到vue原型上

● 然后，使用Vue.component()或者vue.user()方法注册组件

● 接着，如果子组件需要数据，可以在props中接受定义

● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

promise方法

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。状态不可逆,

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

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

Vue中key属性的作用

key值大多情况下使用在循环语句中，从本质来讲主要作用大概有以下两点：. 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，相当于唯一标识ID。. Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染， 因此使用key值可以提高渲染效率，同理，改变某一元素的key值会使该元素重新被渲染。key的作用让每个item有一个唯一的识别身份，可以下标值index或者id, 主要是为了vue精准的追踪到每一个元素，高效的更新虚拟DOM。

Vuex有那几种状态和属性?

vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。
最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值

vuex有哪几种状态和属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

vuex的State特性是？

stae就是存放数据的地方，类似一个仓库 , 特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）

vuex的Getter特性是？

getter用来获取数据，mapgetter经常在计算属性中被使用

vuex的Mutation特性是？

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作

vuex的优势

1 状态管理工具 核心是响应式的做到数据管理, 一个页面发生数据变化。动态的改变对应的页面

兄弟之间组件有大量通信的，建议一定要用VUEX，不管大项目和小项目

vue中响应式是什么

Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.defineproperty对数据做处理)。被解除过后的数据会有两个属性：一个叫getter，一个叫setter。

getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher监听，通知dom修改刷新。

Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

TIPS：两种情况新添加的属性都有没有getter和setter，数据变页面也不变：1. 对象数据的添加 2. 数组长度的改变

解决方式：动态的往里面添加数据，使用this.$set方法

axios内如何实现多个并发请求

axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求，可以实现在多个请求都完成后再执行一些逻辑。注意：该方法是axios的静态方法，不是axios实例的方法

在methods中定义请求方法，并return出去，不要写请求回调then()

在mounted周期同时发送两个请求，并在请求都结束后，输出结果

vue组件间传值

https://blog.csdn.net/qq_43161149/article/details/89191564

父子传值一般在子组件上绑定自定义的属性，然后子组件在实例中通过props接收该属性

子传父的话使用emit反向传值，通过注册自定义事件，在事件函数中接收值

兄弟之间传值有两种方式

1  子传给父，父再传给子

2  provide（提供） 和 inject （注入）两个属性

provide：相当于分享自己实例中的一些东西出去

inject ：用来接受provide分享出去的东西

provide(){}
inject:['app']

非兄弟之间

使用 vue 实例中的 emit（触发自定义事件）和 on（监听自定义事件）,不如用vuex

vue如何进行第三方库拓展

图表使用了extends方式，而公共业务server和view之间使用了mixins方式。对于二者的选择，我们通常会解释为extends的优先级高于mixins，但其真实的差异是由于其合并策略不同或者说在合并策略中执行的顺序不同导致的

get和post请求模板

axios.get("地址",{参数}).then()

axios.post("地址",data,{})

什么是Vue.nextTick()？？
 

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

2、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进 ==Vue.nextTick()== 的回调函数中

Vue.nextTick(callback) 使用原理：
原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

在vue的原生js操作dom在哪

要在mounted中使用，因为只有在执行mounted的时候，vue已经渲染了dom节点，这个时候是可以获取dom节点的，vue中尽量不去操作dom元素，选用ref操作属性获取

4.vue-cli+nginx代理跨域

利用webpack的webpack-dev-server，实现开发环境下，vue渲染服务和接口代理都是webpack-dev-server同一个,所以页面与代理之间不需要跨域.

跨域资源共享(CORS)