Vue相关面试题

https://www.php.cn/toutiao-415600.html

一、什么是MVVM?

	MVVM是Model-View-ViewModel的缩写,MVVM是一种设计思想，Model：数据模型，是处理数据的，不关心业务逻辑；View:视图，可以理解为html页面；View-Model：指的是视图数据模型，即操作数据的对象。在MVVM的架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上。
	ViewModel通过双向数据绑定，把View和Model连接起来了，View和Model之间的同步工作完全是自动的，不需要人为操作，因此开发者只需关注业务逻辑，不需要手动操作dom。

二、MVVM和MVC的区别?它和其它框架(Jquery)的区别是什么？哪些场景适合？

MVC和MVVM其实区别不大，都是一种设计思想，主要是MVC中的Controller演变成了MVVM中的ViewModel。MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低，加载速度变慢，和影响用户体验。
区别：vue数据驱动，它可以通过数据来显示图层，而不是节点操作
场景：数据操作比较多的场景，会更加快捷

三、MVVM、MVC和MCP的区别？

MVC是：M-model--数据连接层，连接数据库；
	  View--视图层，前端页面；
	  Controller---业务逻辑层:router分发请求，controller
MVVM：model--数据模型，data中的死数据，通过ajax请求过来的数据
	  view--视图层，用于渲染model的数据
	  view-model--管理view和model的存和取

四、聊聊对Vue的理解

vue是一个渐进式的JS框架，它易用，高效且灵活，vue中的数据和视图是分离的，vue只关心视图层

五、vue的优点是什么？

1.低耦合；2.可重用性--可以把一些视图逻辑放在一个ViewModel中，让很多View可以重用这个视图逻辑；3.独立开发；4.上手快

六、vue如何兼容ie?

利用 babel-polyfill插件
方法：
1 安装 npm install --save babel-polyfill
2 开启 ./build/webpack.base.conf.js 更改代码：
entry: ['babel-polyfill', './src/main.js'];

七、组件之间的传值？

props向下传递，$emit向上传递
1.父传子
	1）在渲染的子组件中,利用v-bind属性
	2）在子组件中,使用props接收传递过来的数据
2.子传父
	1）在渲染的子组件上使用v-on绑定要传递的父组件的methods
	2）在子组件中使用this.$emit调用传递过来的函数,调用的同时传递子组件的数据

八、v-model的原理是什么？

v-model是通过数劫持来实现的，数据劫持就是object.defineProperty()来劫持对象的getter和setter操作，在数据变动的时候，做你想做的事
object.defineProperty(obj,{get(){},set(){}})
vue3.0之后就用new Proxy(obj,{set(){},get(){}})

九、路由之间跳转

标签跳转（声明式），编程式（js跳转）

十、vue.cli中怎样使用自定义的组件？有遇到过哪些问题？

1).在components目录新建组件文件(indexPage),script中一定要暴露(export defalt{})
2).在需要的页面(组件)中导入：import indexPage from '@/components/indexPage'
3).注入在vue的子组件的components属性上，components:{indexPage}
4).在template中视图引用，以组件名称为标签使用
问题：组件以驼峰式(例indexPage)命名时，作为标签使用时则是index-page

十一、vue如何实现按需加载配合webpack设置？

webpack中提供了require.ensure()来实现按需加载，以前引入路由是通过import的方式来引入，而webpack改为const定义的方式引入
不进行页面按需引入方式：import home from '../../common/home'
进行页面按需引入加载的引入方式:const home = r=>require.ensure([],()=>r(require('../../common/home')))

十二、Vuex相关

https://www.lizenghai.com/archives/33227.html

1.vuex是什么？怎么使用？哪种功能场景能使用它？为什么要使用它？

