IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue实例 和 Vue实例周期生命函数 -> 正文阅读

[JavaScript知识库]Vue实例 和 Vue实例周期生命函数

一、Vue实例?

Vue中的每一个组件其实也是一个Vue实例。新建组件item, 模板内容为div块;

现在就可以在根实例里使用这个组件了,使用方法就是通过标签的形式写在根实例里。

实际上在创建组件的时候,Vue底层也会将组件编译成Vue实例。

可以在控制台打印实例进行查看:

我们可以通过vm.$data 查看实例里面的数据;通过vm.$el 查看实例接管的DOM元素;凡是以$符号开头的,都是实例的属性或者方法。

当我们更改实例的数据时,页面也会跟着变化。

我们可以看一下实例的$destory( )这个方法,它的作用是销毁实例。

?当调用这个方法之后,再次改变$data.message的数据时,页面是不会发生变化的。也就是说vm这个实例已经被销毁了(清理它与其它实例的连接,解绑它的全部指令及事件监听器。),不过已经产生的DOM不会被销毁。

当Vue实例销毁时,已绑定的方法也不会跟着销毁,因为一些方法时放在堆中的,实例中只是保存了它的引用,你实例销毁了,只是引用的那个纽带销毁了,但是堆的内容还在那里啊。所以需要自己手动销毁存储在堆中的内容。

?二、Vue实例生命周期函数

下面是简单的Vue实例代码展示,结合代码和生命周期图示理解:

大家可以结合官网的生命周期图示查看讲解:
生命周期函数可以理解为Vue实例在某一个时间点会自动执行的函数

①首先执行的函数是beforeCreated。当我们创建Vue实例时,实例会进行基础的初始化,然后自动调用beforeCreated函数
②Vue会继续处理一些外部的注入和一些双向绑定的内容,这部分的初始化也完成时,Vue实例的一些基础化操作都初识完成了然后created函数会自动执行。
③然后会寻问Vue实例里是否有el这个选项,如果有el这个选项会继续寻问是否有template这个属性,如果没有这个属性会走右侧的分支:把el外层的HTML当作外层的模板。也就是说当实例没有模板时,会把外层的div当作模板。如果有模板会走左侧的分支:用模板去渲染页面。

?④在有数据和模板、渲染页面之前会执行beforeMount函数,也就是模板和数据相结合即将挂载到页面之前的时间点上,这个函数会被执行。


⑤模板结合数据最终生成DOM元素挂载到页面之上,也就是hello world会显示在页面上。然后mounted函数会被自动执行。可以分别打印一下查看页面是否渲染:发现在beforeMount函数里页面是没有内容的,在mount函数是显示出来hello world的。

?⑥beforeDestory()是在实例销毁之前才被执行, 和上面的函数一样直接执行是不可以的。

?

?⑦上上图中还有两个函数,一个是beforeUpdate和updated,图示中显示当数据发生改变的时候这个两个函数会执行。数据发生改变还未重新渲染之前,beforeUpdate会执行;重新渲染之后,updated会执行。
我们在代码中写上一条数据然后在控制台进行更改,可以看到beforeUpdate和update执行:

?要注意的是,Vue的生命周期函数直接定义在了Vue实例之上,并没有放在methods对象里。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-10-17 12:24:08  更:2022-10-17 12:24:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/17 20:15:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码