created vue 会监听数据吗_2020年Vue的这些面试题你会吗？

说在前面：

面试中可以问的问题很多，最近几年，我也面试，或者视频面试过很多工作 2-4 年的前端，我一般会抓住他们做的项目，进行更详细的追问。所以，初中级前端面试的时候，除了掌握基础知识之外，项目中用到的技术要理清楚，假如你项目中用到的技术，问的时候却一问三不知，那么，基本上就会 pass 掉了

面试时也尽量避免一问一答的这种模式，要举一反三，回答问题是最好结合项目，这样会给面试官一个深刻的印象哦！！

var let const 的区别

• var 会变量提升 let 和 const 不会
• var 在全局命名的变量会挂载到 window 上，let const 不会
• let 和 const 有块级作用域（暂时性死去），var 没有
• let const 不允许重复命名

Vue 里面 computed 是什么东西怎么用？

在 vue 模板里面是有表达式是非常便利的，但是设计他们的初衷是用来简单运算的。在实际的开发过程中在模板里放入过多的表达式会让项目的可维护性大大降低。

<div>
{{ data.split('') ? data.split('').reverse().join('') : data.split(''
) }}
</div>

• 对于这种复杂的计算单数据，我们应该使用计算属性来解决；
• 计算属性中的方法是依赖于其中的值的，当计算属性中的值变化的时候，计算属性会更新

var vm = new Vue({
  el: '#example',
  data: {
  data: 'Hello'
  },
  computed: {
    // 计算属性的getter
    reversedMessage: function () {
    // `this` 指向 vm 实例
    return this.data.split('').reverse().join('')
    }
  }
})

当 this.data 的值发生变化大时候，他所依赖的计算属性 reversedMessage 会重新计算并调用

Vue 里面的 watch 是什么东西怎么使用？

虽然计算属性在大部分情况下都适用，但是在实际开发过程中需要一些自定义的监听器，当需要在执行异步或者开销比较大的操作中，监听器比计算属性更加有效。

watch：{
  //需要监听的值
  question（）{

  }
}

计算属性和监听器看上去是差不多的，但是还是有区别

watch和computed的区别

计算属性和监听属性都是希望在依赖数据变化的时候，被依赖的数据根据事先设定好的函数发生自动的变换。 watch 一个数据相应多个数据 computed 一个数据受到多个数据的影响 在实现原理上watch和computed是差不多的，vue 的data值在初始化阶段都会被挂载上 watcher 观察者模式，当数据改变的时候先调用watcher观察者模式，然后调用计算属性，和监听属性。本质上来说没有多大区别请说出 vue 几种常用的指令

v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
v-show：根据表达式之真假值，切换元素的 display CSS 属性。
v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0 以上必须需配合 key 值 使用。
v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
v-on：用于监听指定元素的 DOM 事件，比如点击事件。绑定事件监听器。
v-model：实现表单输入和应用状态之间的双向绑定
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始
Mustache 标签。跳过大量没有指令的节点会加快编译。
v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。v-if 和 v-show 有什么区别

共同点：

v-if 和 v-show 都是动态显示 DOM 元素。

区别：

1、编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块 内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并 保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性 display。

2、编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直 到条件第一次变为真时，才会开始渲染条件块。v-show 不管初始条件是什么， 元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

3、性能消耗： v-if 有更高的切换消耗。v-show 有更高的初始渲染消耗。

4、应用场景： v-if 适合运行时条件很少改变时使用。v-show 适合频繁切换。

vue 中子组件调用父组件的方法

通过 v-on 监听 和

emit'触发 当前实例上的 自定义事件。 示例： 父组件：

<template>
  <div class="fatherPageWrap">
  <h1>这是父组件</h1>
<!-- 引入子组件，v-on 监听自定义事件 -->
  <emitChild v-on:emitMethods="fatherMethod"></emitChild>
  </div>
</template>
<script type="text/javascript">
import emitChild from '@/page/children/emitChild.vue';
export default{
  data () {
  return {}
  },
  components : {
  emitChild
  },
  methods : {
    fatherMethod(params){
      alert(JSON.stringify(params));
    }
  }
}</script>
  子组件：
<template>
  <div class="childPageWrap">
    <h1>这是子组件</h1>
  </div>
</template>
<script type="text/javascript">
export default{
  data () {
    return {}
  },
  mounted () {
  //通过 emit 触发
  this.$emit('emitMethods',{"name" : 123});
  }
}</script>
结果：
子组件 会调用 父组件的 fatherMethod 方法，该并且会 alert 传递过去的参
数：{"name":123}

axios 有哪些特点？

1、Axios 是一个基于 promise 的 HTTP 库，支持 promise 所有的 API

2、它可以拦截请求和响应

3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON 类 型的数据

4、安全性更高，客户端支持防御 XSRF最后：

更多前端干货获取或者技术交流，请私聊小编

喜欢小编的点点关注，转发收藏