vuex是一个专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法就是提交mutation,在main.js中引入store,新建一个目录store,然后暴露，场景有：单页面应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。
为什么要使用它：
1.对于父子组件的通信,父组件通过props传递到子组件,子组件通过$emit发送事件到父组件,父组件还可以通过ref的方式拿子组件的值并共享;
2.对于组件与组件之间的通信,可以new为一个新的Vue实例,专门用来做event bus进行通信;
3.当多个组件之间共一个状态时,event bus可能就变混乱了

2.vuex有哪几种属性？

有五种：state,getter,mutation,action,module
1.vuex的state特性：
	vuex就是一个仓库，state就是一个数据源存放地，对应于vue对象里面的data;state里面存放的数据是响应式的，vue组件从store中读取数据，若是store中的数据发生改变，那么依赖这个数据的更新；他通过mapState把全局的state和getters映射到当前组件的computed计算属性中。
2.getter属性：
	getters可以对state进行计算操作，他就是store的计算属性；getters可以在多个组件中进行复用
3.mutations属性：
	动态修改state中的数据，通过commit提交方法，方法是同步的，不能发生ajax
4.actions属性：
	将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。
5.modules属性：
	模块化vuex,管理多个store

3.不用vuex会带来什么问题？

1)可维护性会下降；2）可读性会下降，因为一个组件里的数据，根本就看不出来从哪里来的；
3）增加耦合，大量的上传派发，会让耦合性大大增加

4.vuex的数据流

1.actions用户需求
2.state点餐员
3.mutations厨师
通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。

5.如何解决vuex页面刷新数据丢失问题？

问题描述：一般在登录成功时候，用户信息等存储在vuex中（全局数据共享）。但是页面刷新会导致数据初始化 数据丢失。（原因是  vuex里面的数据存储在运行内存中）
解决方法:
1.localStorage 存储到本地再回去
2.重新获取接口获取数据

十三、v-show和v-if指令的共同点和不同点

v-show指令是通过修改元素的display的css属性让其显示隐藏
v-if指令是直接销毁和重建dom达到让元素显示隐藏的效果
频繁切换的用v-show,流程控制的时候的用v-if

十四、如何让CSS只在当前组件中起作用？

将当前组件的<style>修改为<style scoped>

十五、<keep-alive></keep-alive>的作用？

<keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染

十六、active-class是哪个组件的属性

vue-router模块的router-link组件

十七、ref

ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。
通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例
三种用法：
1 加在普通元素上 用this.ref.name获取得到的是dom元素
2 ref 加在子组件上，用this.ref,name获取得到组件实例 可以使用组件的所有方法
3 如何利用v-for 和ref获取一组数组或者dom节点

十八、怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加/:id
使用router对象的params.id来获取参数

十九、vue-router有哪几种导航钩子？

1.全局导航钩子：router.beforeEach((to,from,next)=>{}),跳转前进行判断拦截
2.组件内的钩子
3.单独路由独享组件

二十、生命周期相关

生命周期一共有8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后
	创建前/后：在beforeCreate阶段,vue实例的挂载元素el和data都是undefined的状态，还没有初始化；在create阶段，vue实例的数据对象有了，el还没有；
	载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载前还是虚拟的dom节点，data.message还没有替换；在mounted阶段，vue实例挂载完成，此时是真正的dom节点，data.message成功渲染；
	更新前/后：在beforeUpdate阶段，数据已经更新，但是界面没有更新；在updated阶段，数据和界面同步更新
	销毁前/后：在beforeDestroy阶段，实例销毁前调用，实例还是可以用的，this能获取实例；在destoryed阶段，实例销毁后，调用后所有事件监听器会被移除，所有的实例都会被销毁

1.什么是vue生命周期？

Vue实例从实例到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载dom、（渲染、更新）、（渲染、卸载）等一系列过程。

2.vue生命周期的作用？

它的生命周期有多个事件钩子，让我们在控制整个vue实例的过程中，更容易形成好的逻辑。

3.第一次页面加载会触发哪几个钩子？

第一次页面加载会触发beforeCreate,created,beforeMount,mounted这几个钩子

