面试题总结

分享一波前端面试题供各位阅读

1. vue生命周期

• 在VUE中每个组价都是独立的，每个组件都有属于自己的生命周期，从一个组件的**创建、数据初始化、挂载、更新、销毁、**这就是一个组件所谓的生命周期。

• 生命周期的8个钩子函数分别为

  实例创建之前：beforeCreate(){}，把传入的data属性的内容，赋给vue对象。即：把形参中data的属性赋给vue对象，前后分别的钩子函数是：beforeCreate、created

  **实例创建后：**created(){}

  **初始化之前:**beforeMount()，把vue对象中data渲染到dom对象上，前后分别的钩子函数是：beforeMount、mounted

  **实例初始化:**mounted(){}

  **数据同步前：**beforeUpdata(){}，当数据发生变化时，会触发组件的更新。

  **数据同步后：**updata(){}

  **实例销毁前：**beforeDestroy(){}

  **实例销毁后：**destoryed(){}

  如果组件在缓存的话，那么，组件切换时，会调用的钩子函数是：

  activated 和 deactivated

2.VUE中常用指令

• **v-model=变量 ** （ 必须绑定在表单元素上） 数据双向绑定
• v-show=“true/false” 动态的display-block与none
• **v-bind ** 简写 :src=变量 作用：绑定js原生属性
• v-on 绑定事件
• **v-for ** 循环遍历数据
• v-if v-else v-else-if 条件语句
• v-text v-html 文本展示
• v-noce 只渲染该元素或组件一次
• v-cloak 解决插值表达式闪屏问题

<style>
	[v-cloak]{
		display: none;
	}
</stye>
<div id="#app" v-cloak></div>
<script>
	new Vue({
		el: '#app',
		data: {},
		methods: {}
	})
</script>

3. v-if 和 v-show 的共同点与区别：

• **共同点：**都能实现元素的显示与隐藏

• 区别：

  • v-show只是简单的控制元素的display属性，而v-if才是条件渲染，条件为真，元素就会被渲染，条件为假，元素就会被销毁

  • v-show首次渲染占用资源多

  • v-if切换的时候会导致页面重绘，切换开销大

4.VUE数据双向绑定

• 实现原理： 数据劫持 发布者订阅者模式 (一对多)
• Vue 框架核心的功能就是数据双向绑定，双向是指：HTML标签数据绑定到vue对象，另外反方向数据也是绑定的
• 使用v-model指令来实现双向数据绑定，把视图数据与模型数据相互绑定

5.VUE 组件传值（父子，兄弟）

• 父子组件正向传值：

  • 父组件通过在子组件里面发送一条数据

  • props验证接收，props是一个属性，可以用来接收外部传入当前组件的数据

    // 使用props验证
        props:{
        	//验证数据类型
            ziProps:Number,
            
            // 既验证数据类型又验证他不能为空
            zione:{
                type:String,
                required:true
            },
            //既验证数据类型又设置默认值
            zitwo:{
                type:String,
                default:"我是默认值"
            }
        }
    

• 父子组件逆向传值：

  • 逆向传值默认是不被允许的，必须通过事件来发出一个自定义事件的抛出

    抛出：

    // 1.通过事件触发抛出
    <button @click="fun()">点我进行逆向传值</button>
    //2.开始抛出
    methods:{
    	fun(){
    	//this.$emit("抛出的自定义事件名"，"抛出的数据")
    	this.$emit("zipao","我是子元素抛出的数据")
    	}
    }
    

    **接收：**在子组件被调用的时候使用@绑定抛出事件，调用父组件函数不加()

    //调用子组件的时候
    <zi @zipao="fun"></zi>
    //3.调用自定义事件，但是父组件不加（）
    
    methods:{
    	fun(v){
    		console.log(v)
    		//在函数中，必须要有形参！！！ 形参用来接收数据 这个形参就是子组件抛出的数据
    	}
    }
    

