vue总结的知识点

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

时间: 2024-10-24 12:31:08

vue总结的知识点的相关文章

Vue的相关知识点

Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的优点,加上a

【转】[总结]vue开发常见知识点及问题资料整理(持续更新)

1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及在vux中使用post提交表单数据需要qs库序列化 4.vue中实现全局的setCookie,getCookie以及delCookie方法笔记 5.webpack中alias配置中的"@"是什么意思? 6.webpack proxyTable 代理跨域 7.如何在 vue 项目里正确地引用

Vue的基础知识点

vue是一款 mvvm 做单页面应用的渐进式js框架 vue的使用: <div id="app"> <p>{{msg}}</p> <input type="text" v-model="msg"> </div> <script> new Vue({ el:"#app", data:{msg:"你好Vue"} }) </script

Vue todolist练习 知识点

1.localStorage的用法总结 (1).这儿是什么:局部存储器.它是html5新增的一个本地存储API,所谓localStorage就是一个小仓库的意思,它有5M的大小空间,存储在浏览器中,我们可以通过js来操纵localStorage. (2)用法:1.localStorage通过使用setItem(key,value)来设置元素以及值,如localStorage.setItem("name","猪小明"): 2.用getItem(key)来获取元素值,如

vue路由的知识点

this.$router.push({name:'login',query:{name:'ww',age:18}}) 传数据 this.$route.query 拿数据 meta:{ "dl":true} //权限路由 一旦设置了这个meta标签就会在访问该路由时进行meta里面的值的判断. 由此实现了登录拦截 props 也可以在routes里面使用 设置成true时,可以在改路由的组件内props 接收到值. 路由全局的钩子函数 全局守卫 router.beforeEach((to

vue 项目总结 知识点补充

1.页面加载后自动执行函数  2.向后端请求数据方法 2-1 :axios 的安装使用 2-2 在组件中使用 2-3 发送请求 2-4 接收数据后渲染 2-5 后端数据渲染 2-6 解决跨域问题 任务: 原文地址:https://www.cnblogs.com/Rivend/p/11958018.html

Vue核心原理知识点

数据代理(MVVM.js)1.通过一个对象代理对另一个对象中属性的操作(读/写)2.通过vm对象来代理data对象中所有属性操作3.好处:更方便的操作data中的数据4.基本实现流程1>通过Object.defineProperty()给vm添加与data对象的属性对应得属性描述符2>所有添加的属性都包含getter/setter3>在getter/setter内部去操作data中对应的属性数据 模板解析(compile.js)用来初始化显示1.模板解析的关键对象:compile.js2

走进Vue.js

走进Vue.js Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.js来构建一个中大型的前端项目,同时做好相应的部署与优化工作. 文章将以PPT图片附加文字介绍的形式展开,不会涉及知识点的具体代码,点到为止.有兴趣的同学可以查看相应的文档进行了解. Vue.js简介 从上图的介绍中我们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架,其和

前端开发之走进Vue.js

Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.js来构建一个中大型的前端项目,同时做好相应的部署与优化工作. 文章将以PPT图片附加文字介绍的形式展开,不会涉及知识点的具体代码,点到为止.有兴趣的同学可以查看相应的文档进行了解. Vue.js简介 从上图的介绍中我们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架,其和jQuery最大的