9月25日

1 父组件可以监听到子组件的生命周期吗？

比如父组件Parent 和子组件Child，parent要监听到子组件child挂载 mounted 就做一些逻辑处理可以使用emit 来监听只不过事件名和钩子函数同名，当子组件发布时，即执行this.$emit('钩子函数created/mounted',参数)时，在父组件则可以监听到，然后执行回调

//Parent 事件后面是child函数 
<Child @mounted="doSomething"/>

//child child用emit来
doSomething(){
    this.$emit("mounted"); 
}

@hook 方法可以监听子组件的任何的生命周期。子组件不需要发布。直接在父组件中，插入子组件的地方，使用@hook.声明周期函数名="函数名"即可原理：就是父子组件通信的基础上，添加@hook，形成了对应生命周期函数的自动发布，

// Parent.vue 
<Child @hook:mounted="doSomething" ></Child> 
doSomething() { 
    console.log('父组件监听到 mounted 钩子函数 ...'); 
}, 
// Child.vue 
mounted(){ 
    console.log('子组件触发 mounted 钩子函数 ...'); 
},

2、谈谈你对 keep-alive 的了解

会缓存不活动的组件的组件状态避免多次错误渲染降低性能
一般结合路由和动态组件一起使用，用于缓存组件；
include 表示指定名称匹配的组件会被缓存
exclude 表示任何名字匹配的组件都不会被缓存
对应两个钩子函数 activated 和 deactivated 当组件被启动时触发钩子函数activated 当组件被销毁时触发钩子函数deactivated

3、 v-model 的原理？

是通过$event这个事件对象拿到最新的输入框的值然后把这个最新的值赋给旧的值从而进行数据的更新。这样的话就完成了双向数据绑定。 v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1、v-bind绑定一个value属性；

2、v-on指令给当前元素绑定input事件。

4、用过 Vue SSR 吗？说说 SSR？

SSR就是vue用服务器来运行vue脚手架将整个html片段放到服务端来渲染编译然后用服务端生成整个html返回到浏览器这就叫SSR 服务器渲染
服务器渲染优缺点
优点
1.有利于爬虫
2.白屏时间更短
缺点
1.服务端压力较大
2.开发环境受限

5、虚拟dom实现原理

虚拟 DOM 的实现原理主要包括以下 3 部分：
用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异一层一层比较；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

6、diff的过程它们会新节点和旧节点会进行两两对比

新dom节点和旧dom节点收尾都有指针分别是新前新后旧前和旧后它们会新节点和旧节点会进行两两对比对比顺序

新前和旧前
新后和旧后
新前和旧后
新后和旧前
查找
创建和删除

9月26日

1、v-show指令算是重排吗？

算 v-show指令其原理就是改变display为none 才会导致页面重排

2 v-for可以遍历哪些类型?

数组对象数组对象数字

3、v-for为什么要加 key?

因为提高diff算法效率为了高效的更新虚拟DOM 把真实dom用patch函数转换为虚拟dom，再形成真实dom树和虚拟dom树，两颗数同层按diff比较，一样的直接渲染，不同的更新

4、key什么时候用index什么时候用唯一标识

key作为每条数据的唯一标识, 比如数据里有id、手机号、身份证号、学号等唯一的数据则用唯一标识。如果确定只是简单的展示数据，用index

5、computed 和 methods的区别?

计算属性其实是包含getter和setter两个方法，当获取计算属性的时候，其实是调用getter方法，vue会收集计算属性中的依赖，然后将计算属性返回的结果保存在缓存当中，当依赖数据发生变化时才会重新计算。
方法没有缓存，每一次页面重新渲染，对应的方法都会重新执行一次，但是有时候我们并不需要该方法执行，因为改动的数据和这个函数没有任何关系，如果这个函数内的逻辑很复杂，那么对于性能来讲，也是一种消耗。
计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。而方法的参数没有限制。

6、vue-router有哪些生命周期?

vue-router共有三个生命周期：beforeRouteEnter（进入路由前），beforeRouteUpdata（路由更新），beforeRouteLeave（离开当前路由）\

有哪些参数里面分别有什么?
to：到哪里去。
from：从哪里来。
next：当这个函数执行时，表示继续执行下一步操作。不写会导致路由被拦截。

7、Vue路由传参的几种方式

方法一

   //路由配置：
   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }
　//传递方法：
  getDescribe(id) {
  //直接调用$router.push 实现携带参数的跳转
     this.$router.push({
       path: `/describe/${id}`,
     }
  )
  //获取方法：
  this.$route.params.id

方法二

　　//路由配置：
   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
　　//传递方法：
 　this.$router.push({
     name: 'Describe',
     params: {
       id: id
     }
   })
　　//获取方法：
    this.$route.params.id

方法三

　　//路由配置：
  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
　　//传递方法：
    this.$router.push({
      path: '/describe',
      query: {
          id: id
      }
    })
　　this.$route.query.id

`8、$route`和`$router`的区别

$route是路由信息对象，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而$router是路由实例对象包括了路由的跳转方法，钩子函数等。

9、vue2中vue.use是怎么用的

安装插件，如果插件是一个对象，则必须要提供一个install方法。如果插件是个函数，它会被作为install方法。调用install方法时，会将Vue作为参数传入； install方法被同一个插件调用多次时，插件也只会被安装一次

10 scoped原理

作用：让样式在本组件中生效，不影响其他组件。
原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

11 ref是什么？

来获取dom的注意少用

12、props和data优先级谁高？

props ===> methods ===> data ===> computed ===>watch

13、Vue项目打包上线

自测==>修改路由模式
代理不生效，使用ENV
修改路径

14 Vuex是单向数据流还是双向数据流

Vuex是单向数据流

15、Vue设置代理

module.exports = { 
    publicPath:'./', 
    devServer: { 
        proxy: 'http://localhost:3000' 
    }
}

16、Vuex中的mutaitons和actions区别

mutaitons : 都是同步事物 
actions : 可以包含任意异步操作

17、Vuex如何做持久化存储

Vuex本身不是持久化存储 
1. 使用localStorage自己写 
2. 使用vuex-persist插件

面试题汇总第二期