vue知识点总结，你想要的几乎都有哦！

今天来对vue框架相关知识做个总结~
声明：其中包括一些网上视频课程、官网中讲到的内容。
废话不多说，知识点来咯~

1.什么是MVVM？
MVVM 模式不需要用户收到操作 dom 元素,将数据绑定到 viewModel 层上，会自动将数据渲染到页面中，视图变化会通知 viewModel层 更新数据。ViewModel 就是我们 MVVM 模式中的桥梁。

2.MVC和MVVM的优缺点
✏MVC：
优点：简单易懂、层次分明
缺点：c（处理model和view之间的交互，把model中数据拿过来给view用）的量级重，维护成本很高。
🦆MVVM：
优点：低耦合。View可以独立于model变化和修改，一个viewmodel可以绑定到不同的view上。可重用性。可以把一些视图逻辑放在vm里，让很多view重用这段视图逻辑。
缺点：数据绑定后难调试，数据绑定和数据转化需要花费更多的内存成本。

3.双向数据绑定的原理（响应式数据的原理）
✏默认 Vue 在初始化数据时，会给 data 中的属性使用 Object.defineProperty 重新定义所有属性。当页面取到对应属性时，会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通知相关依赖进行更新操作。
🦆简言之：vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

4.如何检测数组变化
Vue 将 data 中的数组，进行了原型链重写。指向了自己定义的数组原型方法，这样当调用数组api 时，可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。
✏包含一组观察数组的变异方法，它们也将会触发视图更新.

* push()
* pop()
* shift()
* unshift()
* splice()
* sort()
* reverse()

🦆非变异方法不会改变原始数组，但总是返回一个新数组。

* filter()
* concat() 
* slice()

5.为何Vue采用异步渲染

因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染.所以为了性能考虑。 Vue会在本轮数据更新后，再去异步更新视图!

6.nextTick实现原理
nextTick 方法主要是使用了宏任务和微任务,定义了一个异步方法.多次调用 nextTick 会将方法存入队列中，通过这个异步方法清空当前队列。 所以这个 nextTick 方法就是异步方法。（在生命周期中调用接口，数据请求过来但是还没渲染可以考虑下这个方法哦。async await也适用哦）

7.computed、methods、watch
✏计算属性computed中的方法相对于methods中的会有缓存，不更改不会刷新。
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。
🦆侦听属性watch，相对于监听数据变化做计算，computed的性能更好一些。computed写的代码量少于watch。
👂当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的。

8.Watch中的deep:true 是如何实现的
当用户指定了 watch 中的deep属性为 true 时，如果当前监控的值是数组类型。会对对象中的每一项进行求值，此时会将当前 watcher 存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数据更新。

9.Vue组件的生命周期
✏beforeCreate：在实例初始化之后，数据观测(data observer) 之前被调用。
🦆created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(dataobserver)，属性和方法的运算， watch/event 事件回调。🔟可以进行一些数据，资源的请求。
👂beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
🔪mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。🔟可以进行一些DOM操作。
🐶beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。🔟 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
🥄updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。🔟在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。
💗beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。🔟可能在当前页面中使用了 $on 方法，那需要在组件销毁前解绑。清除自己定义的定时器。解除事件的绑定 scroll mousemove …
🐱destroyed：Vue实例销毁后调用。调用后， Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。🔟清空定时器，解除绑定事件。

10.ajax请求放在哪个生命周期中
✏在created的时候，视图中的 dom 并没有渲染出来，所以此时如果直接去操 dom 节点，无法找到相关的元素。
🦆在mounted中，由于此时 dom 已经渲染出来了，所以可以直接操作 dom 节点
一般情况下都放到 mounted 中,保证逻辑的统一性,因为生命周期是同步执行的， ajax 是异步执行的。
👂服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中。

11.Vue中模板编译原理
将 template 转化成 render 函数。

12.v-if和v-show的区别

✏v-if： 如果条件不成立不会渲染当前指令所在节点的 dom 元素。元素的创建或者销毁。
🦆v-show ：只是切换当前 dom 的显示或者隐藏。相当于CSS 属性 display。
👂v-show 不支持 <template> 元素，v-if支持。
🔪v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

13.不推荐同时使用 v-if 和 v-for的原因
✏当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
🦆这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用。

如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素
<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>

14.用vnode来描述一个DOM结构
虚拟节点就是用一个对象来描述真实的 dom 元素
15.简述Vue中diff算法原理
✏.先同级比较，在比较子节点。
🦆.先判断一方有儿子一方没儿子的情况。
👂.比较都有儿子的情况。
🔪.递归比较子节点。