二十一、说出至少四种vue当中的指令和它的用法？

v-if:判断是否隐藏；v-for:数据循环；v-bind:class绑定一个属性；v-model:实现双向绑定

二十二、vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器
用途：js可以写es6、style样式，可以scss或less、template可以加jade等

二十三、为什么要使用Key值？

给绑定的元素一个唯一的标识，防止在页面重绘重排时，页面内容错乱。确保Model和view的数据保持一致

二十四、axios是什么？怎么使用？

axios是一个基于Promise的HTTP客户端，专门为浏览器和nodejs服务
在npm安装axios之后，需要在main.js文件中引入import axios from 'axios'

二十五、vue组件化的理解

组件是可复用的vue实例，如果网页中的某一个部分，需要在多个地方出现，就可以将其抽取为组件进行复用，提高了代码的复用率。

二十六、如何解决插槽表达式闪烁的问题

1.给指定的元素添加v-cloak,并设置css的隐藏样式
2.当vue.js引入完毕之后，自动删除v-cloak,解决闪烁的问题

二十七、methods、watch、computed有什么区别？

methods--主要用于处理业务逻辑，数据是不会缓存的
watch----主要用于监听路由，适用于监听单个数据的变化，也可以监听路由的变化
computed--主要用于计算属性，可以监听多个数据的变化，计算后的数据会缓存

二十八、vue路由的两种模式

