常见vue问题

本文深入探讨Vue.js中的父子组件通信、Vuex状态管理和常见实践,包括props、emit、$ref、provide/inject、事件总线等通信方式。同时,详细解析vue-router的路由守卫及其应用场景,以及Vue 2与Vue 3的区别。此外,讨论了v-if/v-show的使用场景和事件修饰符的作用。最后,分析了Vue的优势与不足,并介绍了Pinia作为Vue的状态管理新选择。
摘要由CSDN通过智能技术生成

1.父子间传值的几种方式

父级-子级 props
子级-父级 emit
$ref
provide inject
中央事件总线
$parent $root
$attr $listener
vuex

2.vue是否是单向数据流 是
vuex是否是单向数据流 是

v-model是vue中双向数据流的一种实现
  1. 父组件内调用子组件的实例

    this.$refs.ref

  2. vue实现网页的前进后退

  3. vue给对象添加新属性界面不刷新

  4. vue2和vue3的区别

  5. v-if v-show

     都是控制元素的显示和隐藏
     v-if 操作dom控制元素,隐藏时节点在页面内不渲染;
     v-show通过css样式dispplay:none控制元素,隐藏时在页面仍然渲染;
    
  6. .prevent .self .once

     prevent 阻止默认事件
     self 当自身事件发生时触发
     once 仅在第一次事件发生时触发
    
  7. vue的优点和缺点

     优点:组件化,指令系统,双向数据绑定,轻量级,开发简单,操作虚拟dom速度快
     缺点:vue不支持ie8,市场占比小
    
  8. 路由守卫

    全局守卫:beforeEach afterEach
    路由守卫:beforeEnter
    组件守卫:beforeRouteEnter beforeRouteUpdate beforeRouteLeave
    

    所有的路由守卫都是三个参数:

    to:要进入的目标路由(去哪儿)
    from:要离开的路由(从哪儿来)
    next:是否进行下一步(要不要继续)
    注意:afterEach没有next参数
    

    关于next:

    写next()相当于next(true)继续执行
    不写相当于next(false)终止执行
    next(path)跳转 例如:next('/login')
    

    关于不同守卫适用的场景:

    全局前置守卫:进入页面登陆判断、管理员权限判断、浏览器判断等;全局守卫只要有跳转就会
    执行守卫函数;
    路由守卫:单个路由配置的时候也可以设置的钩子函数,路由守卫只有跳转到当前路由时才执行
    路由守卫函数,一般用于跳转判断;
    
  9. 修饰符

    表单修饰符:v-model.lazy .trim .number
    事件修饰符:
    鼠标按钮修饰符:
    键盘修饰符:
    v-bind修饰符:

  10. 前端如何处理token的缓存

  11. echarts如何安装到项目中

  12. computed watch区别

    computed 计算属性,依赖于其他属性的属性值,有缓存,只有当依赖的值发生变化才更新;适合在模板渲染中
    watch是在监听的属性值发生变化时,在回调中执行一些逻辑;适合在实现复杂的业务逻辑
    
  13. 页面跳转的几种方式

  14. 单页面应用和多页面应用的区别
    spa  mpa
url模式 hash history
seo

  15. webpack的入口文件 出口文件
    入口文件默认为src/index.js,出口文件默认是dist/main.js
    默认入口和出口是可以修改的

  16. 什么是pinia?Vue中怎么使用它?
    Pinia 是 Vue.js 的轻量级状态管理库

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值