• 兄弟组件传值：

  可以通过中央事件总线来传值

  1.在src下创建一个文件夹用来存放xxx.js文件，在其中只创建一个Vue实例，以后它就承担起了组件之间通信的桥梁，也就是事件总线

  //事件总线
  import Vue from “vue”
  
  export  default new Vue
  

  2.创建一个A组件，引入事件总线的js文件，接着添加一个按钮并绑定单击事件，进行自定义事件的抛出

  </button @click="fun()">点我兄弟组件传值</button>
  
  import   eventBus   from   '@/assets/eventBus.js'
  
  methods:{
  
  ​		fun(){
  
  ​			eventBus.$emit("pao","我是数据")
  
  ​		}
  
  } 
  

  3.再创建一个B组件，引入eventBus事件总线。在mounted钩子监听了自定义事件，并把传递过来的字符串参数传递给了on监听器的回调函数

  $on:监听当前实例上的自定义事件

  mounted(){
  
  ​		eventBus.$on("pao",(msg)=>{
  
  ​				this.text=msg
  
  ​		})
  
  }
  

  将传递回来的新值赋予给text。页面上就会显示出兄弟元素传递来的值

6. VUE路由模式

• hash模式，url里面永远带着#号，我们在开发中默认使用这个模式，

  history模式没有#号，是个正常的url ，适合推广宣传。history模式有一个问题就是，做刷新操作，会出现404错误，那么就需要后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由地址上。

7. Keep-alive

• 当我们不停的切换标签页面的时候（例如二级路由），我们选择好的状态就会丢失，原因就是每次切换的时候，Vue都创建了一个新的组件实例，因此，用标签将路由出口包裹起来，在切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验

8. Vue3.0新特性

#### 1、双向绑定

2.0现有限制：

- 无法检测到新的属性添加/删除
- 无法监听数组的变化
- 需要深度遍历，浪费内存

3.0优化：

- 使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。Proxy默认可以支持数组
- 允许框架拦截对象上的操作
- 多层对象嵌套，使用懒代理

#### 2、虚拟DOM

2.0 VDOM性能瓶颈：
\* 虽然vue能够保证触发更新的组件最小化，但单个组件部分变化需要遍历该组件的整个vdom树
\* 传统vdom性能跟模版大小正相关，跟动态节点的数量无关
3.0优化工作
在 vue 3.0 中重新推翻后重写了虚拟 DOM 的实现，官方宣称渲染速度最快可以翻倍。更多编译时的优化以减少运行时的开销

#### 3、Tree-Shaking

2.0现有限制： 并不是每个人都使用框架的所有功能，但仍需下载/解析相应代码
3.0优化：将大多数全局API和内部组件移至ES模块导出，tree-shaking更友好
4.Composition API
使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的
\*	state更名为reactive
	reactive等价于 Vue 2.x 的Vue.observable()，用于获取一个对象的响应性代理对象
	value更名为ref，并提供isRef和toRefs
	watch可作用于单一函数
5.Object.defineProperty -> Proxy
	Object.defineProperty是一个相对比较昂贵的操作，因为它直接操作对象的属性，颗粒度比较小。将它替换为es6的Proxy，在目标对象之上架了一层拦截，代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作，颗粒度变大。

javascript引擎在解析的时候希望对象的结构越稳定越好，如果对象一直在变，可优化性降低，proxy不需要对原始对象做太多操作。

9. JS基本数据类型

• js中有5种数据类型：Undefined、Null、Boolean、Number和String。
• 还有一种复杂的数据类型Object，Object本质是一组无序du的名值对组成的。

10. 数组去重

• 1.利用ES6 Set 去重（ES6中最常用，代码最少）

  let arr = [4, 1, 3, 3, 2, '2'];
  let uniqueArr = [...new Set(arr)];
  console.log(uniqueArr); 
  

• 2 利用for for循环嵌套，然后splice去重（ES5中最常用）

  //示例数组
  var a = [1, 3, 2, 4, 5, 3, 2, 1, 4, 6, 7, 7, 6, 6];                        
   var b = [];
  
      for(var i = 0; i < a.length; i++) {
          var status = 0;
          for(var j = 0; j < b.length; j++) {
              if(a[i] == b[j]) {
                  status = 1;
                  break;
              }
          }
          if(status == 0) {
              b.push(a[i]);
          }
      }
  	console.log(b)
  