new VueRouter({
	mode:'hash'	//hash里面的路径是带'#'的，history是不带'#'的
})
1、记录当前页面的状态（再次打开，网页在之前状态）
2、浏览器实现前进后退功能
方法思路： 
改变url且不让浏览器向服务器发送请求
检测url的变化
截获url地址 并解析出需要的信息来匹配路由规则
hash：指url尾巴的#以及后面的字符
hash不被包含在http请求中(，如 http://www.abc.com 因)，每次变化不会使浏览器向服务器请求，对后台不会有影响。
history的url和实际后端发送的请求必须一致；（如http://www.abc.com/book/id ）

history ：
利用HTML5 History Interface新增的pushState()和replaceState()的方法


① window.history.pushState(state,title,url)
//state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
//title：标题，基本没用，一般传null
//url：设定新的历史纪录的url。新的url与当前url的origin必须是一样的，否则会抛出错误。url可以时绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

② window.history.replaceState(state,title,url)
//与pushState 基本相同，但她是修改当前历史纪录，而 pushState 是创建新的历史纪录

window.addEventListener("pospstate",function(){
 //监听浏览器前进后退事件，pushState与replaceState方法不会触发
})
window.history.back()//后退
window.history.forward()//前进
window.history.go(1)//前进一部，-2回退两不，window.history.lengthk可以查看当前历史堆栈中页面的数量

二十九、vue的路由前置守卫和ajax的路由拦截有什么区别？

router.beforeEach((to,from,next)=>{....})	--拦截组件的跳转，结合token使用，验证有没有token，如果没有token 让你去登录

to:  即将要进入的目标路由对象
from: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数

ajax	--拦截接口，提高接口的安全性，结合token使用
验证有没有token ，如果没有token 请求的时候自动携带一个给后台

三十、vue中的data为什么必须是一个函数？

对象为引用类型 每次重用组件的时候 由于数据对象指向同一个data对象！当一个组件被修改，其他重用组件的data也会被修改。
而如果是一个函数，每次返回的都是一个新对象，引用地址不同。则值不会改变
当定义组件的时候,发现data并不是直接提供一个对象,取而代之的是,一个组件的data必须是一个函数,因此,每个实例可以维护一份被返回对象的独立的拷贝,如果data不是一个函数,那么就会影响到其它的实例(例如一个模板里的点击事件)

三十一、$route和$router的区别

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

三十二、axios和vue-resource?

axios  Promise语法的ajax请求  任何框架都能用
vue-resouce  Promise  vue配套的ajax请求。
在vue基础上使用，2.0后不再更新。（不介意使用）
可以通过XMLHttpRequest和JSONP，发起请求并处理响应。
vue-resource还提供了非常有用的inteceptor
可以在请求前和请求后附加一些行为。比如使用inteceptor在ajax请求时候显示loading界面

三十三、promise七连击？

1.什么是回调函数

回调函数就是参数的传递,在一个回调函数中使用另一个函数作为参数,并调用的同时,可以传递参数

2.为什么使用回调函数

当涉及到一些异步请求的时候,函数体不能立刻马上返回数据时,可以使用回调函数的方式返回

3.使用回调函数存在什么问题

当多层嵌套使用的时候,会形成回调地狱

4.如何解决回调地狱问题?

使用es6的promise

5.promise的特性是什么?

- promise是一个对象,也是一个构造函数
- 需要使用new实例化
- promise的原型上有一个then函数,then可以传递成功的回调和失败的回调
- promise需要传递一个函数作为参数,该函数有两个参数,分别是resolve()--成功的,reject()---失败的

理解：Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数,then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。

6.promise存在什么缺点?

代码量并没有减少,反而增多

7.如何解决promise的缺点?

1.使用es7之前的promise.all方法
2.使用es7的async和await减少代码量,async和await一定要配合使用

8.promise的错误捕获

- 1.直接在每一个then的第二个错误加上err,这种方法不会终止之后的代码
- 2.在所有的then之后加上catch捕获,catch会终止之后的代码
- 3.es7利用try....catch进行错误捕获

三十四、vue路由懒加载以及组件懒加载

一、为什么要使用路由懒加载
　　为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。
二、定义
　　懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
三、使用
　　常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import
首屏组件加载速度更快一些，解决白屏问题，简单来说，就是延迟加载或按需加载，即在需要的时候加载。
方法：
①安装:
yarn add @babel/plugin-syntax-dynamic-import -D 
②配置babel.config.js:
plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
③按需加载路由组件
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')

路由和组件的常用两种懒加载方式：
1、vue异步组件实现路由懒加载
　　component：resolve=>(['需要加载的路由的地址'，resolve])
2、es提出的import(推荐使用这种方式)
　　const HelloWorld = （）=>import('需要加载的模块地址')

三十五、this.nextTick

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

三十六、http和https

http 是客户端和服务端请求和应答的标准  超文本传输协议明文传输
https:有ssl加密

三十七、同源策略和跨域

同源策略是 端口 协议 域名一致才能访问

跨域：
一、jsonp，利用动态创建script标签，利用src进行跨域。
兼容性好，但是只能get请求

二、document.domain 设置相同的 页面就能共享cookie
但是仅限至于主域相同 子域不同的跨域

三、cors 
1、普通跨域请求：只需服务端设置Access-Control-Allow-Origin
2、带cookie跨域请求：前后端都需要进行设置
前端：withCredentials
后端：
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com")
3、在express中只要引入cors 然后引用

四、postMessage dom跨域
window.postMessage(message，targetOrigin) 
message 为要发送的消息，类型只能为字符串；
targetOrigin 用来限定接收消息的那个 window 对象所在的域，如果不想限定域，可以使用通配符 *。

三十八、express静态资源托管

// 1. 引入express 模块  
  const express = require('express')
  const path = require('path')

  // 2. 创建服务   
  const app = express()  
	
  // 把views 文件下面的内容托管到根目录 http://127.0.0.1:3000  
  app.use(express.static(path.join(__dirname,'./views')))
  // 把assets 文件下面的内容托管到根目录 http://127.0.0.1:3000/assets
  app.use('/assets',express.static(path.join(__dirname,'./assets')))

  // 3. 监听请求 
  app.get('/',(req,res)=>{
    res.end('hello express server')
  })

  // 4. 监听端口   
  app.listen(3000,function(){
    console.log('http://127.0.0.1:3000')
  })

三十九、插槽

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 ,Shadow DOM 使用 `<slot>` 元素将不同的 DOM 树组合在一起。Slot 是组件内部的占位符，用户可以使用自己的标记来填充。通过定义一个或多个 slot，您可将外部标记引入到组件的 shadow DOM 中进行渲染。

作用域插槽

父组件模板的所有东西都会在父级作用域内编译,子组件模板的所有东西都会在子级作用域内编译。不过，我们可以在父组件中使用 `slot-scope` 特性从子组件获取数据,前提是需要在子组件中使用 `:data=data` 先传递 `data` 的数据

四十、路由传参

1.使用path来匹配路由,然后通过query来传递参数
2.使用params来传递参数

四十一、解释单向数据流和双向数据绑定

1.单向数据流：顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state
2.双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度

四十二、对比 jQuery ，Vue 有什么不同

jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作
Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

四十三、vue中怎么自定义指令

全局注册v-focus：
Vue.directive('focus',{
	inserted:function(el){
		el.focus()
	}
})
局部注册：
directives:{
	focus:{
		inserted:function(el){
			el.focus()
		}
	}
}

四十四、vue等单页面应用的优缺点

优点：良好的交互体验,良好的前后端工作分离模式,减轻服务器压力
缺点：SEO 难度较高,前进、后退管理,初次加载耗时多

四十五、vue-router 使用params与query传参有什么区别

// 传递
this.$router.push({path: './xxx', params: {xx:xxx}})
this.$router.push({path: './xxx', query: {xx:xxx}})
// 接收
this.$route.params
this.$route.query
params 是路由的一部分,必须要有。query 是拼接在 url 后面的参数，没有也没关系
params 不设置的时候，刷新页面或者返回参数会丢，query 则不会有这个问题

四十六、vue中的static和assets的区别

相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下
不同点：
static--tatic中的文件，是不会经过webpack编译的，打包后会生成dist文件夹，static中的文件只是复制一面。因此，static中建议放一些外部第三方，自己的文件放在assets，别人的放在static中
assets--assets 中的文件会经过 webpack 打包，重新编译

四十七、vue数组更新检测

1.变异方法：push(),pop(),shift(),unshift(),splice(),sort(),reserve()
2.非变异方法：concat(),slice(),filter()

四十八、vue-cli打包的命令是什么？ 你们vue项目是打包了一个js文件，一个css文件， 还是有多个文件？

npm run build
根据vue一cli脚手架规范，一个js文件，一个CSS文件。

四十九、 delete和Vue.delete删除数组的区别

“delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 Vue.delete 直接删除了数组 改变了数组的键值。”

五十、vue slot是做什么的？

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

五十一、v-on可以绑定多个事件吗？

可以，<input type="text" v-on="{input:onInput,blur:onBlur}"

五十二、vue中常遇到的坑？

https://blog.youkuaiyun.com/lemon_zhao/article/details/55510589

https://www.tuicool.com/articles/aUrmumV

https://blog.youkuaiyun.com/qq_39313596/article/details/83450605

技巧/坑点 
1.setTimeout/ setInterval
场景一 ：this指向改变无法用this访问vue实例
  mounted(){
    setTimeout( function () {
    //setInterval同理
    console.log(this); //此时this指向Window对象
    }，1000) ;
  }
解决方法 :使用箭头函数或者缓存this
  //箭头函数访问this实例因为箭头函数本身没有绑定this
  setTimeout(() => {
    console. log(this);},  500) ;
    //使用变量访问this实例let self=this;
  },1000);
  setTimeout (function () {
    console. log(self);//使用self变量访问this实例
  }, 1000) ;
