【Vue3 从入门到实战进阶式掌握完整知识体系】002-Vue语法基础：Vue中的应用和组件的基本部分解析、生命周期

Bertha 。 2023-10-03 08:23 23阅读 0赞

### 文章目录 ###

*  二、Vue语法基础
 *   *  1、Vue中的应用和组件的基本部分
     *   *  代码
         *  运行结果
     *  2、理解Vue的生命周期函数\*
     *   *  生命周期图
         *  代码
         *  运行结果
         *  关于模板
         *  Vue3的生命周期函数图
         *  Vue3全部的生命周期钩子与Vue2比较

# 二、Vue语法基础 #

## 1、Vue中的应用和组件的基本部分 ##

### 代码 ###

### 运行结果 ###

![image-20210612112626889.png][]

## 2、理解Vue的生命周期函数\* ##

### 生命周期图 ###

> 图片来自官方文档，注释是本人参考网上解读和英文含义写的，不是特别专业，仅作参考！

![lifecycle.png][]

### 代码 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>基础语法</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data(){
         
          return{
         
            message: 'hello world'
          }
        },
        // 创建实例之前执行的函数
        beforeCreate(){
         
          console.log(this.message, "beforeCreate");
        },
        // 创建实例之后执行的函数
        created(){
         
          console.log(this.message, "created");
        },
        // 实例创建之后，挂载之前执行
        beforeMount(){
         
          console.log(document.getElementById("root").innerHTML,"beforeMount");
        },
        // 挂载之后执行，此时数据已经被绑定到视图上了
        mounted(){
         
          console.log(document.getElementById("root").innerHTML,"mounted");
        },
        // 当数据发生变化时，页面更新前执行的函数
        beforeUpdate(){
         
          console.log(document.getElementById("root").innerHTML,"beforeUpdate");
        },
        // 当数据发生变化时，页面更新后执行的函数
        updated(){
         
          console.log(document.getElementById("root").innerHTML,"updated");
        },
        // 当 vue 应用失效时，且在被销毁前，执行的函数
        beforeUnmount(){
         
          console.log(document.getElementById("root").innerHTML,"updated");
        },
        // 当 vue 应用失效时，且在被销毁后，执行的函数
        unmounted(){
         
          console.log(document.getElementById("root").innerHTML,"updated");
        },
        template: '<div>{
         {message}}</div>'
      });
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210612132524993.png][]

### 关于模板 ###

> 参考生命周期图解的7和8，如果有模板就去编译，没有就将所绑定的标签作为模板，因此可以这样写！

### Vue3的生命周期函数图 ###

![de01e730e563406cbf3399861fa23aa4tplv-k3u1fbpfcp-zoom-1.png][]

### Vue3全部的生命周期钩子与Vue2比较 ###

> 我们可以看到`beforeCreate`和`created`被`setup`替换了（但是 Vue3 中仍然可以使用， 因为 Vue3 是向下兼容的， 也就是实际使用的是 vue2 的）。其次，钩子命名都增加了`on`; Vue3.x 还新增用于调试的钩子函数`onRenderTriggered`和`onRenderTricked`

![3eadd1ec0ac94343951ae2453cf41fcetplv-k3u1fbpfcp-zoom-1.png][]

[image-20210612112626889.png]: https://img-blog.csdnimg.cn/img_convert/28bca4c141d27dc3ddfbc6d238f73aaa.png
[lifecycle.png]: https://img-blog.csdnimg.cn/img_convert/9b0ce04b5a03ab01f0fe444c36db1d49.png
[image-20210612132524993.png]: https://img-blog.csdnimg.cn/img_convert/d25052fb81c6e09b7ec91ef2339fac9a.png
[de01e730e563406cbf3399861fa23aa4tplv-k3u1fbpfcp-zoom-1.png]: https://img-blog.csdnimg.cn/img_convert/2b97e8857120dc4268ed1a1e0286e2ba.png
[3eadd1ec0ac94343951ae2453cf41fcetplv-k3u1fbpfcp-zoom-1.png]: https://img-blog.csdnimg.cn/img_convert/390f27e5199ea0185810049fae2d1cc2.png