vue基础知识

一.MVVM

View层

视图层

在前端开发中，通常指DOM

主要用来给用户展示信息

Model层

数据层

可能是固定的死数据，更多是来自服务器、网络上的数据

ViewModel

视图模型层

View与Model层沟通的桥梁

实现了Data Binding（数据绑定），将Model的改变实时反映到View中

实现了DOM Listener（DOM监听），当监听到DOM发生某种事件时，改变对应的Data

二.Vue的生命周期

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

我们来看一下官网给的vue生命周期的图：

我们接下来就来详细看看这个vue生命周期图

从上面这幅图中，我们可以看到vue生命周期可以分为八个阶段，分别是：

beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

下面我们就来分别看看vue生命周期的这八个阶段：

1、创建前（beforeCreate）

对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

2、创建后（created）

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

3、载入前（beforeMount）

对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4、载入后（mounted）

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5、更新前（beforeUpdate）

对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

6、更新后（updated）

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

7、销毁前（beforeDestroy）

对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

8、销毁后（destroyed）

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可以准确地控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。

三.组件化

人面对复杂问题的处理方式：

任何一个人处理信息的逻辑能力都是有限的

所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。

但是,我们人有一种天生的能力，就是将问题进行拆解。

如果将一个复杂的问题，拆分成很多个可以处理的小问题,再将其放在整体当中，你会发现大的问题也会迎刃而解。

组件化也是类似的思想：

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。

但如果，我们将一个页面拆分成一个个小的功能块

每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

四.组件的使用（全局与局部）

1. 创建
   调用Vue.extend()方法创建组件构造器

2. 注册
   调用Vue.component()方法注册组件

3. 使用
   在Vue作用范围内使用组件

Vue.extend()

调用Vue.extend()创建的是一个组件构造器。

通常在创建组件构造器时,传入template代表我们自定义组件的模板。

该模板就是在使用到组件的地方,要显示的HTML代码。

Vue.component

调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。

所以需要传递两个参数:

注册组件的标签名

组件构造器

五.组件的使用（语法糖）

==Vue提供了一个语法糖，省去了手动调用extend的步骤，直接在注册时传入对象，component方法会在底层帮你调用。

六.父子组件

组件中的数据

• 组件不能直接访问实例中的数据

• 可以在组件中添加自己的data属性

• 必须定义为一个函数，且返回一个对象

• 对象中保存着数据

父子间的通信

父传子：props属性

子传父：emit事件

父传子

• 方式一：字符串数组，数组中的字符串就是传递时的名称

• 方式二：对象，对象可以设置传递时的类型，也可以设置默认值等

• props是单向绑定的，即只能父组件向子组件传递，不能反向。

注：若想在props中使用驼峰命名法，子标签的v-bind绑定的属性必须用’-‘分割

比如：

子传父