setInterval路由跳转继续运行并没有销毁
场景一 :比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setlnterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。
解决方法 :在组件生命周期beforeDestroy停止setInterval
  created() {
       this.intervalid = setInterval(() => {
          this.layerError = "";
          this.Timer = null;
      }, 100000);
   }
  beforeDestroy( ){
    //我通常是把setInterval( )定时器赋值给this实例，然后就可以像下面这么暂停。
    clearInterval(this.intervalid);
  }
2.Vue路由拦截浏览器后退实现草稿保存类似需求
场景一 :为了防止用户突然离开，没有保存已输入的信息。
解决方法 :
  //在路由组件中:mounted(){}，
  beforeRouteLeave (to, from, next) {
      if(用户已经输入信息){
        //出现弹窗提醒保存草稿，或者自动后台为其保存
      }else{
        next(true);//用户离开
      }
  }
3.自定义组件添加click等事件不生效
场景一 :一些自定义组件，需要额外添加一些事件来实现一些特定需求
  <template>
    <el-progress type="circle" :percentage=“0" @click=“stopProgress”></elprogress>
  </template>
  <script>
    export default {
       methods:{
            stopProgress() { 
            console.log('停止')
            }
        }
    }
  </script>
解决方法:使用.native修饰符
//你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触  发的。
  <template>
    <el-progress type="circle" :percentage=“0" @click.native=“stopProgress”></el-progress>
  </template>
  <script>
    export default {
        methods:{
            stopProgress() { 
            console.log('停止')
            }
        }
    }
  </script>
