前端知识点整理（一）vue部分

1.MVVM
model-view-viewModel，model是数据与业务逻辑，view是UI界面，viewModel是一个对象用于实现model与view的同步。
ViewModel 经过双向数据绑定把 View 层和 Model 层链接了起来。

2.双向数据绑定
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。

3.MVVM 与MVC
主要区别是controller控制器演变成了viewModel，不用手动将model数据更新到view，减小了大量dom操做，提高了页面渲染性能。

4.生命周期
建立前/后：
　　在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结构依然存在

5.父子组件通讯
父组件在标签上定义传值，子组件经过props接受传值；父组件在标签上定义传递方法，子组件经过$emit调用父组件的方法并传递参数。

6.组件的定义使用
通常在components目录建立自定义组件；在须要的页面导入import from;在components属性上面注入自定义组件；在template视图view中使用；

7.关于路由
声明式路由：<router-link :to="">
编程式路由：
　　router.push({ name: 'user', params: { userId: 123 }});命名的路由
　　router.push({ path: 'register', query: { plan: 'private' }});带查询参数的路由，有path会忽视params

8.vue配合webpack 按需加载
不进行页面按需加载引入方式：import home from '../../common/home.vue'
进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

9.关于store
state：全局状态；
getter：store的扩展，相似state的计算属性
mapState/mapGetter辅助函数帮助咱们生成计算属性，通常结合扩展运算符...mapState()用于vue实例中的computed：
mutations:包含事件类型和回调函数：
state: {
　　count: 1
},
mutations: {
　　increment (state,n) {
　　　　// 变动状态
　　　　state.count += n;
　　}
}
调用：store.commit('increment',10);
mutation 都是同步事务
actions: actions 提交的是 mutations，而不是直接变动状态;actions能够包含异步操做；实际的购物车示例，涉及到调用异步 API 和分发多重 mutation
actions: {
　　checkout ({ commit, state }, products) {
　　　　// 把当前购物车的物品备份起来
　　　　const savedCartItems = [...state.cart.added]
　　　　// 发出结帐请求，而后乐观地清空购物车
　　　　commit(types.CHECKOUT_REQUEST)
　　　　// 购物 API 接受一个成功回调和一个失败回调
　　　　shop.buyProducts(
　　　　　　products,
　　　　　　// 成功操做
　　　　　　() => commit(types.CHECKOUT_SUCCESS),
　　　　　　// 失败操做
　　　　　　() => commit(types.CHECKOUT_FAILURE, savedCartItems)
　　　　)
　　}
}
module:模块儿

10.<keep-alive></keep-alive> 缓存不活动的组件实例，主要用于保留组件状态或避免从新渲染。

11.v-el提供一个在页面上已存在的 DOM 元素做为 Vue 实例的挂载目标.能够是 CSS 选择器，也能够是一个 HTMLElement 实例

12.vue使用插件的步骤
通常在入口js文件main.js中vue实例化以前，采用import导入，或者采用require导入，而后vue.use()
例如：
import ElementUI from 'element-ui'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(ElementUI)
Vue.use(VueAwesomeSwiper)

13.vue中经常使用的生命周期钩子函数
created:实例已经建立完成以后调用，实例已经完成数据观测，属性和方法的运算，watch/event事件回调。挂在阶段没有开始，$el属性目前还不可见；
mounted:el被新建立的$el替换，并挂载到实例上去以后调用该钩子，
activated: keep-alive 组件激活时调用

14.activeclass 是vue-router模块的router-link组件的属性。

15.怎么定义vue-router的动态路由？如何获取传过来的动态参数？
在router目录下的index.js文件中，对path属性加上/:id；
使用router对象的params.id；this.$route.query或者this.$route.params

16.vue-router有哪几种导航钩子？
全局导航钩子：
　　//定义一个路由
　　const router = new VueRouter({ ... })
　　// 点击导航前调用
　　router.beforeEach((to, from, next) => {})
　　// 点击导航后调用
　　router.afterEach(route => {})
单个路由独享的钩子：
　　const router = new VueRouter({
　　　　routes: [
　　　　　　{
　　　　　　　　path: '/foo',
　　　　　　　　component: Foo,
　　　　　　　　beforeEnter: (to, from, next) => {},
　　　　　　}
　　　　]
　　});
组件内的钩子：
　　beforeRouteEnter (to, from, next) {},
　　beforeRouteUpdate (to, from, next) {},
　　beforeRouteLeave (to, from, next) {}
　　router.beforeEach(to,from,next)，做用：跳转前进行判断拦截。

