面试必备干货-Vue篇

1、钩子函数

• beforeCreate
  this变量不能使用，data下的数据、methods下的方法以及watch中的事件都不能捕获到
• created
  可以操作vue实例中的数据和各种方法，但不能对"dom"节点进行操作；
• beforeMount
  完成了 dom节点 和 data 初始化。占坑
• mounted
  完成挂载。dom节点被渲染到文档内，能对"dom"节点进行操作
  注意：mounted在整个实例的生命周期中只执行一次。
• computed
  是把所有需要依赖其他值计算的值写成对象的key值。
• watch
  把监听的值写成对象的key值

2、vueX的简单原理

单向数据流: state-view-actions 运行原理:

• vue 组件通过 dispatch 来触发 vuex 的 actions
• vuex 的 actions 触发自己内部的 mutations
• mutations 触发内部的数据源 state
• 数据源 state 反过来渲染 vue 组件
  每一个vuex的核心就是一个是store(仓库)。store相对于是一个容器，里面存放着你的项目中的大部分状态。

3、为什么vue中的data要用return返回

不使用return包裹的数据会在项目的全局可见，造成变量污染；
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

4、keep-alive缓存机制

当引入keep-alive ，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以，activated中应留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。

• 全部缓存

<keep-alive>
    <router-view></router-view>
</keep-alive>

• 部分缓存

// 在路由引入处设置（一般是App.vue）
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

// 在路由处设置router.js
{
    path: '/',
    name: 'Hello',
    component: Hello,
    meta: {
        keepAlive: true// 需要缓存
    }
},

5、父子组件如何传值

• 父传子 props

// 父组件
<child :cname="name" :cage="age"></child>

// 子组件
props: ['cname', 'cage']

• 子传父 $emit

// 子组件
<div @click="childClick"></div>
...
methods: {
  childClick() {
    this.$emit('personName': 'lucy') // 向父级传值"lucy"
  }
}

// 父组件
<child :personName="personName"></child>
methods: {
    personName(name){ // 父组件接收
      console.log(name) // lucy
    }
}