vue知识点集锦

1、vue的优点?

  • 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb
  • 简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习
  • 双向数据绑定:保留了angular的特点,在数据操作方面更为简单
  • 组件化:保留了react的优点,实现了HTML的封装和重用,在构建单页面应用方面有着独特的优势
  • 视图、数据、结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
  • 虚拟DOM:DOM的操作是非常耗费性能的,不再使用原生的DOM操作节点,极大解放DOM操作,但具体操作的还是DOM,不过是换了一种方式
  • 运行速度更快:相比较react而言,同样是操作虚拟DOM,就性能而言,vue存在很大的优势

2、vue父组件向子组件传递数据?

  props

3、vue子组件向父组件传递事件?

  $emit()

4、v-show和v-if指令的共同点和不同点?

  共同点:都能控制元素的显示和隐藏

  不同点:实现本质方法不同,v-show本质是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向DOM树内添加或删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。总结:如果要频繁地切换某节点,使用v-show(切换开销小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。

5、如何让css只在当前组件中起作用?

  在组件中的style标签加上scoped

6、<keep-alive></keep-alive>的作用是什么?

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

7、如何获取DOM?

  ref="domName"  用法:this.$refs.domName

8、说几种vue的指令和它的用法?

  v-model----双向数据绑定

  v-for----循环

  v-if  v-show----显示与隐藏

  v-on----绑定事件  v-once----只绑定一次

9、vue-loader是什么?使用它的用途有哪些?

  vue的一个加载器,将template/js/style转换成js模块。

  用途:js可以写ES6、style样式可以写scss或less、template可以加jade等。

10、为什么要使用key?为什么不使用下标作为key值?

  需要使用key来给每一个节点做一个唯一标识,diff算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟DOM。

  因为数据可能会有增删改查的操作,所以index并不是实时准确的,最好用静态key值,比如id。

11、axios及安装?

  axios是请求后台资源的模块。npm i axios --save安装好,js中使用import引入,然后 .get 或 .post 。成功返回在 .then 函数中,失败返回在 .catch 函数中。

12、v-model的使用?

  v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:v-bind绑定一个value属性;v-on指令给当前元素绑定input事件。

13、vue-cli项目中src目录每个文件夹和文件的用法?

  assest----存放静态资源

  components----组件

  router----定义路由的相关配置

  app.vue----应用主组件

  main.js----入口文件

14、分别简述computed和watch的使用场景?

  computed:当一个属性受到多个属性影响的时候就需要用到computed,比如购物车。computed还可以用来简化深层次的属性渲染,接收辅助函数中的mapState、mapGetters。

  watch:当一条数据影响到多条数据的时候就需要用到watch,比如搜索数据。

15、v-on可以监听多个方法吗?

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

16、$nextTick()的作用?

  当你修改了data的值然后马上获取这个DOM元素的值,是不能获取到更新后的值,你需要使用$nextTick()这个回调,让修改后的data值渲染更新到DOM元素之后再获取,才能成功。

17、vue组件中data为什么必须是一个函数?

  因为JavaScript的特性所导致,在component中,data必须是以函数的形式存在,不可以是对象。组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。

18、渐进式框架的理解?

  主张最少,可以根据不同的需求选择不同的等级。

  每个框架都不可避免会有自己的一些特点,从而对使用者有一定的要求,这些要求就是主张。渐进式框架就是没有多做职责之外的事。

  渐进式框架的大概意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分。

19、vue中双向数据绑定是如何实现的?

  vue双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着发生变化,视图变化,数据也随之改变。核心:关于vue双向数据绑定,其核心是Object.defineProperty()方法。

20、单页面应用和多页面应用的区别和优缺点?

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

  多页面应用(MPA),就是指一个应用中有多个页面,页面跳转时是整页跳转。

  单页面的优点:用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点SPA对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容时的专场动画)。

  单页面的缺点:不利于SEO;导航不可用,如果一定要用导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进和后退功能,所以需要自己建立堆栈管理);初次加载耗时多;页面复杂度提高很多。

21、v-if和v-for的优先级?

  当v-if和v-for一起使用时,v-for具有比v-if更高的优先级,这意味着v-if将分别重复运行于每个v-for循环中。所以不推荐v-if和v-for一起使用,可以用v-show和v-for一起使用。如果v-if和v-for一起使用,vue中会自动提示v-if应该放到外层去。

22、assest和static的区别?

  相同点:assest和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件夹下。

  不同点:assest中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assest中放置的静态资源文件进行打包上传,所谓打包简单点理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一起上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩而直接上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assest中打包后的文件体积较大点,在服务器中就会占据更大的空间。

  建议:将项目中template需要的css文件js文件等都可以放置到assest中,走打包这一流程,减少体积。而项目中引入的第三方的资源文件如iconfont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不需要再处理,可以直接上传。

23、

猜你喜欢

转载自www.cnblogs.com/wuqilang/p/12455411.html