| |
|
开发:
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实例。 可以在控制台打印实例进行查看: 当我们更改实例的数据时,页面也会跟着变化。 我们可以看一下实例的$destory( )这个方法,它的作用是销毁实例。 ?当调用这个方法之后,再次改变$data.message的数据时,页面是不会发生变化的。也就是说vm这个实例已经被销毁了(清理它与其它实例的连接,解绑它的全部指令及事件监听器。),不过已经产生的DOM不会被销毁。 当Vue实例销毁时,已绑定的方法也不会跟着销毁,因为一些方法时放在堆中的,实例中只是保存了它的引用,你实例销毁了,只是引用的那个纽带销毁了,但是堆的内容还在那里啊。所以需要自己手动销毁存储在堆中的内容。 ?二、Vue实例生命周期函数下面是简单的Vue实例代码展示,结合代码和生命周期图示理解: 大家可以结合官网的生命周期图示查看讲解: ①首先执行的函数是beforeCreated。当我们创建Vue实例时,实例会进行基础的初始化,然后自动调用beforeCreated函数。 ?④在有数据和模板、渲染页面之前会执行beforeMount函数,也就是模板和数据相结合即将挂载到页面之前的时间点上,这个函数会被执行。
?⑥beforeDestory()是在实例销毁之前才被执行, 和上面的函数一样直接执行是不可以的。 ? ?⑦上上图中还有两个函数,一个是beforeUpdate和updated,图示中显示当数据发生改变的时候这个两个函数会执行。数据发生改变还未重新渲染之前,beforeUpdate会执行;重新渲染之后,updated会执行。 ?要注意的是,Vue的生命周期函数直接定义在了Vue实例之上,并没有放在methods对象里。 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 | -2025/1/11 17:03:00- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |