Vue 整理

vue是一套渐进式框架（mvvm）,数据层跟视图层的双向绑定使得开发更加方便，

随便说几个优点：

1. 不需要像html页面那样频繁的操作真实的dom元素，它本身都是虚拟dom跟数据进行捆绑，降低了性能消耗。
2. 较小巧，运行速度快
3. 将注意力集中保持在核心库，有丰富的插件库
4. 提供了组件化的视图组件
5. 开发容易上手，无论是路由拦截，还是其他的都非常方便
   …

Vue.js借鉴了Angular以及React的一些核心思想，是站在巨人的肩膀上开发出来的，目前vue已经算是一个成熟完善的mvvm框架，深受开发者的喜爱，现在使用量甚至超越了react和angular

vue常用的标签

v-if //用来判断是否显示该内容 这个是直接从初始化都不初始，等于没有这段代码；按照条件是否渲染
v-show //与 v-if 功效差不多 比较适合用来做tab切换，但是这个是display的block或none；
v-model //绑定值 在表单控件或者组件上创建双向绑定。
比如form里面的一些input组件之类的

v-html //插入html文本
v-bind //绑定data-值 缩写 :，往元素的属性中绑定数据

v-for //循环数组值 例子：v-for=’ list in date ’

v-on //绑定事件 简写方式 @ 例子 @click=” 等同于js οnclick=” 缩写@
@blur //失焦事件
@focus //聚焦事件

绑定数据有三种方式：

• 插值，也就是{{name}}的形式，以文本的形式和实例data中对应的属性进行绑定
• v-bind：
• v-model：

v-bind

eg：v-bind:class 可简写为 :class

当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。他只是单向变动

v-bind支持的类型
html中的属性、css的样式、对象、数组、number 类型、bool类型

v-model
在表单控件或者组件上创建双向绑定。
主要是用在表单元素中，它实现了双向绑定。在同事使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的中实现双向绑定。

<input v-model="message" placeholder="edit me">
 
<p>Message is: {{ message }}</p>

面试题：

一、对于MVVM的理解？

MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

二、Vue的生命周期

beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。mounted（载入后）在el被新创建的vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
1.什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2.vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

4.第一次页面加载会触发哪几个钩子？
答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

三、Vue组件间的参数传递

1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

四、vue四大常用功能

1.filters过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”
过滤器的使用

<template>
  <div class="filters">
    <h1 v-text="filtersTitle"></h1>
    <input v-model="filtersText"/>
    <div>{{filtersText | filtersTextChange}}</div>
  </div>
</template>
<script>
  let vm = {};
  export default {
    data() {
      vm = this;
      return {
        filtersTitle: 'vue过滤器学习，filters',
        arrayList: [
          {
            "code": "1",
            "value": "北京市"
          },
          {
            "code": "2",
            "value": "上海市"
          },
          {
            "code": "3",
            "value": "广州市"
          },
          {
            "code": "4",
            "value": "深圳市"
          },
          {
            "code": "5",
            "value": "杭州市"
          },
          {
            "code": "6",
            "value": "天津市"
          },
          {
            "code": "7",
            "value": "西安市"
          },
          {
            "code": "8",
            "value": "武汉市"
          },
          {
            "code": "9",
            "value": "长沙市"
          }
        ],
        filtersText: '1',
      }
    },
    filters: {
      filtersTextChange: function (dataStr) {
        let arrayList = vm.arrayList;
        let value = '没有这个城市 ';
        for (let b of arrayList) {
          if (b.code == dataStr) {
            value = b.value;
            break;
          }
        }
        return value;
      }
    }
  }
</script>

实现效果如图所示 ：

除此之外还有：全局定义过滤器、串联过滤器

2.computed计算属性

1. 定义：
   是一个计算属性,类似于过滤器,对绑定到view的数据进行处理

2. get用法

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

fullName不可在data里面定义,
如果定义会报如下图片的错误,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值

3. get和set的用法

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
  fullName：{
   get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
      return this.firstName + ' ' + this.lastName
    },
   set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
       //val就是fullName的最新属性值
       console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }

3.methods计算属性

4.watch观察

1. 定义
   watch是一个观察的动作
2. 示例

  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
     firstName: function (val) {
     this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
     this.fullName = this.firstName + ' ' + val
   }
   }

上面是监听firstName和lastName的变化，但是仅限简单数据类型

五、computed和watch的区别

computed特性

1. 是计算值，
2. 应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
3. 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

watch特性

5. 是观察的动作，
6. 应用：监听props，$emit或本组件的值执行异步操作
7. 无缓存性，页面重新渲染时值不变化也会执行

六、computed区别于method的两个核心

在官方文档中，强调了computed区别于method最重要的两点

• computed是属性调用，而methods是函数调用
• computed带有缓存功能，而methods不是

六、一句话就能回答的面试题

1.css只在当前组件起作用
答：在style标签中写入scoped即可 例如：

2.v-if 和 v-show 区别
答：v-if按照条件是否渲染，v-show是display的block或none；

3.vue.js的两个核心是什么？
答：数据驱动、组件系统

4.vue几种常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

5.v-on 可以绑定多个方法吗？
答：可以

6.什么是vue的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：
①使得数据处理结构清晰；
②依赖于数据，数据更新，处理结果自动更新；
③计算属性内部this指向vm实例；
④在template调用时，直接写计算属性名即可；
⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；
⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

7.vue等单页面应用及其优缺点
答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。