4.手动操控自定义组件
场景一 :一些自定义组件，需要去获取组件对象进行一些其他的Dom操作
解决方法 :使用ref属性暴露组件获取句柄
  <template>
    <el-progress type="circle" :percentage="O" ref="progress"></el-progress></template>
  <script>
    this.$refs.progress //组件对象实例， 可以手动调用组件的内置方法和属性
    this.$refs.progress.$el //组件 对象的最外层dom元素
  </script>
5.深度作用选择器
场景一 : scoped的样式，希望影响到子组件的默认样式
在样式中设置完scoped在浏览器解析为如下图这样，a是个div，a div里面包含一个组件里面解析完了div的样式名字为b，想在父组件影响到子组件的默认样式。解决方法:
  <style scoped>
    .a >>> .b { /* ... */ }
  </style>
    //有些像Sass之类的预处理器无法正确解析>>>。这种情况下你可以使用/deep/操作符取而代之- - - -这是一个>>>的别名，同样可以正常工作。  <style scoped lang=“scss”>
    .a /deep/ .b { /* ... */ }
  </style>
6.Vue数组/对象更新视图不更新
场景一 :很多时候我们习惯于这样操作数组和对象
  data() { 
    return {
        arr: [1,2,3],
        obj:{
          a: 1,
          b: 2 
        }
    }; 
  },
  // 数组更新视图不更新
  this.arr[0] = 'OBKoro1';
  this.arr.length = 1;
  console.log(arr);// ['OBKoro1']; 
  // 数据更新，对象视图不更新     
  this.obj.c = 'OBKoro1';
  delete this.obj.a;
  console.log(obj);  // {b:2,c:'OBKoro1'}
解决方法 ：
this. $set(你要改变的数组/对象，你要改变的位置/key,你要改成什么value)
数组原生方法触发视图更新（ vue官网可查）:
整体替换数组/对象
7.Vue Filters过滤器的使用
场景一 :常见的数据文本的格式化
  <!-- 在双花括号中 -->
  <div>{{ message | DateFormat }}</div>    //展示正确时间
  <!-- 在'v-bind'中 -->
  <div v-bind:id="rawId | formatId"></div>
  Demo:一个日期过滤器返回yyyy- MM-ddhh:mm:ss的样式
  引入一个提前写好日期格式化的js  import dayjs from 'dayjs';
  export default {
     data() {
        return {
                //时间毫秒
                message:18324798324789 
            }
    },
    filters: {
          //传入进行日期格式化
      DateFormat(value) {
        return dayjs(value).format("YYYY-MM-DD HH:mm:ss")
          } 
    }
  }
