Vue2

vue生命周期

如果加入keep-alive，组件激活时调用，会增加两个生命周期 activated、deactivated

1.一旦进入到页面或者组件，会执行前哪些生命周期：

前四个生命周期

2.什么时候有$data,$el

beforeCreate啥也没有;created 有data没有el;beforemount 有data没有el mounted都有

3.如果加入了keep-alive，第一次进入组件会执行哪些生命周期

先进行前面四个，再执行activated

4.如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期

页面或者组件已经被缓存了，只执行一个activated

6.谈谈你对keep-alive的了解

• 是什么：系统自带的一个组件，功能：是来缓存组件。===》用来提升性能
• 使用：就是缓存组件。提升项目的性能，比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详细页就每必要请求N次了，存起来就可以了，如果点击的不是同一个，那么就直接请求。

v-if和v-show的区别

相同： v-if和v-show都是控制元素的在页面中的显示和隐藏， 不同：

• 控制方式不同，v-if是创建或删除dom节点；v-show是通过控制display:none和block控制显示隐藏
• v-show 只是简单的控制元素的 display 属性，不管初始条件是什么元素总是会被渲染。而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）
• v-show与v-if的使用场景：
  1.v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）
  2.如果需要非常频繁地切换，则使用 v-show 较好
  3.如果在运行时条件很少改变，则使用 v-if 较好

v-if和v-for的优先级

v-for比v-if优先级高，一起使用会浪费性能，不建议同时使用

watch、computed、methods有什么区别

1.computed（计算属性）vs methods（方法）

• 计算属性是有缓存的，方法没有缓存

2.computed（计算属性）vs watch（侦听器）

• computed根据依赖会自动缓存，如果依赖不变就不会重新计算。watch不支持缓存，数据变化，直接会触发相应的操作
• computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化;watch支持异步
• computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到并进行返回；watch是监听，数据或者路由发生改变才可以响应
• 如果一个属性是由其他属性计算出来的，这个属性依赖其他属性，是多对一或一对一，一般用computed。watch:当一个属性变化时，需要执行对应的操作：一对多
• watch:1.监听的函数接收里两个参数，第一个参数是最新的值，第二个参数是输入之前的值
  2.监听的数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，可以选择是否触发其他操作，有两个参数： immedit：组件加载立即触发回调函数执行（决定函数是否初始化就执行,执行为true,相反为false）
  deep：深度监听（看监听对象里面的属性是否变化）为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。
  deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到

！！总结： 具体需要返回值到页面上的一般用计算属性 computed 监听数据变化而不需要返回值的时候用侦听属性 watch

v-model数据双向绑定原理

vue2的双向数据绑定(又称响应式)原理，是通过数据劫持结合发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

vue-router路由管理工具

1.Vue路由模式有哪些

路由模式有三种，分别是history和hash，abstract

• hash模式（vue-router默认模式URL后面带#）使用URL的hash值来作为路由，支持所有浏览器 缺点：只能改变#后面的来实现路由跳转。
• history模式（通过mode: 'history’来改变为history模式）HTML5 （BOM）History API 和服务器配置 缺点：怕刷新如果后端没有处理这个情况的时候前端刷新就是实实在在的请求服务器这样消耗的时间很多还很慢。
• abstract适用于所有JavaScript环境，例如服务器端使用Node.js。如果没有浏览器API，路由器将自动被强制进入此模式。

2. 介绍一下SPA以及SPA优缺点

SPA通常通过前端框架（angular、react、vue）进行开发，单页面应用程序将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript
和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript
动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。

• 优点：1.良好的交互体验。2.良好的前后端工作分离模式 3.减轻服务器压力
• 缺点：1.首屏加载慢 2.不适合开发大型项目 3.SEO优化不好

3.路由跳转

声明式导航：<router-link to="/home/news">跳转</router-link>
编程式导航：$router.push|replace方法，可以实现路由的跳转

4.$router 和 $route的区别

$route:一般获取路由信息【路径、query、params等等】
$router:一般进行编程式导航进行路由跳转【push\replace】

5.路由传参的两种方式（query和params）

前言：vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。

1. params 传参（显示参数）：需要子路由提前配置好参数，在子路由的path路径最后添加/：参数名，占位。 //子路由配置 { path: '/child/:id', component: Child }

• 声明式导航：使用 <router-link> 组件中的to属性实现,直接在路径后面添加/参数值

<router-link :to="/child/123">进入Child路由</router-link>  ，

• 编程式导航：在路径后面添加/${参数值}

this.$router.push({
  path:'/child/${id}',
})

2. params传参（不显示参数），不需要提前在子路由中配置，但需要通过路由的别名 name 进行传值.

• 声明式导航时：
  <router-link :to="{name:'Child',params:{id:123}}">进入子路由</router-link>
• 编程式导航时：this.$router.push({ name:'Child',params:{ id:123 }})

3. query 传参（显示参数），需要子路由提前配置好路由别名（name 属性）

• 声明式导航时：
  <router-link :to="{name:'Child',query:{id:123}}">进入子路由</router-link>
• 编程式导航时：this.$router.push({ name:'Child',query:{ id:123 }})

！总结！：params显示参数传参需要提前在子路由中配置，params不显示参数传参和query显示参数传参方式一样的，但是需要通过路由的别名name进行传值。

组件通信的几种方式

前言：组件的作用，实现可复用性

• 父组件向子组件：父组件在子组件的标签上动态绑定数据，子组件使用props接收数据。
• 子组件向父组件：在子组件中通过$emits 触发绑定在父组件中子组件标签上的自定义事件，在父组件methods中定义方法，接收子组件传过来的数据。
• 兄弟组件通信$on,$emits
• 任意组件间通信：
  1.全局事件总线：$bus
  3.vuex
  4.插槽

vuex 全局变量状态管理工具

1.说一说你对vuex理解

Vuex是一个专门为Vue.js应用开发的状态管理模式，它采用了集中式存储，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且适用与任何组件。比如说封装一个方法放在vuex中，可以给很多组件公用。

2.什么时候使用vuex

多个组件依赖同一状态。来自不同组件的行为需要变更同一状态

3.actions和mutations的区别是什么？为什么要区分她们

mutaitons：都是同步任务。 actions:可以包含任意的异步操作

4.vuex有哪些属性

• State:类似于组件中的data，存放公共数据的
• Actions：书写业务逻辑，提交mutations，而不是直接变更状态，actons可以包含任何异步操作。
• Mutatios：类似与组件中的methods,存放方法。mutations是同步事务，修改state的唯一手段。
• Getters:类似于组件中的computed,计算属性，简化仓库数据。
• Modules:把以上四个属性再细分，让项目仓库更好管理。模块化开发，比如说首页的仓库，详情页的仓库，使用modules管理

5.vuex是单向数据流动还是双向数据流动

vuex是单向数据流动。组件可以使用该仓库的数据，但不能去更改

6.Vuex如何做持久化存储

vuex本身不是持久化存储:1.使用locaStorage.setItem()/getItem()
2.使用vuex插件：vuex-persist插件

axios http请求工具

element-ui / iview Ui组件库

elementUI 是基于 Vue 2.0 桌面端中后台组件库。安装： npm install element

vue-cli

1.前言：vue-cli 就是快速搭建一个 vue 项目的脚手架工具。
使用vue-cli可以快速搭建 vue 开发环境，以及对应的 webpack 配置。
2.相关命令：
查看版本vue -V
安装：npm install -g @vue/cli
卸载脚手架：npm uninstall -g @vue/cli 卸载3版本脚手架
3.创建项目：vue create 项目名称 ；图形化：vue ui
4.启动 npm run serve