【Vue】Vue介绍 && 声明式渲染 && 数据响应式

原创

lirendada

发布于 2026-01-22 12:48:44

1010

文章被收录于专栏：前端前端

Ⅰ. 背景介绍

什么是 Vue

概念：Vue（读音/vjuː/，类似于view）是一套构建用户界面的渐进式JavaScript框架

什么是构建用户界面：基于数据渲染出用户可以看到的界面
什么是渐进式：循序渐进的学习，即不必把 Vue 中的所有 API 都学完才能开发 Vue，可以学一点开发一点

Vue 学习内容和方法

声明式渲染 + 数据响应式
数据渲染：插值 + 指令 + 计算属性 + 侦听器 ...
组件及组件化：生命周期 + 组件 + 组件化 + 组件通信 + 插槽 ...
路由：配置 + 跳转 + 传参 + 嵌套 + 守卫 ...
状态管理：Pinia
ElementPlus：核心组件Form、Table、Dialog、Menu...
阶段实战：Vue3全家桶 + ElmentPlus

必备插件

Vue (Official)
1. 提供Vue文件的语法高亮
2. 支持Vue文件的智能感知和自动完成
3. 提供了Vue文件的格式化工具
Vue 3 Snippets
1. 提供Vue3相关的代码片段，方便快速输入常见代码结构
Path Intellisense
1. 路径自动补全
Auto Import
1. 自动导入插件，可帮助自动完成和自动导入模块
AutoCloseTag
1. 自动闭合HTML标签
AutoRenameTag
1. 自动重命名HTML标签

Ⅱ. 声明式渲染

一、Vue 的 HelloWorld 程序

1. CDN 引入 vuejs

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2. 准备容器

<div id="app">
</div>

3. 创建应用

<script>
  // 创建Vue应用
  Vue.createApp({
    // 入口函数
    setup() {
      // 准备数据
      const msg = 'Hello World'
      // 返回数据对象
      return {
        msg
      }
    }
  }).mount('#app') // 内容渲染到 id=app 的盒子里
</script>

4. 渲染数据

<div id="app">
  <h1>{{ msg }}</h1>
</div>

二、setup函数

setup 函数是 Vue3 API 的入口函数

setup 函数是 Vue3 特有的选项，作为编写代码的起点
标签中用到的数据或函数，需要在 setup 中声明并返回
函数中 this 不是 Vue 实例，setup 中是不会用到 this 的

三、插值表达式

刚刚通过 {{ msg }} 渲染出 Hello World，在 Vue3 中，{{ 表达式 }} 称之为插值表达式。

作用：把 表达式的结果 展示在 双标签 中

语法

{{ 表达式 }}，表达式指凡是有结果的操作/运算，前端中常见的表达式有：

所有的字面量
对象.属性名
算术运算或三元运算
方法的调用

步骤

script 下的 setup 中定义并返回初始数据
template 中插值展示数据

代码示例

<div id="app">
  <!-- 1. 直接放变量 -->
  <h1>{{ msg }}</h1>
  
  <!-- 2. 对象.属性 -->
  <p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
  
  <!-- 3. 三元表达式 -->
  <p>{{ obj.age >= 18 ? '已成年' : '未成年' }}</p>
  
  <!-- 3. 算数运算 -->
  <p>来年我就 {{ obj.age + 1 }} 岁了</p>
  
  <!-- 4. 函数的调用 -->
  <p>fn的返回值是: {{ fn() }}</p>
  
  <!-- 5. 方法的调用 -->
  <p>{{ msg }} 中含有 {{ msg.split(' ').length }} 个单词</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    setup() {
      // 字符串
      const msg = 'Hello World'
      
      // 对象
      const obj = {
        name: '小vue',
        age: 9
      }
      
      // 函数
      function fn() {
        return 100
      }
      
      // 返回
      return {
        msg,
        obj,
        fn
      }
    }
  }).mount('#app')
</script>

Ⅲ. 数据响应式

一、安装Vue开发者工具

通过谷歌应用商店安装（科学上网）
极简插件下载（推荐）

安装之后，Chrome 进入开发者工具后，会看到多一个 Vue 的调试面板

二、数据响应式

1. 什么是数据响应式

简单的说：就是数据变了，视图跟着变

借助开发者工具，发现数据不可改，也就是说，默认声明的数据，不具备响应式特性；

换句话说，即使数据变了，视图也不会更新。

2. 解决方案

那如何才能实现数据响应式呢？

需要借助我们接下来学习的 reactive、ref 响应式函数

三、响应式函数 `reactive`

从 Vue 中解构出 reactive 函数
在 setup 函数中，使用 reactive 函数，传入一个普通对象，返回一个响应式数据对象
最后 setup 函数返回一个响应式对象，供模板使用

💥注意：reactive 接收的参数是对象

<div id="app">
  <p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  // 解构出 reactive 响应式函数
  const { createApp, reactive } = Vue
  
  createApp({
    setup() {
      // 接收一个对象作为参数
      // 返回一个响应式对象(当对象的属性值变了, 视图会跟着变)
      const obj = reactive({
        name: '小vue',
        age: 9
      })
      
      return {
        obj
      }
    }
  }).mount('#app')
</script>

四、响应式函数 `ref`

通常使用 ref 函数定义响应式数据，不限类型；但如果是对象，推荐使用 reactive

从 Vue 中解构出 ref 函数
给 ref 传入指定类型的数据，得到一个响应式数据

💥注意：操作 ref 创建的数据，js 中需要 .value，template 则不用 .value

<div id="app">
  <!-- ref数据: 在 template 中使用不用 .value -->
  <h3>{{ msg }}</h3>
  <p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
  <button @click="onClick">修改ref数据</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  // 解构出 createApp, ref 函数
  const { createApp, ref } = Vue
  
  createApp({
    setup () {
      // ref 定义一个响应式字符串
      const msg = ref('Hello Vue3')
      
      // ref 定义一个响应式对象
      const obj = ref({
        name: '小vue',
        age: 9
      })
      
      // 点击事件
      const onClick = () => {
        // 修改 msg
        msg.value = '你好, Vue3'
        // 修改 obj 的 name 和 age 属性
        obj.value.name = 'Vue3'
        obj.value.age = 10
      }
      
      return {
        msg,
        obj,
        onClick
      }
    }
  }).mount('#app')
</script>

五、reactive 与 ref 的选择

分析

reactive 只接收对象作为参数，不支持简单数据类型。
ref 既可以接收基本类型，也可以接收引用类型，但在操作的时候需要 .value。
它们各有特点，现在也没有最佳实践，没有明显的界限，所有小伙伴们可以自由选择