vue的生命周期

最新推荐文章于 2024-08-30 10:14:48 发布

m87里的光

最新推荐文章于 2024-08-30 10:14:48 发布

阅读量530

点赞数 19

文章标签：前端

本文链接：https://blog.csdn.net/2301_76604664/article/details/141144345

版权

1.定义

从vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期

生命周期钩子 = 生命周期函数 = 生命周期事件

每个vue应用都是通过vue函数创建一个新的vue实例开始的：

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

在上面的例子中，app 就是一个 Vue 实例，它绑定了一个 message 数据属性和一个 reverseMessage 方法。当 message 的值发生改变或者 reverseMessage 方法被调用时，Vue 会自动更新相关的 DOM。

DOM，全称 Document Object Model（文档对象模型），是一种用于表示和操作 HTML 和 XML 文档的标准接口。DOM 定义了一套标准的属性、方法和事件，用于访问和修改文档中的内容和结构。

在网页开发中，DOM 主要用于以下目的：

表示文档结构：DOM 把 HTML 或 XML 文档看作一棵树，其中每个节点代表一个元素、文本或注释。根节点通常是文档的 <html> 或 <xml> 标签，而子节点可以是其下的各种标签、文本和属性。
访问和修改内容：DOM 提供了多种方法来访问和修改文档中的元素，如 getElementById(), getElementsByClassName(), getElementsByTagName() 等，以及节点的 innerHTML 和 textContent 属性。
处理事件：DOM 允许开发者为文档中的元素添加事件监听器，以响应用户的操作，如点击、拖动或键盘输入。
创建和删除元素：DOM 支持创建新的节点并将其插入文档中，或删除现有的节点，从而动态地改变页面的内容和布局。
样式和属性操作：可以通过 DOM 访问和修改元素的样式和属性，实现 CSS 样式的动态调整。

在 JavaScript 中，DOM 被广泛用于动态网页编程，使网页能够根据用户的交互或来自服务器的数据实时更新。

2生命周期函数

beforeCreate(){};

这是我们遇到的第一个生命周期函数，表示实例完全被创建起来之前，会执行它；

注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化；

created(){};

data和methods中的数据都已经初始化了，可以使用他们的数据了；

beforement(){};

模版已经在内存中编辑完成了，但是尚未把模板渲染到页面中；

mounted(){};

内存中的模版已经真实的挂载到了页面中，用户可以看的到相关数据了；

它是实例创建完的最后一个函数，当执行完mounted就表示，实例已经被完全创建好了，此时如果没有其他的操作，这个实例就静静地躺在内存中一动不动了；此时组件已经脱离了创建阶段，进入了运行阶段；

beforeUpdate(){};

这时候，我们的界面还没有跟新，但是数据已经发生了更新；页面尚未和最新的数据保持同步；

updated(){};

页面和data数据已经保持同步了；

销毁过程：

beforeDestroy(){};实例身上所有的data和methods,以及过滤器，指令都处于可用状态，还没有真正执行销毁过程；

destroyed,实例身上所有的data和methods,以及过滤器，指令都已经不可用，真正执行了销毁过程；

m87里的光

关注

19
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue的生命周期

从vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期生命周期钩子 = 生命周期函数 = 生命周期事件在上面的例子中，app就是一个 Vue 实例，它绑定了一个message数据属性和一个方法。当message的值发生改变或者方法被调用时，Vue 会自动更新相关的 DOM。DOM，全称 Document Object Model（文档对象模型），是一种用于表示和操作 HTML 和 XML 文档的标准接口。
复制链接

扫一扫