• 3.利用index Of 去重

  var arr=[1,1,2,2,3,3,4,5]
  var array=[]
  for (var i=0;i<arr.length;i++){
  	if(array.indexof(arr[i])===-1){
  		array.push(arr[i])
  	}
  }
  console.log(array)
  

11. 深拷贝和浅拷贝

• 浅拷贝:只是增加了一个指针指向已存在的内存地址，

  深拷贝:是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，

12. Js中如何实现每隔几秒调用一个函数

• 定时器
• **开启计时器：**setInterval(要执行的函数名,间隔时间);
• **关闭定时器：**clearInterval(定时器名称);

13. 箭头函数

• 箭头函数是匿名函数，不能作为构造函数，不能使用new
• 箭头函数不绑定-，取而代之用rest参数…解决
• 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
• 箭头函数通过 call() 或 apply() 方法调用一个函数时，只传call()与.apply()区别 入了一个参数，对 this 并没有影响。
• 箭头函数没有原型属性
• 箭头函数不能当做Generator函数,不能使用yield关键字

14. BOM 和DOM的区别

• 1、BOM是Browser Object Model的缩写，即浏览器对象模型。

  BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的，例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等…这些涉及到的对象就是BOM。

  2、DOM是Document Object Model的缩写，即文档对象模型。

  DOM和文档有关，这里的文档指的是网页，也就是HTML文档。网页是由服务器发送给客户端浏览器的，无论用什么浏览器，接收到的HTML都是一样的，所以DOM和浏览器无关，它关注的是网页本身的内容。由于和浏览器关系不大，所以标准就好定了

  BOM的最根本对象是window。

  DOM最根本对象是document（实际上是window.document）

15. 事件冒泡和事件捕获

• 事件冒泡： 事件由内向外冒泡，点击时候先触发最里面元素的事件

• 事件捕获：从外向内触发，

• 阻止事件冒泡的两种方法：

  • 1. event.stopPropagation(); 只阻止事件往上冒泡，不阻止事件本身。
  • 2. return false; 不仅阻止了事件往上冒泡，而且阻止了事件本身

16. display的值

• block 此元素将显示为块级元素，此元素前后会带有换行符。

  none 此元素不会被显示。

  inline： 行内元素

  inline-block 行内块元素。

  list-item 此元素会作为列表显示。

  table 此元素会作为块级表格来显示

  inherit 规定应该从父元素继承 display 属性的值

17. Css选择器有哪些

• 通配符

• 元素选择器

• 类选择器

• ID选择器

• 派生选择穷器

  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器

• 属性选择器

18.常用伪类选择器及其应用场景

• :hove 鼠标划入更改样式
• :after 在某个元素之后加入某些内容
• :before 此伪类是在某个元素之前加入某些内容
• :visited 向已被访问的链接添加样式
• :first-child 向元素的第一个子元素添加样式。伪类选择器
• :active 点击转换样式

19. Margin和padding

• margin: 块级元素外边距，会发生margin传递
• padding： 块级元素内填充，会撑大元素

20.Css3 flex布局

• display: flax 添加给容器，让父元素成为弹性布局容器

• flex-direction 添加给容器 决定主轴的方向 row主轴为水平方向 colum主轴方向为垂直

• flex-wrap 添加给容器 换行操作

• flex-flow 添加给容器

• justify-content 添加给容器 定义了项目在主轴上的对齐方式

• align-items 添加给容器 定义项目在侧轴上如何对齐。

• align-content 添加给容器定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• 以下6个属性设置在项目上。

  • order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

  • flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  • flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  • flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  • flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 flex：1 独占一份，自适应容器剩余空间

  • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

21.Xss攻击

• 什么是XSS攻击？

XSS又叫CSS (Cross Site Script) ，跨站脚本攻击。它指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意的特殊目的。XSS属于被动式的攻击，因为其被动且不好利用，所以许多人常呼略其危害性。

在WEB2.0时代，强调的是互动，使得用户输入信息的机会大增，在这个情况下，我们作为开发者，在开发的时候，要提高警惕。

