vue面试题总结

1. 谈谈对Vue的认识

vue的语法很简单,很容易上手,可以说就是对着模板来填充内容.想要动态绑定的数据,那么就在data中填充内容.想要具体的method,那么就在methods属性中填充内容.想要显示变量就用双花括号.可以说是很简单了.

vue使用的是MVVM模式,并且使用简单的命令加数据来进行DOM操作,让我避开了进行繁杂的获取,创建和删除DOM元素的操作.

借助vue的vue-router插件,可以很方便的实现单页面应用的搭建.并且可以实现浏览器中的回退效果.

vue的组件化开发可以说很方便的就实现了组件的复用.之前想要写复用组件的时候,一方面要写重复的html,另一方面把对应的CSS文件和JS文件独立开来,需要的时候进行引入.但是vue把三者放在同一个文件中,可以说非常的贴心,修改也很方便.

2. Vue组件中，在生命周期的哪个阶段，可以开始访问操作DOM?

什么阶段才能调用DOM

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

什么阶段能发起请求

• 可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
• 但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
  • 能更快获取到服务端数据，减少页面loading 时间；
  • ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

3.父组件与子组件在销毁过程中怎么执行生命周期钩子函数？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父组件更新过程

父 beforeUpdate -> 父 updated

• 子组件销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

• 父组件销毁过程

父 beforeDestroy -> 父 destroyed

4.计算属性(computed)与观察钩子函数(watch)之间的区别

1. 计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。
2. 侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

5.v-show与v-if有什么区别

两个都是让元素不可见。但是两个选项有区别

1. v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大
2. v-show控制的时元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签

6.Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单点说，方便父子组件及组件之间的数据传递。
有 5 种，分别是 state、getter、mutation、action、module

vuex 的 store 是什么？
vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性。

vuex 的 getter 是什么？
getter 可以对 state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters。

vuex 的 mutation 是什么？
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。也就是说，前面两个都是状态值本身，mutations才是改变状态的执行者。
注意：mutations只能是同步地更改状态。

vuex 的 action 是什么？
action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中。

vuex 的 module 是什么？
面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。

7.$router和$route的区别

this.$router是VueRouter的实例方法，当导航到不同url，可以使用this.$router.push方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。

$route是$router跳转到的当前一个对象，里面包含该对象的path、query、name 、params

this.$route相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等。

8.Vue和React的区别

区别

监听数据变化的实现原理不同

• Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
• React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染

为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而React更强调数据的不可变。所以应该说没有好坏之分，Vue更加简单，而React构建大型应用的时候更加棒。

Vue中默认是支持双向绑定的。在Vue1.0中我们可以实现两种双向绑定：

• 父子组件之间，props 可以双向绑定
• 组件与DOM之间可以通过 v-model 双向绑定

在 Vue2.x 中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。
所以现在我们只有 组件 <–> DOM 之间的双向绑定这一种。

然而 React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。

不过由于我们一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了。

HoC (高阶组件) 和 mixins

在 Vue 中我们组合不同功能的方式是通过 mixin，而在React中我们通过 HoC (高阶组件）。

React 最早也是使用 mixins 的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了 mixinx 转而使用 HoC，关于mixin究竟哪里不好，可以参考React官方的这篇文章 Mixins Considered Harmful

而 Vue 一直是使用 mixin 来实现的。

为什么 Vue 不采用 HoC 的方式来实现呢？

高阶组件本质就是高阶函数，React 的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。

但是Vue就不行了，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的props怎么接收到的？这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个高阶组件，那么这个被包装的组件就无法正常工作了。

组件通信的区别

在Vue 中有三种方式可以实现组件通信：

• 父组件通过 props 向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据，而通过 事件的机制来处理子组件向父组件的通信
• 子组件通过 事件 向父组件发送消息
• 通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据，可以跨越多个层级。

另外有一些比如访问 parent/parent/parent/children等比较dirty的方式这里就不讲了。

在 React 中，也有对应的三种方式：

• 父组件通过 props 可以向子组件传递数据或者回调
• 可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。

可以看到，React 本身并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

模板渲染方式的不同

在表层上， 模板的语法不同

• React 是通过JSX渲染模板
• 而Vue是通过一种拓展的HTML语法进行渲染

但其实这只是表面现象，毕竟React并不必须依赖JSX。
在深层上，模板的原理不同，这才是他们的本质区别：

• React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的
• Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现

对这一点，我个人比较喜欢React的做法，因为他更加纯粹更加原生，而Vue的做法显得有些独特，会把HTML弄得很乱。举个例子，说明React的好处：

react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

Vuex 和 Redux 的区别

从表面上来说，store 注入和使用方式有一些区别。

在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：

• 使用 dispatch 和 commit 提交更新
• 通过 mapState 或者直接通过 this.$store 来读取数据

在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。

另外 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

从实现原理上来说，最大的区别是两点：

• Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
• Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）

而这两点的区别，其实也是因为 React 和 Vue的设计理念上的区别。React更偏向于构建稳定大型的应用，非常的科班化。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用 Vue 的感觉。

各自优点

React

1. React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。最大限度减少DOM交互。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3. 一切都是component：代码更加模块化，重用代码更容易，可维护性高。这样当某个或某些组件出现问题是，可以方便地进行隔离。每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。
4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。减少了重复代码，这也是它为什么比传统数据绑定更简单。
5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

vue

1. 性能高效
2. 双向数据绑定
3. 学习难度低，上手简单。

React 的缺陷

1. React 只是一个视图库，而不是一个完整的框架。
2. 对于 Web 开发初学者来说，有一个学习曲线。
3. 将 React 集成到传统的 MVC 框架中需要一些额外的配置。
4. 代码复杂性随着内联模板和 JSX 的增加而增加。
5. 如果有太多的小组件可能增加项目的庞大和复杂。

9.Vue3了解吗？

在Vue 3中，你的API的使用将不是简单的通过导入Vue实例来使用这个API，每个全局API将会以exports的形式单独导出

基于Proxy的响应：在Vue 3中已经不再采用这种定义的方式，改用ES6中提供的Proxy这个API实现数据响应的功能。

新的组件渲染模式：在Vue 3中重新定义了渲染的模式，在重新渲染时不会重新渲染没有发生改变的组件，只会重新渲染发生改变的组件

在Vue 3.0中摈弃了2x中使用options创建组件的方式，改用Composition Api

10. vue的生命周期

4个阶段，8个生命周期函数

组件创建时（creating):beforeCreate created

