vue整理笔记

什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

第一次页面加载会触发哪几个钩子？

会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

DOM 渲染在 哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

vue获取数据在哪个周期函数

一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

created和mounted的区别

答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

vue初始化页面闪动问题

答：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{ {message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

css样式里：
[v-cloak] {
display: none;
}。

如果没有彻底解决问题，则在根元素加上
style="display: none;" :style="{display: 'block'}"

Vue2中注册在router-link上事件无效解决方法

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

• 只用a标签，不适用button标签；
• 使用button标签和Router.navigate方法

Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

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

vue slot

简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

如何获取dom?

ref=“domName” 用法：this.$refs.domName

vue-loader是什么？

vue文件的一个加载器，将template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less；template可以加jade等；

请说出vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹是放静态资源；

components是放组件；

router是定义路由相关的配置;

app.vue是一个应用主组件；

main.js是入口文件。

Vue-router跳转和location.href有什么区别

使用location.href=’/url’来跳转，简单方便，但是刷新了页面；

使用history.pushState(’/url’)，无刷新页面，静态跳转

引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

Vue中双向数据绑定是如何实现的？

数据劫持 结合 发布订阅模式

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

说一下vue的生命周期

• beforeCreate(创建前)
  是new Vue()之后触发的第一个钩子，在当前阶段data,methods,computed以及watch上的数据和方法都不能被访问

• created(创建后)
  在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发update函数。可以做一些初始数据的获取。在当前阶段无法与DOM进行交互，如果非要想，可以通过vm.$nextTick来访问dom

• beforeMount(载入前)
  发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟DOM已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated

• mounted(载入后)
  在挂载完成后发生，在当前阶段，真实的DOM挂载完毕，数据完成双向绑定，可以访问到DOM节点，使用$refs属性对DOM进行操作

• beforeUpdate(更新前)
  发生在更新之前，也就是响应式数据发生更换，虚拟DOM重新渲染之前被触发，可以在当前阶段进行更改数据，不会造成重渲染。

• updated(更新后)
  发生在更新完成之后，当前阶段组件DOM已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

• beforeDestroy(销毁前)
  在实例销毁之前调用。实例仍然完全可用。

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

你的接口请求一般放在哪个生命周期中？

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted,需要放到created中

说一下computed和watch？

Computed本质是一个具备缓存的watcher,依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。（购物车商品结算的时候）

Watch没有缓存，更多的是观察的作用，可以监听某些数据进行回调。当我们需要深度监听对象中的属性时，可以打开deep:true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销。，当一条数据影响多条数据的时候就需要用watch（搜索数据）

v-if和v-show的区别

• 当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display),切换当前DOM的显示和隐藏
• 使用频繁切换时用v-show,较少改变时用v-if
• v-if是动态的向DOM树内添加或者删除DOM元素，消耗性能，而v-show的话，只会编译一次

组件中的data为什么是一个函数？

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

说一下v-model的原理

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这