• XSS攻击的主要途径

XSS攻击方法只是利用HTML的属性，作各种的尝试，找出注入的方法。现在对三种主要方式进行分析。
第一种：对普通的用户输入，页面原样内容输出。

• XSS攻击的解决办法

  请记住两条原则：过滤输入和转义输出。

  具体执行的方式有以下几点：
  第一、在输入方面对所有用户提交内容进行可靠的输入验证，提交内容包括URL、查询关键字、http头、post数据等

  第二、在输出方面，在用户输内容中使用标签。标签内的内容不会解释，直接显示。

  第三、严格执行字符输入字数控制。

  四、在脚本执行区中，应绝无用户输入。

22. 子元素和父元素不加宽高，子元素居中的三种方法。

• 一、inline-block、text-align:center
  • 特点：适应性好，IE6、IE7不兼容inline-block。text-align:center会导致子元素的内容也居中。

<style>
    .parent{
        text-align: center;
    }
    .child{
        display: inline-block;/*宽度跟内容变化*/
    }
</style>

• 二、absolute+transform

  • 特点：子元素不会影响其他元素，transform是CSS3内容，不兼容IE6、IE7、IE8。

  <style type="text/css">
      .parent{
          position: relative;
      }
      .child{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);/*向左移自身宽度一半*/
      }
  </style>
  

• 三、flex+justify-content

  特点：只对父容器设置，是CSS3内容，不兼容IE6、IE7、IE8。

  <style type="text/css">
   .parent{
          display: flex;
          justify-content: center;/*设置了这个就用用设置子元素margin: 0 auto*/
   } .child{ margin: 0 auto;/*如果不用justify-content: center，可以用这个*/ } </style>
  

23. transform和transition

• transform: 是2D的位移属性，translate是transform的属性值

  • transform：translate(x轴移动距离,y轴移动距离)
  • transform 有很多其它属性值，**translate3D（3D变换）,scale（2D缩放）**等其他的变换方式

• transition： 是3D动画属性

  • 语法 transition：需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行
  • 一般写法为 transition：all 1s linear

24. 浏览器兼容1360-1920（媒体查询）

• 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

  @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

  当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

  @media screen and (max-width: 300px) {
      body {
          background-color:lightblue;
      }
  }
  //all        用于所有设备
  //screen    用于电脑屏幕，平板电脑，智能手机等。
  //print 	用于打印机和打印预览
  //speech    应用于屏幕阅读器等发声设备
  
  
  其他媒体类型都已经废弃
  

25. rem的原理

• rem是根字体大小相对单位，也就是说跟当前元素的font-size没有关系而是跟整个body的font-size有关系，例如body的字体大小是12px，那么1rem就是12px

26. 数组和字符串常见方法。

• 数组方法：

  join()： 把数组放入字符串，默认逗号隔开，arr数组不变。

  **concat()：**连接数组，返回新的数组，arr数组不变。

  slice(): 选取数组，返回选取的数组，arr数组不变。(第一个参数从哪里开始，第二个是截取到哪个(返回不包括)，如果只有第一个参数0，都取。)

  push()： 数组末尾增加元素，返回数组长度，arr为增加后的数组。

  **unshift()：**数组开头增加元素，返回数组长度，arr为增加后的数组。

  pop(): 数组末尾删除一个，返回删除的元素，arr为删除后的数组。

  shift(): 数组开头删除一个，返回删除的元素，arr为删除后的数组。

  splice(): 增、删、改都可以，返回增删改的元素，arr为增删改的元素。（第一个参数从哪里开始，第二个参数是删除的个数，后面的参数是增加的元素）

• 字符串的方法：（字符串有恒定性，修改字符串不会修改本身）

  charAt()： 传入一个数组，返回选中位置的字符串，string字符串不变。

  concat()： 传入增加的字符串，返回新的字符串，string字符串不变。

  split()： 字符串分割为数组，返回新的数组，string字符串不变。

  **indexOf()：**字符串首次出现的位置，返回位置，没有返回-1, string字符串不变。（第一个参数是要检索的字符，第二个参数从哪里开始检索）

  lastIndexOf(): 从后向前检索。但是下标还是从左往右算。

  replace(): replace(‘b’, ‘B’)，替换。

  ​ slice(): 跟数组方法类似。截取。

  ​ toLowerCase(): 字符串转为小写。

  toUpperCase(): 字符串转为大写。

