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

vue.js基础学习
vue是什么?
1.vue是目前最火的框架之一,主要用于单页面应用程序,也可用于手机app开发,其他两个还有.js、react.js一起被称为前端三大主流框架
2.vue是一套渐进式框架,数据层和视图层的双向数据绑定是开发更方便
3.4.vue有配套的第三方类库,可以将其整合起来做大型项目的开发 。
vue的优缺点
优点:
1、简单易用;
2、灵活渐进式;
3、轻量高效 。
缺点:
1.缺乏高阶教程、文档与书籍;
2.VUE不支持IE8;
3.生态环境差不如和react
4.社区不大
vue安装的三种方式
1.独立版本安装
在vue.js官网上直接下载,并用标签引入
官网下载要使用开发版本,包含完整的警告和调试模式
在开发环境下不要使用压缩版本,不然就失去了所有常见错误相关的警告
2.CDN
3.NPM

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

文章插图
注:前两个是小型项目的开发,最后一个是用于大型项目的开发 。
vue的生命周期
总共分为四个阶段:创建、挂载、更新、销毁八个函数:
1. 创建前
2. 创建后
3. 载入前
4. 载入后
5. 更新前
【vue.js第一次加载会触发哪几个钩子函数】6. 更新后
7. 销毁前
8. 销毁后
详细解释:
1.(创建前): 在数据观测和初始化事件还未开始
2.(创建后): 完成数据观测,属性和方法的运算,初始化事件,$ el属性还没有显示出来
3.(载入前): 在挂载开始之前被调用,相关的函数首次被调用 。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html 。注意此时还没有挂载html到页面上 。
4.(载入后): 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用 。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象 。完成模板中的html渲染到html页面中 。此过程中进行ajax交互 。
5.(更新前): 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前 。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程 。
6.(更新后): 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用 。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作 。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环 。该钩子在服务器端渲染期间不被调用 。
7.(销毁前): 在实例销毁之前调用 。实例仍然完全可用 。
8.(销毁后): 在实例销毁之后调用 。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁 。该钩子在服务器端渲染期间不被调用 。
vue目录介绍
vue.js第一次加载会触发哪几个钩子函数

文章插图
vue的三个特点
1.数据双向绑定;
2.组件化;
3.单文件组件 。
vue.js第一次加载会触发哪几个钩子函数
创建前
创建后
载入前
载入后
MVVM模式
MVVM 是 Model-View- 的缩写 。
Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑 。
View 代表UI 组件,它负责将数据模型转化成UI 展现出来 。
监听模型数据的改变和控制视图行为、处理用户交互
通俗点讲就是:
M 数据层
V 视图层
VM 视图模型
当M(数据)发生改变,V(视图)也会发生改变
反之,当V(视图)发生改变,M(数据)也会改变
这就是MVVM模式的双向数据绑定