17.什么是vue生命周期
答： Vue 实例从建立到销毁的过程，就是生命周期。也就是从开始建立、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，咱们称这是 Vue 的生命周期。

18.vue生命周期的做用是什么
答：它的生命周期中有多个事件钩子，让咱们在控制整个Vue实例的过程时更容易造成好的逻辑。

19.vue生命周期总共有几个阶段
答：能够总共分为8个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后

20.第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

21.DOM 渲染在 哪一个周期中就已经完成
答：DOM 渲染在 mounted 中就已经完成了。

22.简单描述每一个周期具体适合哪些场景
beforecreate : 能够在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 若是对数据统一处理，在这里写上相应函数
beforeDestroy : 能够作一个确认中止事件的确认框
nextTick : 更新数据后当即操做dom
　　//改变数据
　　vm.message = 'changed'
　　//想要当即使用更新后的DOM。这样不行，由于设置message后DOM尚未更新
　　console.log(vm.$el.textContent) // 并不会获得'changed'
　　//这样能够，nextTick里面的代码会在DOM更新后执行
　　Vue.nextTick(function(){
　　　　console.log(vm.$el.textContent) //能够获得'changed'
　　})

23.说出至少4种vue当中的指令和它的用法？
v-if：判断是否隐藏；v-for：数据循环；v-bind:绑定一个属性；v-model：实现双向绑定

24.vue-loader是什么？使用它的用途有哪些？
.vue文件的一个加载器，解析和转换.vue文件，将其中的js css html提取并交由相应的解析器。
用途：js能够写es六、style样式能够scss或less、template能够加jade等

25.scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
答：css的预编译。
使用步骤：
第一步：先装css-loader、node-loader、sass-loader等加载器模块
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：在同一个文件，配置一个module属性
第四步：而后在组件的style标签加上lang属性 ，例如：lang=”scss”
特性:
能够用变量，例如（$变量名称=值）；
能够用混合器，例如（）
能够嵌套

26.为何使用key？
避免某些标签元素的复用；采用v-for渲染列表时，若是数据项的顺序变了，若是不用key，vue就会复用已存在的元素，达不到想要的真实顺序。

27.VNode是什么？虚拟 DOM是什么？
Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树创建起来的整个 VNode 树的称呼。

28.$set
Vue 不能检测到对象属性的添加或删除。Vue 不能检测如下变更的数组：
1. 当你利用索引直接设置一个项时，例如： vm.item[index] = newValue
2. 当你修改数组的长度时，例如： vm.items.length = newLength
可使用Vue.set(object, key, value) 和 this.$set(object, key, value)

29.插槽<slot>

30.axios是什么？怎么使用？描述使用它实现登陆功能的流程？
答：请求后台资源的模块。npm install axios -S装好，而后发送的是跨域，需在配置文件中config/index.js进行设置。
后台若是是Tp5则定义一个资源路由。js中使用import进来，而后.get或.post。返回在.then函数中若是成功，失败则是在.catch函数中

31.axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操做？axios.put(‘api/user/8′)呢？
答：跨域，添加用户操做，更新操做。

32.自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：
全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另一个是函数。
组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding

33.Vue的双向数据绑定原理是什么？(vue data是怎么实现的？)
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：须要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每一个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变更，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通讯的桥梁，主要作的事情是:
一、在自身实例化时往属性订阅器(dep)里面添加本身
二、自身必须有一个update()方法
三、待属性变更dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM做为数据绑定的入口，整合Observer、Compile和Watcher三者，经过Observer来监听本身的model数据变化，经过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通讯桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变动的双向绑定效果。

34.聊聊你对Vue.js的template编译的理解？ 答：简而言之，就是先转化成AST树，再获得的render函数返回VNode（Vue的虚拟DOM节点） 详情步骤： 首先，经过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式）， compile是createCompiler的返回值，createCompiler是用以建立编译器的。另外compile还负责合并option。 而后，AST会通过generate（将AST语法树转化成render funtion字符串的过程）获得render函数，render的返回值是VNode， VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）