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

訾博ZiBo

发布于 2025-01-06 06:09:54

10200

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

二、Vue语法基础

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

代码

<!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>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // 创建一个 vue 应用实例，给这个实例起一个名字，叫做“app”
  // 传入了一个参数，这个参数使用 {} 括起来，表示最外层应该如何展示
  // 也就是 vue 应用的根组件
  // mvvm 设计模式：m -> model 数据 view -> 视图 vm -> 视图数据连接层
  // 下面的 data 就是数据，是我们自己定义的
  // 下面的 template 就是视图模板，也是我们自己定义的
  // vm 视图数据连接层是 vue 组件做的
  const app = Vue.createApp({
    data(){
      return{
        message: 'hello world'
      }
    },
    template: '<div>{{message}}</div>'
  });

  // 挂载（绑定）到 id 为 root 的标签
  // 这行代码的返回值就是 vue 应用的根组件
  // 这里的 vm 就是应用的根组件
  const vm = app.mount('#root');
</script>

</html>

运行结果

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

生命周期图

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

代码

<!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>
  <!-- 引入Vue库 -->
  <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>

运行结果

关于模板

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

<!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>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root">
    <!-- 将页面内容写到这里 -->
    <div>{{message}}</div>
  </div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        message: 'hello world'
      }
    }
    // 删除这里的模板
    // template: '<div>{{message}}</div>'
  });
  const vm = app.mount('#root');
</script>

</html>

Vue3的生命周期函数图

de01e730e563406cbf3399861fa23aa4tplv-k3u1fbpfcp-zoom-1.png

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

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