VUE3 之生命周期函数

首页 » 遗忘 » 正文内容

1年前寻梦xunm 197 遗忘

概述

老话说的好：天生我材必有用，千金散尽还复来。

言归正传，今天我们来聊一下 VUE 的生命周期函数。

所谓生命周期函数，就是在某一条件下被自动触发的函数。

VUE3 生命周期函数介绍

2.1 beforeCreate

在 VUE 实例生成之前会自动执行的函数

2.2 created

在 VUE 实例生成之后会自动执行的函数

2.3 beforeMount

在组件内容被渲染到页面之前自动执行的函数

2.4 mounted

在组件内容被渲染到页面之后自动执行的函数

2.5 beforeUpdate

当data中的数据发生变化前执行的函数

2.6 updated

当data中的数据发生变化后执行的函数

2.7 beforeUnmount

VUE实例与元素解除绑定前执行的函数

2.8 unmounted

VUE实例与元素解除绑定后执行的函数

代码例子

 </head>
 <body>
     <div id="myDiv"></div>
 </body>
 <script>
  
     // 生命周期函数：在某一时刻会自动执行的函数
     const app = Vue.createApp({     // 创建一个vue应用实例
         data() {
             return {
                 message : "hello"
             }
         },
         //在实例生成之前会自动执行的函数
         beforeCreate() {
             alert("beforeCreate")
         },
         //在实例生成之后会自动执行的函数
         created() {
             alert("created")
         },
         // 在组件内容被渲染到页面之前自动执行的函数
         beforeMount() {
             alert("beforeMount：" + document.getElementById("myDiv").innerHTML)
         },
         // 在组件内容被渲染到页面之后自动执行的函数
         mounted() { // 绑定后自动执行
             alert("mounted：" + document.getElementById("myDiv").innerHTML)
         },
         // 当data中的数据发生变化前执行
         beforeUpdate() {
  
             alert("beforeUpdate：" + document.getElementById("myDiv").innerHTML);
         },
         // 当data中的数据发生变化后执行
         updated() {
             alert("updated：" + document.getElementById("myDiv").innerHTML);
         },
         // 解除绑定前执行的函数
         beforeUnmount() {
             alert("beforeUnmount：" + document.getElementById("myDiv").innerHTML);
         },
         // 解除绑定后执行的函数
         unmounted() {
             alert("unmounted：" + document.getElementById("myDiv").innerHTML);
         },
         // 如果没有 template ，则取绑定元素下面的子元素作为 template
         template : "<div>{{message}}</div>"
     });
  
     // vm 就是vue应用的根组件
     const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
  
     // 更新数据
     vm.$data.message = 'hello world!!!';
  
     // 解除绑定
     app.unmount();
 </script>

Vue 生命周期

0 赞 or 打赏

喜欢就打赏一点

通过PHP解析和JS解析MarkDown

npm 搭建安装的实际采坑记录

已有0 条评论，0 个点赞