27. 描述一下vuex是什么

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

• 创建vuex的store仓库（*store文件夹*），并在index.js里设置了两个常量：state和mutations，它们分别用于存储和修改*公共状态；*

• 1.在插值表达式{{ }}中使用state的状态属性count时，写法是：{{$store.state.count}}；

  2.如果需要修改这个count属性的状态值，就需要使用$store的commit方法：$store.commit(‘add’) 、

28. vue遇到的印象深刻的问题。

• 1.路由跳转之间状态丢失问题， 解决办法：
• 2.路由权限控制
  • 鉴权：登录后记录token，使用路由钩子beforeEach，判断是否有登陆。
  • 权限控制路由显示：动态路由，根据登录后的用户角色来匹配

29. elment-UI 结合vue-router，连续点击控制台报错问题

• 1.把项目依赖的 node_modules 文件夹删除， 然后再 npm install 重新下载依赖包就可以解决。

• 2.如果在重新下载依赖包时，安装的vue-router还是之前出错的那个版本，那么要怎么解决呢？解决方法也很简单，在项目目录下运行 npm i vue-router@3.0 -S 即可

• 3.如果不想换 vue-router 的版本 或者 还是 没有用，那么可以用以下方法
  在 router 的配置文件里下添加一下代码（在use之前）：

  import Router from 'vue-router'
  
  const originalPush = Router.prototype.push
  Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
  }
  

30. 组件里面怎么用vue的state

• 1. 直接在组件中使用 {{$store.state.count}}

  2. //在computed里面调用count方法，return this.$store.state.count;然后在页面中使用{{count}}
     
     
     <template>
       <div class="test">
         {{count}}  <!--步骤二-->
       </div>
     </template>
     
     <script type="text/ecmascript-6">
       export default{
         name:'test',
         data(){
           return{}
         },
         computed:{
           count(){
             return this.$store.state.count; //步骤一
           }
         }
       }
     </script>
     

  3. <template>
       <div class="test">
         {{count}}  <!--步骤三-->
       </div>
     </template>
     
     <script type="text/ecmascript-6">
       import {mapState} from 'vuex' //步骤一
       export default{
         name:'test',
         data(){
           return{}
         },
         computed:{
           ...mapState([             //步骤二，对象扩展运算符方式
             "count"
           ])
         }
       }
     

31. react里边为什么用Classname？

• 因为class是react里面保留的类关键字，所以要

32. react中Props怎么获取，super目的是啥

• this.props.xxxx

• super( ) ——继承

  在class方法中，继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错。

33. 没有Consturucte还可以用props吗？

• 如果子类没有定义constructor方法，这个方法会被默认添加，也就是说，不管有没有显示定义，任何一个子类都有constructor方法。

• 有constructor钩子函数时候，Child类会多一个constructor方法 ，可以定义state ，如果用户不定义state，有无constructor钩子函数的时候没有区别。

• 结论： 如果组件要定义自己的state初始状态的话，需要写在constructor钩子函数中，

  如果用户不使用state的话，纯用props接受参数，有没有constructor钩子函数都可以，可以不用\constructor钩子函数。

  再者如果不使用state，那么为什么不使用 无状态组件（建议使用） 呢？？？

34. 怎么缓存组件，Keepalive使用后怎么触发事件，在哪里触发？

• 用包裹需要缓存的组件的路由出口

  • 这个写法大家应该不会陌生，这也是尤大神官方推荐的缓存方法, exclude属性值可以是组件名称字符串(组件选项的name属性)或者数组，代表不缓存这些组件，所以vuex里面的addExcludeComponent是代表要缓存组件，

• 使用后： beforeRouteEnter --> created --> mounted --> activated --> deactivated

  再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。

  因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法，再次进入就不执行了。而activated每次进入都执行，所以在这个钩子函数中获取数据。

• 在activated钩子函数中执行

35. 拦截器

import axios from "axios"
// 创建axios 赋值给常量service 
const service = axios.create();

// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
    // 发送请求之前做写什么
    return config;
  }, function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default service

36. 介绍一下promise

• **promise简介：**promise的出现，原本是为了解决回调地狱问题，把异步中回调函数的场景改写成了.then()/.catch()等函数链式调用的方式，基于promise我们可以把复杂的异步回调处理方式进行模块化

• 使用promis封装请求

  export function demob(){
      return new Promise((resolve,reject)=>{
          return service.request({
              url:"http://1234",
              method:"get"
          }).then((ok)=>{
              resolve(ok)
          }).catch((err)=>{
              reject(err)
          }
      })
  }
  

37. VUEX怎么使用

• 第一步 cmd进入到你的项目目录，并且输入命令
  cnpm  install vuex --save
  注:自动安装到你项目中
  第二步 在你的src新建一个store.js文件，并引入vuex
  import Vue from 'vue';//这里为固定格式照抄
  import Vuex from 'vuex';//这里为固定格式照抄
  Vue.use(Vuex);//此为引用Vuex
  第三步 设置状态常量
  假设
  const state={
      num:0
  }
  注:这里面你可以设置多个值
  第四步 你考虑这状态常量能不能被你的a.vue组件或者b.vue组件引用，所以你必须再加一行代码
  export default new Vuex.Store({
  state
  })
  第五步你可以建立一个新的模板例如a.vue
  代码如下
  <template>
      <div>
          <h2>{{msg}}</h2>
          <hr/>
          <p>{{$store.state.num}}</p>
      </div>
  </template>
  <script>
      import store from '@/store'
      export default{
          data(){
              return{
                 msg:'足球比赛',
              }
          },
          store        
      }
  </script>
  注：这里你要特别注意p标签写法，这为固定格式
  你可以观察到为0
  第六步 我们如果想加入一些方法，我们可以在store.js加入一个 mutations
  const mutations={
     jia(state){
          state.count++;//这就代表上面num加加
      },
  jian(state){
          state.count--;//同上
      }
  }
  第七步在你组件引入方法即可
  <div>
      <button @click="$store.commit('jia')">+</button>
      <button @click="$store.commit('jian')">-</button>
  </div>
  注:此为固定写法，你只需要把commit里面复制对应的方法名即可，
  当你点击加，你会观察到p值开始越变越大，点击减则相反
  

38. VUEX里面的mutation里面的方法怎么获取

• Vuex的五大核心概念之一mutation
mutation，更改Vuex的store中的状态的唯一方法是提交mutation。
• 也就是说，在mutation中写上自定义的方法，然后在组件的js中通过this.$store.commit("自定义的方法名")就可以更新store中的数据和状态
• 自己理解：在state中定义数据，在mutation里面添加数据的方法，然后在组件中调用方法，并且把想要的数据添加进去

39.CSS3新增特性

• 2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码

  3.动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码

  4.形状转换 transform:适用于2D或3D转换的元素

  rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);

  5.选择器

  6.阴影 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码

  7.边框 border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式–重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

  8.背景 background-clip 制定背景绘制（显示）区域 background-origin background-size

  1.（background-clip: border-box;）默认情况（从边框开始绘制） 2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！ 3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！

  9.反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

  10.文字 换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

  11.颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码

  12.渐变

  13.Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)

  14.弹性布局 Flex

  15.栅格布局 grid

  16.多列布局

  17.盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图

  18.媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！

40. HTML5新增

• 标签	描述
  header	文档头部区域
  footer	档的尾部区域
  nav	导航
  section	节（section、区段）
  article	独立的内容区域
  aside	侧边栏内容
  detailes	描述文档或文档某个部分的细节
  summary	标签包含 details 元素的标题
  dialog	定义对话框，比如提示框表单控件，type属性有calendar、date、time、email、URL、search；

• 表单控件，type属性有calendar、date、time、email、URL、search；

• 对input、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性，同时设置多个，则第一个生效，当输入框获取焦点时，提示字符消失。

41. 视频和音频的用法

• 视频

<video
   src=”视频的路径”
   controls=”控制播放、暂停、音量等”
   autoplay=”自动播放”
   loop=”循环播放”
   width=”视频播放器的宽度”
   height=”视频播放器的高度”
>
</video>

• 音频

<audio
   src=”音频的路径”
   controls=”控制播放、暂停、音量等”
   autoplay=”自动播放”
   loop=”循环播放”
></audio>

42.利用CSS3 border-radius画图

• 圆形

  //宽高相同的时候
  
  border-radius:50%;
  

• 2、自适应椭圆

  .example3{
      width:200px;
      height: 150px;
      border-radius:50%;
      background: #8BC34A;
  }
  

• 3、自适应的半椭圆:沿横轴劈开的半椭圆

  .example4{
      width:200px;
      height: 150px;
      border-radius: 50% / 100% 100% 0 0;
      background: #8BC34A;
  }
  

• 4、自适应的半椭圆:沿纵轴劈开的半椭圆

  .example5{
      width:200px;
      height: 150px;
      border-radius: 100% 0 0 100% / 50%;
      background: #8BC34A;
  }
  

• 5、四分之一椭圆

  .example6{
      width:160px;
      height: 100px;
      border-radius: 100% 0 0 0;
      background: #8BC34A;
  }
  

• 用椭圆绘制opera浏览器的logo

  <div class="opera">
          <div class="opera-top"></div> 
  </div>
  
  
  
  .opera{
      width:258px;
      height: 275px;
      background: #F22629;
      border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
      position: relative;
  }
  .opera-top{
      width: 112px;
      height: 231px;
      background: #FFFFFF;
      border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
      position: absolute;
      left: 50%;
      right: 50%;
      top: 50%;
      bottom: 50%;
      margin-left: -56px;
      margin-top: -115px;
  }
  

• 7、平行四边形

  .button {
      width:200px;
      height: 100px;
      position: relative;
      left: 100px;
      line-height: 100px;
      text-align: center;
      font-weight: bolder;
  }
  .button::before {
     content: ''; /* 用伪元素来生成一个矩形 */
  　　position: absolute;
  　　top: 0; right: 0; bottom: 0; left: 0;
  　　z-index: -1;
  　　transform: skew(45deg);
  　　background: #8BC34A;
  }
  

• 8、菱形

  .example1 {
      width:140px;
      height: 140px;
      position: relative;
      left: 100px;
      line-height: 100px;
      text-align: center;
      font-weight: bolder;
  }
  .example1::before {
      content: ''; 
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      transform: rotate(45deg);
      background: #8BC34A;
  }
  

• 9、切角效果

  .example2{
      background: #8BC34A;
      background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
                  linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
                  linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
                  linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
      
      padding: 1em 1.2em;
      max-width: 12em;
      line-height: 1.5em;
  }
  

• 10、弧形切角

  .example3{
      background: #8BC34A;
      background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
                  radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
                  radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
                  radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
      background-size: 50% 50%;
      background-repeat: no-repeat;
      
      padding: 1em 1.2em;
      max-width: 12em;
  }
  

43. 存储数据在localstorage，如果后端变更了几条数据，你怎么修改到你的页面上

• 第一步：使用getItem读取localstorage里面的数据和后端传来数据做对比，如果发现改变，则使用setItem将新数据写入，然后在向页面渲染

44.vue权限动态路由显示

• 创建动态路由页面，根据后端传来的用户数据的数据权限不同，动态分发路由页面

45. vue中watch和computed的区别

• 计算属性computed :

  \1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

  \2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

  3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

  \4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

  5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

• 侦听属性watch：

  \1. 不支持缓存，数据变，直接会触发相应的操作；

  2.watch支持异步；

  3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

  \4. 当一个属性发生变化时，需要执行对应的操作；一对多；

  \5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

  immediate：组件加载立即触发回调函数执行，

  deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

46. methods里面的方法可以实现compute的和watch的功能吗

• 不能
• 从作用机制上