最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > 工具与技巧> vue 知识点总结

vue 知识点总结

文章作者:网友投稿 发布时间:2019-06-22 09:16:58 来源:网络

vue 如今是前端的三大主流框架之一,在市场上占有很大的比例,以下也是小编给大家总结的一些 vue 相关知识,希望能够帮助大家更好地学习 vue 技术!

vue 如今是前端的三大主流框架之一,在市场上占有很大的比例,以下也是小编给大家总结的一些  vue 相关知识,希望能够帮助大家更好地学习 vue 技术!


1、对于Vue是一套渐进式框架的理解

Vue 核心功能是一个视图模板引擎,可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。可以在核心功能的基础上任意选用其他的部件。这就是“渐进式”,就是 Vue 的使用方式。


2、vue.js的两个核心是什么?

vhx.png

3、请问 v-if 和 v-show 有什么区别?

v-if 判断条件是否渲染,是惰性的,初始渲染时条件为假时什么也不做;

v-show是 display: block/none;元素始终都会渲染;在项目中如果需要频繁的切换则使用v-show较好,运行条件很少改变,则使用v-if。


4、vue常用的修饰符

vxsf.png



5、vue中 key 值的作用

v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。主要是为了高效的更新虚拟DOM。


6、$nextTick的使用:

在修改数据之后立即使用这个方法,获取更新后的 DOM。


7、Vue 组件中 data 为什么必须是函数?

每用一次组件,就会有一个新实例被创建。每个实例可以维护一份被返回对象的独立的拷贝,每个对象都是独立互不影响的。


8、v-for 与 v-if 的优先级

v-for 具有比 v-if 更高的优先级。

v-if 将分别重复运行于每个 v-for 循环中。vue风格指南提示永远不要把 v-if 和 v-for 同时用在同一个元素上。


9、vue中子组件调用父组件的方法

vfzj.png


10、vue中 keep-alive 组件的作用

keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。

include - 字符串或正则表达式,只有名称匹配的组件会被缓存;

exclude 反之亦然。 include="a,b" :include="/a|b/" :include="['a', 'b']"


11、vue中如何编写可复用的组件?

规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名。

数据扁平化:定义组件接口时,尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个简单类型的数据。这样做有下列几点好处:

(1) 组件接口清晰。

(2) props 校验方便。

(3) 当服务端返回的对象中的 key 名称与组件接口不一样时,不需要重新构造一个对象。

可复用组件只实现 UI 相关的功能,即展示、交互、动画,如何获取数据跟它无关,因此不要在组件内部去获取数据。

可复用组件应尽量减少对外部条件的依赖。

组件在功能独立的前提下应该尽量简单,越简单的组件可复用性越强。

组件应具有一定的容错性。


12、什么是 vue 生命周期和生命周期钩子函数?

从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。 

总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。


13、vue 生命周期钩子函数有哪些?

beforeCreate(创建前) 在数据观测和初始化事件还未开始;

created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来;

beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上;

mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互;

beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程;

updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用;

beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用;

destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

14、vue如何监听键盘事件中的按键?

监听keyup事件并添加按键修饰符,对一些常用按键vue提供了别名,或者使用keyCode,vue也支持复合按键。


15、vue更新数组时触发视图更新的方法

vgx.png


16、vue中对象更改检测的注意事项

vjc.png


17、解决非工程化项目初始化页面闪动问题

vue页面在加载的时候闪烁花括号{}},v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

vclock.png


18、v-for产生的列表,实现active的切换

vfor.png


19、v-model语法糖的组件中的使用

vmodel.png


20、十个常用的自定义过滤器

vglq.png


21、vue等单页面应用及其优缺点

vyqd.png


22、什么是vue的计算属性?

在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式。计算属性基于它们的依赖进行缓存的;只在相关依赖发生改变时它们才会重新求值。


23、计算属性的缓存和方法调用的区别

vhc.png


24、vue-cli提供的几种脚手架模板

vcli.png


25、vue父组件如何向子组件中传递数据?

通过父组件v-bind传递数据子组件props接收数据


26、vue弹窗后如何禁止滚动条滚动?

vgd.png


27、vue-cli中自定义指令的使用

vzl.png

以上是我的分享,希望能够帮助到大家,谢谢!

上一篇: 正则表达式教程

下一篇: Vue Router知识点

共有0条评论网友评论