vue总结的知识点

Posted 2021-01-26 houjl

1、Vue生命周期钩子，都是干嘛用的？

Vue实例从创建到销毁的过程，就是生命周期。
Vue的生命周期包括：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
在Vue的整个生命周期中，提供了一系列的事件，可以注册javascript方法，达到控制整个过程的目的，在这些JavaScript方法中的this直接指向的是vue的实例。
在Vue的整个生命周期中，实例可以调用一些生命周期钩子，这提供了执行自定义逻辑的机会。
Vue提供的生命周期钩子如下：
①　beforeCreate
在实例初始化之后，数据观测(data observer，开始监控Data对象数据变化)和初始化事件(init event，Vue内部初始化事件)之前被调用。
②　created
在实例已经创建完成之后被调用。实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，event事件回调。挂载阶段尚未开始，$el 属性不可见。
③　beforeMount
在挂载开始之前被调用。相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
④　mounted
在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。此时模板中的html渲染到了html页面中，此时一般可以做一些Ajax操作。注意mounted只会执行一次。
⑤　beforeUpdate
在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
⑥　updated
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
⑦　beforeDestroy
在实例销毁之前调用。实例仍然完全可用。
⑧　destroyed
在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
⑨　activated和deactivated配合keep-alive标签使用
activated
和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用beforeDestroy和destroyed的话，就太浪费性能了，实例被激活时使用，用于重复激活一个实例的时候
⑩ deactivated
实例没有被激活时

2、Vue数据双向绑定原理，以及各个阶段的绑定顺序，手写一下object.defineproperty实现的过程
首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性（此时应注意description中get和set不能与描述属性共存）
数组的实现与对象不同。
同时运用观察者模式实现wather，用户数据和view视图的更新

3、methods、computed、watch区别

methods：事件调用的钩子
computed:
// 计算属性是根据他依赖的值计算的，当依赖值发生变化，其跟着改变
// 计算属性是依赖缓存

watch: {
// watch 和 computed 区别:
// watch 强调的是 观测某个状态，根据状态的改变而做事情
// 而computed 强调的是 根据状态返回一个新的状态

4、v-if 和v-show区别
（1）相同点：v-if 和 v-show 动态控制dom元素显示隐藏。
（2）不同点：v-if显示隐藏是将dom元素整个添加或删除，（例如：<div v-if=""></div> ，v-if 当值为 true时，显示div ，当值为false时，改元素消失，代码也会消失，相当于将代码删除了，当在为true时，页面会重新渲染div）；而v-show显示隐藏只是将css属性设为display: block 或none。dom元素还在。
（3）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。
（4）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留。
（5）性能消耗：一般的，v-if有更高的切换消耗，而v-show有更多的初始化渲染消耗。
（6）使用场景：如果需要频繁的切换而对安全性无要求，使用v-show。如果在运行时，条件不可能改变，则使用v-if较好。

5、Vuex用过哪些方法，如何在项目中使用它
Store
表示对Vuex对象的全局引用。组件通过Store来访问Vuex对象中的State
State
Vuex对象的状态，即其所拥有的数据
Getter
相当于Store的计算属性。因为就像计算属性一样，Getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。下面会说到具体的使用场景
Mutation
定义了对State中数据的修改操作。组件使用State中的数据的时候并不能直接对数据进行修改操作，需要调用Mutation定义的操作来实现对数据的修改。这也是Vuex定义中所说的用相应的规则来让数据发生变化的具体实现
Action
Mutation中定义的操作只能执行同步操作，Vuex中的异步操作在Action中进行，Action最终通过调用Mutation的操作来更新数据

2.vuex用过dispatch(),commit()，mapstate，mapgetters,mapmutation，mapaction。

3.在项目中的使用：首先通过npm install vuex --save安装vuex，在项目的源代码文件夹下（如src文件夹）新建一个store文件夹(叫别的名字也行)。store文件夹下新建一个store.js文件，用来存放Vuex实例。可以把store注入到在vue实例中，那么所有的组件都可以通过this.$store.state去调用。
流程：vue Components使用dispatch()方法触发action里面的函数，通过在Action里面写公共的异步调用获取数据，供公共的组件渲染。Action使用commit()方法触发mutations里面的函数，Mutations去修改state，state重新render vue Components。
4.vuex的使用便于大型项目管理，Store包含多个Module，Module包含State、Mutation和Action。
5.mutation和action写在methods中
6.getters和state写在computed中.

6、服务端渲染nuxt相关问题
与传统 SPA（Single-Page Application - 单页应用程序）相比，服务器端渲染(SSR)的优势主要在于：
更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。
使用服务器端渲染(SSR)时还需要有一些权衡之处：
开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用；一些外部扩展库(external library)可能需要特殊处理，才能在服务器渲染应用程序中运行。
涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源(CPU-intensive - CPU 密集)，因此如果你预料在高流量环境(high traffic)下使用，请准备相应的服务器负载，并明智地采用缓存策略。
在对你的应用程序使用服务器端渲染(SSR)之前，你应该问的第一个问题是，是否真的需要它。这主要取决于内容到达时间(time-to-content)对应用程序的重要程度。例如，如果你正在构建一个内部仪表盘，初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染(SSR)将是一个小题大作之举。然而，内容到达时间(time-to-content)要求是绝对关键的指标，在这种情况下，服务器端渲染(SSR)可以帮助你实现最佳的初始加载性能。
nuxt:
作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR。
可以作为一个 Node.js 应用跑在服务器上，也可以把整站直接编译为静态 HTML。另外这个框架支持自动生成路由，用来写展示型的页面是非常不错的选择。
NUXT 能为我们做什么
无需再为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行
无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装
内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件

7、nextTick是什么的意思？
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM