自己总结的前端知识点（vue部分）

Posted 2021-01-02 fengyouqi

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可以写es6、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之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动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节点，里面有（标签名、子节点、文本等等）