vue.js基础理论学习

我不是女神ヾ 2023-03-02 10:57 11阅读 0赞

### vue.js基础学习 ###

*  vue是什么？
 *  vue的优缺点
 *  vue安装的三种方式
 *  vue的生命周期
 *  vue目录介绍
 *  vue的三个特点
 *  vue.js第一次加载会触发哪几个钩子函数
 *  MVVM模式

# vue是什么？ #

1.vue是目前最火的框架之一，主要用于单页面应用程序，也可用于手机app开发，其他两个还有angular.js、react.js一起被称为前端三大主流框架

2.vue是一套渐进式框架，数据层和视图层的双向数据绑定是开发更方便

3.4.vue有配套的第三方类库，可以将其整合起来做大型项目的开发。

# vue的优缺点 #

优点：  
1、简单易用；  
2、灵活渐进式；  
3、轻量高效。

缺点：  
1.缺乏高阶教程、文档与书籍；  
2.VUE不支持IE8；  
3.生态环境差不如angular和react  
4.社区不大

# vue安装的三种方式 #

1.独立版本安装  
在vue.js官网上直接下载，并用script标签引入  
官网下载要使用开发版本，包含完整的警告和调试模式  
在开发环境下不要使用压缩版本，不然就失去了所有常见错误相关的警告

2.CDN  
3.NPM

注：前两个是小型项目的开发，最后一个是用于大型项目的开发。

# vue的生命周期 #

总共分为四个阶段：创建、挂载、更新、销毁八个函数：  
1.beforeCreate 创建前  
2.create 创建后

3.beforeMount 载入前  
4.mounted 载入后

5.beforeUpdate 更新前  
6.updated 更新后

7.beforeDestory 销毁前  
8.destroyed 销毁后

详细解释：  
1.beforeCreate（创建前）: 在数据观测和初始化事件还未开始  
2.created（创建后）: 完成数据观测，属性和方法的运算，初始化事件，$ el属性还没有显示出来

3.beforeMount（载入前）: 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。  
4.mounted（载入后）: 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

5.beforeUpdate（更新前）: 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。  
6.updated（更新后）: 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

7.beforeDestroy（销毁前）: 在实例销毁之前调用。实例仍然完全可用。  
8.destroyed（销毁后）: 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

# vue目录介绍 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX0ZldmVy_size_16_color_FFFFFF_t_70]

# vue的三个特点 #

1.数据双向绑定；  
2.组件化；  
3.单文件组件。

# vue.js第一次加载会触发哪几个钩子函数 #

beforeCreate 创建前  
created 创建后  
beforeMount 载入前  
mounted 载入后

# MVVM模式 #

MVVM 是 Model-View-ViewModel 的缩写。  
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。  
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。  
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互

通俗点讲就是：  
M 数据层  
V 视图层  
VM 视图模型  
当M（数据）发生改变，V（视图）也会发生改变  
反之，当V（视图）发生改变，M（数据）也会改变  
这就是MVVM模式的双向数据绑定

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX0ZldmVy_size_16_color_FFFFFF_t_70]: /images/20230208/b781f6abb5524f38830c8d544c53c0dc.png