diff算法的时间复杂度
两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成O(n) 复杂度的问题(只比较同级不考虑跨级问题) 在前端当中， 你很少会跨越层级地移动Dom元素。所以 Virtual Dom只会对同一个层级的元素进行对比。

16.组件渲染和更新过程
渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，并进行实例化。最终手动调用$mount() 进行挂载。更新组件时会进行 patchVnode 流程.核心就是diff算法。

17.v-for中为什么要用key

18.v-if使用key—是否复用

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" >     <1>
  <input placeholder="Enter your username" key="username-input">    <2>
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" >    <3>
  <input placeholder="Enter your email address" key="email-input">  <4>
</template>

<1>和<3>中    两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder
<2>和<4>中    每次切换时，输入框都将被重新渲染

19.组件中的 data为什么是一个函数
同一个组件被复用多次，会创建多个实例。这些实例用的是同一个构造函数，如果 data 是一个对象的话，那么所有组件都共享了同一个对象。为了保证组件的数据独立性要求每个组件必须通过 data 函数返回一个对象作为组件的状态。因此每个实例可以维护一份被返回对象的独立的拷贝。

20.Vue中事件绑定的原理
✏原生 dom 事件的绑定,采用的是 addEventListener 实现。
Vue 在创建真是 dom 时会调用 createElm ,默认会调用 invokeCreateHooks
会遍历当前平台下相对的属性处理代码,其中就有 updateDOMListeners 方法,内部会传入 add 方法。

vue 中绑定事件是直接绑定给真实 dom 元素的。

🦆组件绑定事件采用的是 $on 方法。

组件绑定事件是通过 vue 中自定义的 $on 方法来实现的。

21.v-model中的实现原理
v-model 可以看成是 value+input方法 的语法糖 input v-model ；checkbox v-model ；select v-model。组件的v-model 就是value+input的语法糖

<el-checkbox :value="" @input=""></el-checkbox> 
<el-checkbox v-model="check"></el-checkbox>

可以自己重新定义 v-model 的含义

22.v-html会导致哪些问题
✏可能会导致 xss 攻击
🦆v-html 会替换掉标签内部的子元素

23.Vue父子组件生命周期调用顺序

✏加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
🦆子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
👂父组件更新过程
父beforeUpdate->父updated
🔪销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

组件的调用顺序都是先父后子,渲染完成的顺序肯定是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

24.Vue组件如何通信? 单向数据流

✏父子间通信 父->子通过 props 、子-> 父$on、$emit (发布订阅)
🦆获取父子组件实例的方式 $parent、$children
👂在父组件中提供数据子组件进行消费 Provide、inject 插件
🔪Ref 获取实例的方式调用组件的属性或者方法
🥄Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue
🥢Vuex 状态管理实现通信 $attrs $listeners

数据只能从一个方向来修改状态。如果父组件给N个子组件进行了数据传递，那么某一个子组件中修改了这个数据，就会导致其他组件的数据也会发生改变。因此数据只能从一个方向来修改状态，子组件不能直接修改从父级传递过来的数据。

25.为什么要使用异步组件
如果组件功能多打包出的结果会变大，我可以采用异步的方式来加载组件。主要依赖 import() 这个语法，可以实现文件的分割加载。

components:{ 
    AddCustomerSchedule:(resolve)=>import("../components/AddCustomer")
    // require([])
 }

26.作用域插槽
✏插槽

<app><div slot="a">xxxx</div><div slot="b">xxxx</div></app> 
slot name="a" 
slot name="b

创建组件虚拟节点时，会将组件的儿子的虚拟节点保存起来。当初始化组件时,通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]}。
渲染组件时会拿对应的slot属性的节点进行替换操作。（插槽的作用域为父组件）

🦆作用域插槽
作用域插槽在解析的时候，不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。（插槽的作用域为子组件）

27. keep-alive
keep-alive 可以实现组件的缓存，当组件切换时不会对当前组件进行卸载,常用的2个属性include / exclude ,2个生命周期 activated , deactivated LRU算法。
✏activated执行时间：keep-alive组件激活时调用。（keep-alive）组件是内置的组件会在切换的过程中保持当前的状态，防止重新渲染。
🦆deactivated执行时间：keep-alive 组件停用时调用。