模板渲染时（mounting）:beforeMount mounted

数据更新时（updating）:beforeUpdate updated

组件卸载时（destorying）:beforeDestory destoryed

- 创建期间的生命周期函数：
+ beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
+ created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
+ beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
+ mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
+ beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
+ updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
+ beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
+ destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

11. 导航钩子有哪些,他们有哪些参数？（导航守卫相关）

关于路由的生命周期函数（Vue-router)

主要分为两种：全局式 局部式

全局钩子函数：

beforeEach:所有路由切换时开始调用，最先执行

afterEach:每次路由切换离开时调用

局部钩子函数：

beforeEnter

局部单个组件：

beforeRouterEnter

beforeRouterUpdate

beforeRouterLeave

完整的导航解析流程：

1. 导航被触发
2. 在失活的组件里调用离开守卫
3. 调用全局的 beforeEach 守卫
4. 在重用的组件里调用 beforeRouteUpdate 守卫
5. 在路由配置里调用 beforEnter
6. 解析异步路由组件
7. 在被激活的组件里调用 beforeRouteEnter
8. 调用全局的 beforeResolve 守卫
9. 导航被确认
10. 调用全局的 afterEach 钩子
11. 触发 DOM 更新
12. 在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

12.Vue双向数据绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

<div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
  </div>
  <script>
    var obj = {};
    Object.defineProperty(obj, 'txt', {
      get: function () {
        return obj;
      },
      set: function (newValue) {
        document.getElementById('txt').value = newValue;
        document.getElementById('show').innerHTML = newValue;
      }
    })
    document.addEventListener('keyup', function (e) {
      obj.txt = e.target.value;
    })
  </script>

13.路由懒加载的原理？

为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

_webpack_require_.e方法是实现懒加载的核心，在这个方法里面处理了三件事情。
使用JSONP模式加载路由对应的js文件，也可以称为chunk。
设置chunk加载的三种状态并缓存在installedChunks中，防止chunk重复加载。
处理chunk加载超时和加载出错的场景。

14.Vue-router的模式和原理

hash模式

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件

window.onhashchange = function(event){
 
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
 
}

history模式

因为HTML5标准发布，多了两个 API，pushState() 和 replaceState()。通过这两个 API （1）可以改变 url 地址且不会发送请求，（2）不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改。

除此之外，还有popState().当浏览器跳转到新的状态时，将触发popState事件.

修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

切换历史状态

包括back,forward,go三个方法，对应浏览器的前进forward，后退back，跳转go操作。 有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：

1. history.go(-2);//后退两次
2. history.go(2);//前进两次
3. history.back(); //后退
4. hsitory.forward(); //前进

区别：

• 前面的hashchange，你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
• history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

当用户刷新页面之类的操作时，浏览器会给服务器发送请求，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

history模式怕啥
不怕前进，不怕后退，就怕刷新，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。

在history模式下，你可以自由的修改path。history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。

当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

15.keep-alive和对应的生命周期函数

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated

keep-alive 提供了include和exclude两个属性，允许组件有条件的缓存

实现原理是在created的时候，将需要缓存的vnode节点放到cache中，在render是，根据name再进行取出

16.vue组件中怎么批量获取使用vuex的getters的多个值？？

mapGetters?

17.终止请求和请求超时的方法

当前端请求发送并且响应未完成时，终止请求，不再返回数据

1、Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。利用axios请求的config参数，向axios添加一个包含cancelToken的config配置对象。

当前端请求发送并且响应未完成时，用时太长，终止请求，不再返回数据

