首页 > 技术文章 > vue知识点

lambertlt 2021-05-24 00:25 原文

  1. vue 全家桶:vue-router,vuex,vue-resources||axios

  2. Mvvm 的理解:由Model,View,ViewModel三部分构成,Model数据模型(可以定义数据修改和操作的业务逻辑)、ViewUI组件,负责将数据模型转化为UI展现出来、ViewModel是同步View和Model的对象

  3. vue 路由传参的方式:router.js 后边跟:id 配置参数、query 方法传参、name方法传参、vue 自带标签<router-link:to> 标签传参

  4. vue 组件之间的传参:父传子 props、子传父this.$emit、非父子组件eventHub中转站this.$on、vuexstate存的变量,mutations改变的状态actions出发的行为(方法)

  5. vue-router有哪几种导航钩子:1⃣️全局导航钩子,作用:跳转前进行判断拦截,2⃣️全局解析守卫,在导航被确认前,所有组件内守卫和异步路由组件被解析之后,解析守卫被调用,3⃣️单独路由独享的守卫,在路由配置时定义,与全局守卫的方法是一样的。4⃣️组件内的守卫。直接在路由组件内定义守卫。

  6. vue常用指令:v-once,v-for,v-if,v-show,v-on,v-model

  7. vue2.0生命周期:beforeCreated、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed`

  8. slot 插槽是什么?详细的用法?:2.0,3.0 是不同的说法。

  9. vue 响应式原理的理解:2.0 和 3.0的区别:

  10. 直接对对象属性进行添加和删除会不会直接响应到视图中?也就是说数组的更新方法?并说明原因?:直接修改不会影响到视图,需要使用this.$set()方法。原因:vue不能监测到对象属性的添加或删除。由于初始化实例时对属性进行getter/setter转化过程,所以属性必须在data对象上存在才能让vue转换它,这样才能让它响应的。

  11. 如何创建一个公公的全局组件,并在每个页面中调用以及如何创建并调用公共的方法?:将创建好的组件或者js方法导出并挂载到vue实例上。

  12. v-if 和 v-show的异同?:两者都实现显示隐藏的功能,前者是直接销毁和重建Dom,后者通过修改元素的display属性

  13. <keep-alive></keep-alive>的作用是什么?:<>包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。这样可以减轻服务器压力,提高性能,每次返回列表时通过缓存而不是重新渲染

  14. <router-link> 属性以及方法?::to 相当于herfreplace属性加上后不会留下历史记录、tag属性,具有tag属性的router-link会被渲染成相应的标签,active-class属性,设置链接激活时的class属性:默认值router-link-active,在router.js里边配置这个属性、exact属性,严格模式、方法router-link默认出发router.push(location),如果设置的replace则触发router.replace(location)router.go(n)在history记录中前进后退多少步

  15. v-once的作用和用法?:只渲染元素和组件一次,随后的渲染,使用了此指令都会作为静态内容跳过,用于优化性能

  16. 如何解决在加载页面时出现的闪烁问题?:在跟节点上加上v-cloak指令即可

  17. vue-cli 如何解决跨域?:jsonp,后台加请求头。

  18. vue如何在父组件中调用子组件的方法:子组件标签上添加ref="child",父组件方法里this.$refs.child.jumpTiger();就可以了

  19. 谈谈你对minxins混入的理解以及使用方法:

  20. 谈谈你对watch和computed的理解以及二者的区别:watch用于数据监听操作,computed用于大量的数据计算

  21. vue,react,angular使用了虚拟dom使得渲染速度加快

  22. v-if和v-for谁的优先级高:v-for优先级高,同时使用时可通过在v-for外嵌套一层框子实现v-if

  23. v-on可以绑定多个方法么?:可以,直接在后面连写就行,<div v-on="click:myclick,mouseleave:myMouseleave}"></div>

推荐阅读