-- --
正在获取
c'est la vie 我的的小世界
关于Vue的一些要点
发表于 2020-4-19 | | 杂谈

1.Vue的优点

答:

轻量级框架,只关注视图层,大小只有几十kb;

简单易学,中文文档,国人开发;

双向数据绑定,在数据操作上非常简单;

组件化,保留了React的优点,实现了HTML的封装和重用;

虚拟DOM,在Vue中不直接操作DOM,而是先用虚拟DOM最后再直接操作DOM。

运行速度更快,同样是操作虚拟DOM,Vue的性能比React要强大

2.vue-loader

处理.vue文件,将template/js/style转换成js模块。js可以写es6,style样式可以写scss或less,template可以加jade

3.axios

npm install axios --save装好后,用import引入,然后.get或.post。返回成功在.then函数中,失败在.catch函数中。

4.computed和watch

computed,当一个属性受多个属性影响时用computed。

watch,当一个属性影响多个属性时用watch

5.v-on可以监听多个事件

<input type="text" v-on="{input:onInput,focus:onFocus,blur:onBlur, }">

6.$nextTick

当修改了data的值后马上获取这个dom元素的值,是获取不到更新后的值,需要使用$nextTick的回调,才能在dom上获取到更新后的值

7.vue中的data为什么是一个函数

写成函数时,每个组件都会返回一份新的data,如果写成对象形式,会让所有组件示例共用一份data

8.Vue中双向数据绑定是如何实现的

通过数据劫持、发布订阅模式实现的,核心方法是Object.defineProperty()。数据和视图同步,数据变化视图也会变化,视图变化数据也会跟着变化。

9.单页面应用和多页面应用

单页面应用SPA,只有一个主页面,浏览器一开始就加载所有必须的html/js/css,所有的页面内容都包含在这个所谓的主页面中。在写的时候会把页面片段分开写,然后在交互的时候由路由程序动态载入,单页面的页面跳转仅刷新局部资源,多应用于PC端。

多页面MPA,页面跳转时整页刷新,有多个页面。

单页面优点:内容的改变不需要重新加载整个页面,对服务器的压力较小,切换页面内容时可以有比较炫的效果。

单页面缺点:不利于SEO;初次加载耗时多;页面复杂度提高很多;单页面不能用浏览器的前进后退功能,如果需要导航要自行实现前进后退。

10.v-if和v-for的优先级

v-if、 v-for一起使用时,v-for的优先级更高,这意味着v-if将重复运行在每个循环的item。所以不推荐同时使用,最好将v-if放到外层。

11.assets和static的区别

都是存放静态资源文件的,图片、字体、图标、样式文件。

assets中的压缩之后再上传,static的不会压缩而是直接上传。

建议:引入的第三方资源文件放在static中直接上传,自己写的样式文件最好在assets压缩再上传

12.vue的两个核心点

数据驱动:viewModel,保证数据和视图的一致性

组件系统:应用类UI可以看做组件树构成的

13.Vue和jQuery的区别

jQuery是使用选择器$选取DOM对象,对其进行赋值、取值、事件绑定等操作,与原生HTML相比的区别只在于更方便的选取和操作DOM对象。数据和界面是在一起的,比如要获取label标签的值"$("label").val()",还是依赖DOM元素的值。

而Vue是通过Vue对象将数据和View完全分离开来,对数据进行操作不再需要引用相应的DOM对象。

14.SPA首屏加载慢如何解决

安装动态懒加载所需插件;使用CDN资源

15.Vue-router跳转和location.href有什么区别

location.href = /url 刷新了页面。

router.push(/url)是静态跳转,不会刷新页面,使用了diff算法,实现了按需加载,减少了DOM的消耗。vue-router实际上是使用history.pushState来实现的。

16.vue slot

父组件想要在子组件内放一些DOM,这些DOM的显示就是slot负责的内容

17.vue-router 里params和query的区别

query要用path引入,params要用name引入。query会显示在浏览器url中而params不会。页面刷新,query不会丢失,params会丢失。

18.vue初始化页面闪动问题

在Vue初始化之前,div是不归vue管的,所以代码未被解析,可能会出现{{msg}}字样,虽然可能会很短暂,但是还是要解决一下。可以在根元素上加上 style="display: none;" :style="{display:  block }"

19.什么是Vue的生命周期?有什么作用?

每个Vue实例在被创建时都要经过一系列的初始化过程,例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM。同时会在这个过程中会运行一些叫做生命周期钩子的函数,这给用户在不同阶段添加自己的代码的机会,例如如果要通过某些插件操作DOM节点,如在页面渲染完后弹出广告窗,那最早只能在mounted中进行。

20.每个周期具体适合哪些场景

beforeCreate:在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。

created:data和methods都已经被初始化好了,可以使用data和methods了。

beforeMount:在内存中已经编译好了模板,但是还没有挂载到页面中,此时页面还是旧的

mounted:Vue实例已经初始化完成了,组件脱离了创建阶段,进入到了运行阶段,可以操作页面上的DOM节点了

beforeUpdate: 此时页面中的显示数据还是旧的,data中的数据时更新后的数据,页面还没有和最新的数据保持同步

updated:页面显示的数据和data中的数据已经保持同步了,都是最新的

beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这时所有的data、methods、指令、过滤器...都是处于可用状态,还没有真正被销毁

destroyed:这时所有的data、methods、指令、过滤器...都不可用了,组件已经被销毁了

21.vue-router实现路由懒加载(动态加载路由)

三种方式:

第一种:vue异步组件技术,vue-router配置路由,可以实现按需加载。这种情况下一个组件生成一个js文件。

第二种:路由懒加载,使用import

第三种:webpack提供的require.ensure(),多个路由指定相同的chunkName会合并打包成一个js文件

22.vuex有哪几种属性?

state:基本数据,数据源存放地

getters:从基本数据派生出来的数据

mutations:提交更改数据的方法,同步

actions:像一个装饰器,包裹mutations,使之可以异步

modules:模块化vuex

23.vue中ajax请求应该写在组件的methods里还是vuex的actions?

如果请求来的数据不需要被公用,就不用放在vuex的state里,放在组件里就可以了。如果其他地方要复用,应该放在action里

24.渐进式框架的理解

每个框架都有自己的主张,渐进式意味着主张最少,可以根据不同的需求选择不同的层级。比如Vue,你可以在原有的大系统上,只用它来实现一两个组件,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配自己设计的整个下层用。它只做自己该做的事,不会强迫你必须怎么用。


发表评论:


GO