快速入门Vue3——基础语法

原创

已于 2025-09-02 23:29:43 修改 · 1.4k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #生命周期 #计算属性 #条件渲染 #双向绑定 #常用模板 #Vue语法

于 2025-09-02 23:27:29 首次发布

写在前面

上一篇《快速入门Vue3——语法初识》中我们通过几段代码对Vue的语法有了一个初步的感受，那本篇内容我们就开始来详细的介绍一下Vue的基础语法了，话不多说，开始今天的内容！

一、Vue中应用的基础概念

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue基础语法</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // createApp表示创建一个Vue应用，存储到app变量中
    // 传入的参数表示，这个应用最外层的组件，应该如何展示
    // mvvm设计模式：m->model数据层，v->view视图层，vm->ViewModel视图数据连接层
    const app = Vue.createApp({
      data(){
        return {
          content:'Hello World'
        }
      },
      template:`<div>{
  
  {content}}</div>`
    })
    // vm代表的就是Vue应用的根组件
    const vm = app.mount('#root')
    vm.$data.content = '修改数据'
  </script>
</html>

上面的代码结构展示了最基础的Hello World，从这里面我们可以得到以下几个知识点：

Vue应用创建：通过Vue.createApp方法创建Vue应用实例，该方法接收的参数决定应用最外层组件的展示形式，即决定根组件的初始配置
挂载机制：调用app.mount('#root')将应用挂载到指定DOM节点，作用域：Vue应用只管理挂载节点(root)及其子节点的DOM内容
根组件获取：mount()方法的返回值即为根组件实例（这里命名为vm），它实现的是MVVM架构中的ViewModel层，自动维护数据与视图的绑定关系
MVVM模式：
- Model层：组件中定义的响应式数据（如data返回的content）
- View层：组件模板（如包含{ {content}}的template）
- ViewModel层：Vue组件实例自动建立数据与模板的绑定关系
数据操作：通过vm.$data.content可访问或修改根组件数据，数据变更将触发视图自动更新

二、Vue中的生命周期函数

我们可以通过打印日志来观察生命周期的变化：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue基础语法</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 生命周期函数：在某一时刻会自动执行的函数
    const app = Vue.createApp({
      data() {
        return {
          content: 'Hello World',
        }
      },
      // 在实例生成之前会自动执行的函数
      beforeCreate() {
        console.log('beforeCreate')
      },
      // 在实例生成之后会自动执行的函数
      created() {
        console.log('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, 'beforeUnmount')
      },
      // 当Vue应用失效时且DOM完全销毁之后自动执行的函数
      unmounted() {
        console.log(document.getElementById('root').innerHTML, 'unmounted')
      },

      template: `<div>{
  
  {content}}</div>`,
    })
    const vm = app.mount('#root')
  </script>
</html>

生命周期函数本质：在流程图虚线对应时刻自动执行的函数，其触发与代码运行强关联。通过生命周期流程图可观察Vue实例的完整初始化过程。执行Vue.createApp().mount()后，Vue将按顺序处理以下阶段：

Vue首先解析代码中的事件绑定（如v-on指令）和生命周期函数声明，完成逻辑分析初始化。

1) beforeCreate生命周期函数

beforeCreate为Vue实例创建前的首个生命周期函数
执行时机：完成事件和生命周期函数分析后立即触发

2) created生命周期函数

created函数在实例完成依赖注入和双向绑定分析后触发。
执行顺序：位于beforeCreate之后。核心差异：beforeCreate时实例未完全创建，created时实例已就绪。

3) beforeMount生命周期函数

阶段	触发条件	关联操作
beforeCreate	事件/生命周期分析完成	实例未创建
created	依赖注入/双向绑定分析完成	实例创建完毕