8.Vue深度watch与watch立即触发回调
场景一 :在watch里面监测对象里面对应的值是监测不到的，可以用如下方法。
选项: deep
在选项参数中指定deep:true,可以监听对象中子属性的变化。
选项: immediate
在选项参数中指定immediate:true,将立即以表达式的当前值触发回调，也就是默认触发一次。
  watch: {
    obj: {
        handler(val, oldVal) {
          console.log('属性变化触发这个回调',val, oldVal); 
        },
        deep: true // 监测这个对象中每一个属性的变化
    },
    step: { // 属性 //watch
       handler(val, oldVal) {
        console.log("默认触发一次", val, oldVal); 
       },
       immediate: true // 默认触发一次
    }
  }

五十三、Vue里面router一link在电脑上有用，在安卓上没反应 怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polyfill插件解决。

五十四、 Vue2中注册在router-link上事件无效解决方法

绑定在router-link中的事件都不会触发，如果当前router-link的tag不是a的话（官方文档中说明：默认为a，可以通过tag改变渲染后的标签），那么就会往自己的子元素（组件）找，找到的第一个就会把一些属性及时间覆盖过去。
所以此时事件是被阻止了。
所以一般在事件的后面加上.native修饰符即可

五十五、 RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

vue中的<router-link>这种声明式的路由方式在IE与火狐中有时会出现失效问题（目前我还不知道是什么原因导致的），但是把这种声明式的方式换成编程式的方式就可以了
<button class="btn-card" @click="link1">刷卡登录</button>
methods:{
	link(){
		this.$router.push('/home')
	}
}

五十六、axios

1.axios的特点有哪些？

1.axios是一个基于promise的HTTP库，支持promise的API;
2.它可以拦截请求和响应；
3.它可以转换请求数据和响应数据，并对响应回来的数据自动转换成json类型的数据
4.安全性更高，客户端支持防御XSRF

2.axios有哪些常用方法？

1.axios.get()--用于列表和信息查询
2.axios.delete()--删除
3.axios.post()--用于信息的添加
4.axios.put()--用于数据的更新

3.axios相关配置属性

url---是用于请求的服务器URL
method---是创建请求时使用的方法,默认是get
baseURL---将自动加在url前面，除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URL
transformRequest---允许在向服务器发送前，修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法
headers---是即将被发送的自定义请求头
params---是即将与请求一起发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象
proxy---定义代理服务器的主机名称和端口
auth---表示HTTP基础验证应当用于连接代理，并提供凭据

五十七、vue组件封装的过程

调用Vue.extend()方法,创建组件构造器
调用Vue.component()方法注册组件
在Vue实例范围内使用组件
接着，如果子组件需要数据，可以在props中接受定义
最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

五十八、vue的mock数据

五十九、 vue修改打包后静态资源路径的修改

https://www.cnblogs.com/zly1022/p/10108548.html

 https://www.cnblogs.com/zly1022/p/10108548.html 
第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。
    解决：到config文件夹中打开index.js文件。
    文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：assetsPublicPath属性作用是指定编译发布的根目录，‘/’指的是项目的根目录 ，’./’指的是当前目录。
    
第二个问题：router-view中的内容显示不出来。路由history模式。
这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况，很多人踩这个坑的时候花了很多时间，网上的教程基本上都是说的第一个坑，这个坑很少有人提起。
解决：// mode: 'history',//将这个模式关闭就好

第三个问题  就是背景图片引用资源错误

此时通过img标签引入的图片显示正常，是因为img为html标签，他的路径是由index.html开始访问的，他走static/img/'图片名'是能正确访问到图片的,但是app.css访问static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。
具体办法是：
打开build/utils.js，在相应位置加入内容，其中值可能会有不同，若不同，自己配置成相应的即可。
if(options,extract){
	return ExtractTextPlugin.extract({
		ues:'loaders',
		fallback:'vue-style-loader',
		publicPath:'../../'	//加入内容
	})
}