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
原文地址:https://www.cnblogs.com/houjl/p/10110925.html