vue相关知识点及面试

### vue

#### vue生命周期

beforeCreated

`实例初始化，数据观察和event/watch事件配置之前被调用`

created

`实例创建后立即调用，数据观测，数据和方法运算，watch/event事件回调`

beforeMount

`挂载之前被调用：相关的render函数首次调用`

mounted

`el被实例替换，并挂载到实例上去之后调用该钩子。mounted不会承诺所有的子组件都一起挂载，如果想要整个视图都渲染完毕，可以用vm.$nextTick替换mounted`

beforeUpdate

`数据更新时调用，适合在更行之前访问现在有的dom比如手动移除已添加的事件监听器`

> 该钩子在服务器渲染期间不会调用，因为只有初次渲染会在服务器端进行

updated

`由于数据更改导致的虚拟dom重新渲染和打补丁，在这之后会调用该钩子。在这个钩子被调用时，组件DOM已经更新，所以你现在可以依赖于DOM操作。`

activated

`keep-alive组件激活时调用`

deactivated

`keep-alive组件停用时调用`

beforeDestroy

`实例销毁之前调用。实例仍然可用`

destroyed

`Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。`

### vue项目大致

### 创建

```vue 

vue init webpack 项目名      //   creat 项目名  新版本

cd 项目名   

npm i   下载关联组件

npm run dev   运行

```

使用

```vue

导入axios插件：

1.新建http.js模块->插件代码

2.导入axios

3.按照文档开发插件  开发插件

import axios from 'axios'

const Http = {}

Http.install = function(Vue) {

  Vue.prototype.$http = axios

}

export default Http

4.main。js引入插件

5.Vue.ues（Http）    、、全局使用axios

```

> 给单元格内容包裹容器template（vue提供的组件）x

```vue

1.通过template的属性slot-scope可以把上层数据传递给层里进行使用

2.slot-scope的值可以随便写 通常命名为 scope

3."scope"会自动去找上一级数据 el-table :data 的值 tableData

4. scope.row 是数据源中的每个元素 这里是对象 (row 不能随便写)

```

eg：

```js

<template slot-scope="scope">

  {{ scope.row.create_time|fmtDate}}

</template>

```

> 页面变化之前判断是否登录

```vue

router.beforeEach((to, from, next) => {  

  to：即将要进入的目标

  from：单前导航正要离开的路由

  next：进行管道的下一个钩子函数

}

```

> 操作dom

`ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

### vue-router

#### 嵌套路由

```vue

const router = new VueRouter({

  routes: [

    { path: '/user/:id', component: User,

      children: [

        {

          // 当 /user/:id/profile 匹配成功，

          // UserProfile 会被渲染在 User 的 <router-view> 中

          path: 'profile',

          component: UserProfile

        },

        {

          // 当 /user/:id/posts 匹配成功

          // UserPosts 会被渲染在 User 的 <router-view> 中

          path: 'posts',

          component: UserPosts

        }

      ]

    }

  ]

})

```

### 重定向

```vue

const router = new VueRouter({

  routes: [

    { path: '/a', redirect: '/b' }

  ]

})

```

### 动态路由匹配

一个“路径参数”使用冒号 `:` 标记。当匹配到一个路由时，参数值会被设置到`this.$route.params`

可以通过`this.$router.push（路径)来实现页面跳转

### vuex

> Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

- **state**，驱动应用的数据源；

- **view**，以声明方式将 **state** 映射到视图；

- **actions**，响应在 **view** 上的用户输入导致的状态变化。

> namespaced:true

>

> 前提：在模块中开启命名空间

### Mutation 必须是同步函数

Action 可以包含任意异步操作

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 `context.commit`

### 插件

> vuex-router-sync

使用插件，使路由配置直接在context中

### 组件通信

`父子通信`

1. 在子组件props:["msg"]

2. 使用组件时 <child-a :msg="父组件data的数据">

3. 在子组件的template {{msg}}

`子传父`

1. 在子组件中 this.$emit(自定义事件名xxx,数据a)

2. 在使用子组件时 child-a @xxx="父组件methods中的方法fnx"

3. 在父组件的methods中fnx(argv){此时 argv就是数据a}

`兄弟传信`

1. A 触发事件 vm.$emit(事件名,数据a)

2. B 绑定事件 vm.$on(事件名,(argv)=>{此时 argv就是数据a})