面试题 - Vue相关

vue.js

Vuex

vuex是专门为vue应用程序开发的一个状态管理器，它集中式管理所有组件的状态。

• state : 以对象的形式来储存全部应用层级的状态
• mutation：更改vuex中state的唯一方法
• action ：不直接操作state，action用来提交mutation改变state的状态，可以包含异步操作
• getter：相当于vue的computed计算属性

vuex使用场景

• 开店引导页(保存标识)

Vue-Router

vueRouter是vue官方提供的一个路由管理器，与vue高度集成，使得vue构建单页面应用极其简单。

• <router-link>
• <router-view>
• <keep-alive>
• router.beforeEach
• router.afterEach
• 路由守卫相关，以及应用场景
• 视图过渡
• 官方文档 : https://router.vuejs.org/zh/

组件通信

• props & $emit父子组件
• $emit & $on 兄弟组件
• eventBus 事件管理总线
• vuex 状态管理

Vue路由传值

• :id , 动态匹配

// 定义
const router = new VueRouter({
  routes:[
    {
       path:'/foo/:id',component:Foo}
    }
  ]
})

// 访问
<p>{{$route.params.id}}</p>

• :id 动态匹配 开启 props:true

// 定义
const router = new VueRouter({
  routes:[
    {
       path:'/foo/:id', component:Foo ，props:true}
    }
  ]
})

// 访问
props:['id']
<p>{{id}}</p>

• :id 动态匹配 , props指定为一个对象

// 定义
const router = new VueRouter({
  routes:[
    {
       path:'/foo/:id', component:Foo ，props:{ name:'long', age:20 }}
    }
  ]
})

// 访问
props:['name','age']
<p>{{name}} --- {{age}}</p>

• :id 动态匹配 , props指定为一个函数

// 定义
const router = new VueRouter({
  routes:[
    {
       path:'/foo/:id', component:Foo ，props:route => (
        {
          name:"longer",
          age:18,
          id:route.params.id  //访问路由匹配的id参数
        }
      )
    }
  ]
})

// 访问
props:['name','age','id']
<p>{{name}} --- {{age}} --- {{id}}</p>

• 命名路由

const router = new VueRouter({
  route:[
    {path:'/user/:id', name:'user',props:true }
  ]
})

// 使用
<router-link :to="{name:'user',params:{id:123}}"></router-link>
// 或者使用router.push方法
router.params({name:'user',params:{id:123}})