Vue2.5笔记:Vue的实例与生命周期
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步,也是非常必须的,因为实例是它的一个起点,也是它的一个入口,只有我们创建一个 Vue 实例之后,我们才行利用它进行一些列的操作。
首先 Vue 没有完全遵守 MVVM 的架构模式,但是它的设计也受到了该模式的启发,Vue 也就是在该模式中起到 VM(ViewModel) 的作用。如果有对 MVC、MVVM 模式不了解的同学可以参考阮一峰老师的 《MVC,MVP 和 MVVM 的图示》 这篇文章可以对它们有一个简单对了解。
Vue 的实例从创建到使用以及销毁的过程中会有多个生命周期钩子,这些钩子在我们整个的实例过程中起到了非常重要,而且有了这些钩子我们可以很好的去控制我们的整个过程的逻辑。
Vue 借鉴了 MVVM 架构模式,Vue 在整个过程中起到的就是 VM 的作用,如果我们对 MVVM 有过了解,V 即 View( 视图层)就是我们看到的模版HTML,M 即 Model(数据层)就是我们想要显示出来的数据,Vue 就是负责把 View-Model 连接起来。
mvvm
创建Vue实例
每个 Vue 实例都是通过 Vue 函数来创建的,在 Vue 中的每一个应用都是会创建一个实例,组件也是一个实例。
当创建一个 vue 实例的时候,我们可以传入一个选项对象,如data、el、methods、生命周期钩子函数等等。
var vm = new Vue({
el: '#root',
data: {
name: 'Modeng'
},
methods: {
handleClick () {
console.log(123);
}
}
})
从上面的图片我们看到我们的实例已经挂在到 DOM 元素上,数据和方法都已经拥有。最后我们就是要把这些数据怎么显示到我们到眼前,这里就需要用到 Vue 另一个知识点 模版了。
<div id="root">
<div>Hello {{name}}</div>
</div>
我们只需要使用 模版的 {{}} 语法将我们的数据绑定到视图上就能显示我们要的结果。
如果你以为仅仅是这么简单那你就太年轻了,我们也就没有使用 Vue 的必要了,当我们创建一个实例时,Vue 会把视图与数据进行连接,当我们修改数据时,视图会自动更新。
有一点值得我们注意的是,我们在使用 Vue 实例时,需要关注下 this,千万不要在含有 this 的函数时,使用箭头函数,因为箭头函数是没有绑定 this 的,所以会出现问题。
实例的属性、方法与 API
除了上面我们所说的数据的属性以外,Vue 给我们暴露了很多的实例与方法,例如: 「$data」、「$el」、「$watch」、「$refs」、「$watch」、「$mount」等等,如果你对等多的实例属性与方法感兴趣可以移至 API 参考,不过后面我们也会介绍一些常用的方法和属性 watch、methods、refs等
Vue 实例不尽带了很多等实例方法与属性,还自带了很多 API 其中全局的有 11 个,全局配置的有 9个,如果想查看也是在上面的链接中。
生命周期构子
Vue 实例会有一个完整的生命周期,从实例的初始化,设置数据、编译模板、将实例挂载到 DOM 更新数据,销毁等一系列的过程,称为生命周期,在不同的过程中会自动执行一些函数,我们称为生命周期钩子函数。Vue 给了我们很多 生命周期函数,我们可以在整个生命周期的不同过程中使用它。
下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
钩子函数
- beforeCreate: 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,「$el」 属性目前不可见。
- beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
- mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
- beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
- updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。 - activated:keep-alive 组件激活时调用。
- deactivated:keep-alive 组件停用时调用。
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
- errorCaptured:2.5.0+ 新增,当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
var vm = new Vue({
el: "#root",
data: {
name: "Modeng",
},
beforeCreate() {
console.log("实例初始化");
console.log("beforeCreate");
console.log("------------------");
},
created() {
console.log("实例创建完成");
console.log("created");
console.log("------------------");
},
beforeMount () {
console.log("实例挂载DOM之前");
console.log("beforeMount");
console.log("------------------");
},
mounted () {
console.log("实例挂载DOM完成");
console.log("mounted");
console.log("------------------");
},
beforeUpdate () {
console.log("实例的数据更新之前");
console.log("beforeUpdate");
console.log("------------------");
},
updated () {
console.log("实例的数据更新完成,DOM更新");
console.log("updated");
console.log("------------------");
},
beforeDestroy () {
console.log("实例销毁之前");
console.log("beforeDestory");
console.log("------------------");
},
destroyed () {
console.log("实例销毁完成");
console.log("destoryed");
console.log("------------------");
}
});
我们可以看到从实例开始创建到渲染挂载到 DOM 结束后,会执行的钩子函数,下面我们来尝试进行数据的更新与销毁实例看看钩子是怎么执行的。
总结
这边文章主要是介绍了下 Vue 的实例与生命周期,在Vue 实例化的过程中我们可以添加许多可选对象,比如 data、methods、生命周期钩子函数等,让实例产生我们想要的行为。
实例创建完成之后,我们就可以让它与视图同步,只要我修改数据视图会自动跟着同步。
在实例的创建过程中会存在许多的生命周期钩子函数,它会在我们实例的不同阶段产生不同的效果。
关注我的微信公众号:六小登登,更多干货文章,欢迎一起交流。
人人都可以成为高手。我是一个会技术,又写干货的码农。欢迎勾搭。
Vue2.5笔记:Vue的实例与生命周期的更多相关文章
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- vue组件实例的生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 实例以及生命周期
最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...
- Vue.js-07:第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 7.Vue实例的生命周期
1.Vue实例的生命周期: 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子 = 生命周期函数 = 生命周期事件 2. 主要的生命 ...
- Vue.js 1.x 和 2.x 实例的生命周期
在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- vue实例的生命周期
Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...
随机推荐
- [Swift]LeetCode145. 二叉树的后序遍历 | Binary Tree Postorder Traversal
Given a binary tree, return the postorder traversal of its nodes' values. Example: Input: [1,null,2, ...
- [Swift]LeetCode159.具有最多两个不同字符的最长子串 $ Longest Substring with At Most Two Distinct Characters
Given a string S, find the length of the longest substring T that contains at most two distinct char ...
- [Swift]LeetCode508. 出现次数最多的子树元素和 | Most Frequent Subtree Sum
Given the root of a tree, you are asked to find the most frequent subtree sum. The subtree sum of a ...
- 基于IPV6的数据包分析(更新拓扑加入了linux主机和抓取133icmp包)(第十三组)
1.拓扑图 2.配置ipv6地址,在拓扑图上对应位置标有对应网段,所在网段的端口按照网段配置,下图以r4为例 3.配置路由表,由于静态路由还要敲ip很麻烦所以使用ospf协议,下图为ospf配置以r5 ...
- MassTransit&Sagas分布式服务开发ppt分享
saga,与分布式相关,最早被定义在Hector Garcia-Molina和Kenneth Salem的论文"Sagas"中.这篇论文提出了一个saga机制来作为分布式事务的替代 ...
- NIO 简介
上文我们描述了五中IO类型.第一种同步阻塞模型我们我们称之为BIO(Blocking IO), 第三种IO复用模型我们称之为NIO(Nonblocking IO). 上图我们可以很容易的发现 BIO会 ...
- 行为驱动:Cucumber + Selenium + Java(一) - 环境搭建
1.1 什么是行为驱动测试 说起行为驱动,相信很多人听说过. 行为驱动开发-BDD(Behavior Driven Development)是一个诞生于2003年的软件开发理念.其关键思想在于通过与利 ...
- 【Vue】----- computed与watch的区别
1.computed computed是一种计算属性,用来监听属性的变化: computed里面的方法调用的时候不需要加(),并且里面的方法必须要有一个返回值: computed里面的方法不是通过事件 ...
- PC逆向之代码还原技术,第三讲汇编中加法的代码还原
目录 PC逆向之代码还原技术,第三讲汇编中加法的代码还原 一丶汇编简介 二丶高级代码对应汇编观看. 1.代码还原解析: 总结 PC逆向之代码还原技术,第三讲汇编中加法的代码还原 一丶汇编简介 在讲解加 ...
- Qt显示Linux desktop natification气泡提示框
在现代Linux桌面环境上我们时常可以看到类似的消息框: 这些消息框常用在如下场景: 即时聊天软件的新消息 闹钟定时提示 电池电量提示 邮件消息 长耗时操作的完成提示 在freedesktop.org ...