1、v-if与v-show的区别?
v-if的原理是根据判断条件来动态的进行增删DOM元素,
v-show是根据判断条件来动态的进行显示和隐藏元素,频繁的进行增删DOM操作会影响页面加载速度和性能所以此时使用v-show更合理。
只有v-if能和v-else连用进行分支判断,v-show是不能和v-else连用的。
2、生命周期有哪些?分别表示意义是什么?
beforeCreate():在实例生成之前
created():在实例生成之后
beforeMount():在模板已经被编译成函数之后,组件内容被渲染到页面之前
mounted():在组件内容被渲染到页面之后
beforeUpdate():当data中的数据发生变化时
updated():当data中的数据完成变化,同时页面完成更新后
VUE2:beforeDestroy()/VUE3:beforeUnmount():当Vue应用失效时
VUE2:Destroyed()/VUE3:unmounted():当Vue应用失效时,且dom完全销毁之后
3、nextTick的用途?
官方文档解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
应用场景:需要在视图更新之后,基于新的视图进行操作。
原因是Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
官方提示:注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted。
4、key的作用?
key的作用主要是为了高效的更新虚拟DOM。
另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们。
5、组件通信有哪些方式?
组件通信方式有8种:
1、props / $emit
2、$children / $parent
3、provide / inject
4、ref / refs
5、eventBus
6、Vuex
7、localStorage / sessionStorage
8、$attrs / $listenes
通信形式可归类为两类:父子组件之间的通信、非父子之间的通信(兄弟组件,隔代关系组件)
父子组件通信方式可用:1、2、3、4、8
兄弟组件通信方式可用:5、6
跨级组件通信可用:3、5、6、8
6、单页应用有哪些优缺点?
1、具有桌面应用的即时性、网站的可移植性和可访问性。
2、用户体验好、快,内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。
3、基于上面一点,SPA相对对服务器压力小。
4、良好的前后端分离。SPA和RESTful架构一起使用,后端不再负责模板渲染、输出页面工作,web前端和各种移动终端地位对等,后端API通用化。
5、对前端人员javascript技能要求更高,促使团队技能提升。
7、watch、computed有什么区别?
watch:
不支持缓存
支持异步
只可以设置一个函数,可以带有两个参数
监听数据必须是data
中声明过或者父组件传递过来的props
中的数据,当数据变化时,触发其他操作
不仅可以监听data中的数据,还可以监听路由的变化,
同时,在对于操作比较耗时的操作也是可以使用 watch 监听。例如用户注册时,检测账号是否可用。
watch对于引用类型是拿不到oldVal值,如果要深度监听需要添加deep:true属性。
computed:
支持数据的缓存。
函数内部的数据改变也会触发。
不支持异步,当computed
内部有异步操作时computed
无效
如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,一般用computed
computed
属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props
中的数据通过计算得到的值
8、路由模式有哪些?区别是什么?
有两种模式:hash哈希模式、history模式
hash哈希模式:#值后面哈希发生变化,不会导致浏览器向服务器发送请求,也就不会发生刷新页面。
history模式:则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误
9、vuex有哪些基本概念?
state
:用于数据的存储,是store中的唯一数据源
getters
:如vue中的计算属性一样,基于state数据的二次包装,常用于数据的筛选和多个数据的相关性计算
mutations
:类似函数,改变state数据的唯一途径,且不能用于处理异步事件
actions
:类似于mutation
,用于提交mutation
来改变状态,而不直接变更状态,可以包含任意异步操作
modules
:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护
10、$router与$route的区别
1. $route从当前router跳转对象里面可以获取name、path、query、params等(<router-link>传的参数由 this.$route.query或者 this.$route.params 接收)
2. $router为VueRouter实例。想要导航到不同URL,则使用$router.push方法;返回上一个history也是使用$router.go方法