2、请求超时的设置。示例：

 axios.get('http://xxx.com/index/index', {
  		timeout: 300000  //这里来设置请求超时的时间
    })
  }).then(res => {})
  .catch(err => {
	console.log('数据请求超时')
  })

18.Vue传值方式

六种传值方式为:

• 属性传值 父传子
• 发布订阅 EventBus 子改父 $on/$emit
• Provider/inject
• slot
• $refs
• $parent/$child
• 本地存储 vuex localStorage
• 路由传值

属性传值

1.可传值类型

• 固定值
• 绑定属性
• 方法
• 本类对象

2.操作步骤

①.父组件调用子组件的时候，绑定动态属性

②. 在子组件里边通过props,接收父组件传过来的值

3.适用场景

仅适用于 父组件给子组件传值

$refs传值

父组件通过$refs获取子组件的数据和方法

1.可获取类型

• 子组件属性
• 子组件方法

2.操作步骤

1.调用子组件的时候调用一个ref

2.在父组件中通过
this.$refs.header.属性this.$refs.header.方法

3.适用场景

子组件给父组件传值

$parent

子组件通过$parent获取父组件的数据和方法，这种传值方式实际上类似于上边的属性传值中父组件给子组件的传递了子类对象this,只不过Vue官方给封装好了。

1.可获取类型

• 父组件属性
• 父组件方法

2.操作步骤

直接在子组件中使用this.$parent.XX，不需要做任何多余操作。

3.适用场景

父组件给子组件传值

通知广播

1.可传值类型

Vue官网只写了[...args]，故通知/广播传值我们定为只传基本数据类型，不能传方法。

2.操作步骤

1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例

2、在要广播的地方引入刚才定义的实例

3、通过 VueEmit.$emit(‘名称’,‘数据’)传播数据

4、在接收收数据的地方通过 $on接收广播的数据VueEmit.$on(‘名称’,function(){})

3.适用场景

适用于父子组件、兄弟组件间进行传值。

本地传值

本地传值方式对于Vue而言有两种，一种是JS的localStorage，另一种Vuex。

路由传值

1.父组件push使用this.$router.push2.在子组件中获取参数的时候是this.$route.params

19.computed和watch的区别

计算属性computed :

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

   3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

   5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

1.不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

immediate：组件加载立即触发回调函数执行，

deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别

20.axios实现拦截的原理

1. 关于拦截，这里只说原理，前端的请求，最终还是离不开 ajax，像vue 的 vue-resource 、axios，都只是对ajax进行了统一的封装，它暴露出来的拦截器，其实就是写了一个方法，把ajax写在这个方法里面，（我们先说请求拦截器哈）在执行这个方法的时候，先将请求时要添加给请求头的那些数据（token、后端要的加密码…具体要看实际情况）先执行一遍，都赋值给一个变量，然后再统一传给ajax，接下来就是执行ajax，这就是所谓的请求拦截，其实就是先执行要添加的数据，然后再执行ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器；
2. 响应拦截器：响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；

21.微信小程序生命周期

分为应用生命周期和页面生命周期

应用生命周期

属性	类型	默认值	必填	说明
onLaunch	function		否	监听小程序初始化。
onShow	function		否	监听小程序启动或切前台。
onHide	function		否	监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。

页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发

22 Vue插件

什么是vue插件

官方解释

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者属性。如: vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

为防止 多次注册同一个插件： 我们可以传递一个可选的对象

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

还用过哪些插件？

qs库 ElementUI

vue-datepicker - 日历和日期选择组件

vue-region-picker - 选择中国的省份市和地区

vue-baidu-map- 基于 Vue 2的百度地图组件库

lazy-vue - 懒加载图片

axios Vuex

等等等等

23.项目中如何封装一个组件

1.首先对这个组件的要实现的功能需求进行分析

2.然后定义一个.vue结尾的文件

3.在文件中添加

4.完成需求的相关功能，留好插槽

24.Vue路由懒加载的实现方式

1.vue异步组件

/*每个组件生成一个js文件，实现组件的懒加载*/

{
    path: '/path',
    name: 'componentName',
    component: resolve => require(['@/componentPath'], resolve),
  }

2.import按需加载（官方写法）

能够被webpack自动代码分割

允许将不同的组件打包到一个异步块中，使用命名chunk(特殊注释语法)。

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

const comA = () => import('url')
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

3.webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。

这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

{  
    path: '/home',   name: 'home',   
    component: r =>require.ensure([], () => r(require('@/components/home')), 'demo')
 }

25.项目中遇到过什么问题？

1.在vue项目中关于定时器的使用（很恶心）

假如，我们在A组建中声明了一个定时器进行倒计时此时 我们在定时器中一直打印时间戳，此时我们通过路由跳转到下一个组件页面，按照正常理论来说，A组件在跳转后整个组件就会被销毁，到达B组件时A组件已经没有了。

但是在我们有定时器的情况下 此时跳转过后 定时器依然会存在。所以我们要在页面销毁时候将当前页面的定时器clear掉。