28.Vue中常见性能优化
✏编码优化:
🔟不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的watcher；
🔟vue 在 v-for 时给每项元素绑定事件需要用事件代理；
🔟SPA 页面采用keep-alive缓存组件；
🔟拆分组件( 提高复用性、增加代码的可维护性,减少不必要的渲染 )；
🔟v-if 当值为false时内部指令不会执行,具有阻断功能，很多情况下使用v-if替代v-show；
🔟key 保证唯一性 ( 默认 vue 会采用就地复用策略 )；
🔟Object.freeze 冻结数据；
🔟合理使用路由懒加载、异步组件；
🔟尽量采用runtime运行时版本；
🔟数据持久化的问题 （防抖、节流）。
🦆Vue 加载性能优化:
🔟第三方模块按需导入 ( babel-plugin-component )；
🔟滚动到可视区域动态加载 ( https://tangbc.github.io/vue-virtual-scroll-list )；
🔟图片懒加载 (https://github.com/hilongjw/vue-lazyload.git)。
👂用户体验:
🔟app-skeleton 骨架屏；
🔟app-shell app壳 ；
🔟pwa serviceworker。
🔪SEO 优化：
🔟预渲染插件 prerender-spa-plugin；
🔟务端渲染 ssr。
🥄打包优化:
🔟使用 cdn 的方式加载第三方模块；
🔟多线程打包 happypack splitChunks 抽离公共文件；
🔟sourceMap 生成。
🥢缓存，压缩
🔟客户端缓存、服务端缓存；
🔟服务端 gzip 压缩。

29.Vue3.0有哪些改进
✏Vue3 采用了TS来编写；（pass:学习完react也要学习ts啦）
🦆支持 Composition API ；
👂Vue3 中响应式数据原理改成 proxy ；
🔪vdom 的对比算法更新，只更新 vdom 的绑定了动态数据的部分。

30.hash路由和history路由

onhashchange #
history.pushState h5 api

31.Vue-Router中导航守卫有哪些
🔟导航被触发。
🔟在失活的组件里调用离开守卫。
🔟调用全局的 beforeEach 守卫。
🔟在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
🔟在路由配置里调用 beforeEnter 。
🔟解析异步路由组件。
🔟在被激活的组件里调用 beforeRouteEnter 。
🔟调用全局的 beforeResolve 守卫 (2.5+)。
🔟导航被确认。
🔟调用全局的 afterEach 钩子。
🔟触发 DOM 更新。
🔟用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由守卫：路由跳转前后做的一些验证。
路由常见的钩子函数：berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。
全局守卫：可以验证是否登陆router.beforeEach。

32.action 和 mutation区别
✏mutation 是同步更新数据(内部会进行是否为异步方式更新数据的检测) $watch 严格模式下会报错。
🦆action 异步操作，可以获取数据后调佣 mutation 提交最终数据。

33.vuex工作原理

当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。

actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。

mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。

34.vue中自定义指令

Vue.directive():
参数1：指令名称
参数2：指令实现的函数，在回调函数中第一次参数是指令绑定的元素，
            参数二是一个对象其中对象中有value属性代表的是表达式返回的结果，
            还有modifiers属性是指令的修饰符。

35.路由跳转的方式

✏a标签进行跳转。例如<a href="#/home">首页<a>
🦆router-link进行跳转 例如：<router-link to="/home">首页<router-link>
👂编程式路由 例如：this.$router.push()

           路由跳转 ：this.$router.push()
           路由替换：this.$router.replace()
           后退：this.$router.back()
           前进 ：this.$router.forward()

36.如何检测路由参数的变化

通过属性监听来实现或者beforeRouterUpdate()
    
watch:{
    "$router"(){
    }
}

beforeRouterUpdate(to,from,next);

37.Object.freeze()
是ES5新增的特性，可以冻结一个对象，防止对象被修改。
vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。

38.Object.keys()
方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

39.vue监听浏览器刷新

✏在mounted中加入如下代码
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
🦆在methods中加入如下代码
beforeunloadHandler (e) {     
        e = e || window.event    
         if (e) {
           e.returnValue = '关闭提示' 
        }
        return '关闭提示'
}
👂最后销毁
destroyed () {  
  window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
},

40.vue中动画如何实现

哪个元素需要动画就给那个元素加transition标签

进入时class的类型分为以下几种
    <name>-enter     <name>-enter-active     <name>-enter-to

离开时class的类型分为以下几种
    <name>-leave     <name>-leave-active     <name>-leave-to

如果需要一组元素发生动画需要用标签    <transition-group></transition-group>

以上就是我总结的一部分知识点，如果有错误欢迎指出！