vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue ref响应式数据、v-指令、computed

Vue基础学习之ref响应式数据、v-指令、computed

作者：南山安

Vue3引入了全新的响应式系统,使得数据管理更为灵活和高效,这篇文章主要介绍了Vue基础学习之ref响应式数据、v-指令、computed的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

本文将带你从一个Todos清单组件，上手Vue基础语法以及核心思想，设计内容有ref响应式数据,v-指令、computed计算属性

完整代码：

<!-- App.vue -->
<script setup>
import { ref, computed } from 'vue'

// 1. 响应式数据：所有 UI 都靠它们驱动
const title = ref('')                     // 输入框内容
const todos = ref([
  { id: 1, title: '睡觉', done: true },
  { id: 2, title: '吃饭', done: true }
])

// 添加任务
function addTodo() {
  if (!title.value.trim()) return
  todos.value.push({
    id: Math.random(),
    title: title.value.trim(),
    done: false
  })
  title.value = ''                         // 清空输入框
}

// 2. 计算属性：派生数据，自动更新
// 统计未完成的数量
const active = computed(() => {
  return todos.value.filter(t => !t.done).length
})

// 全选/全不选的高级玩法
const allDone = computed({
  get() {
    return todos.value.length > 0 && todos.value.every(t => t.done)
  },
  set(val) {
    todos.value.forEach(t => t.done = val)
  }
})
</script>

<template>
  <div class="container">
    <h2>我的 Todos 任务清单</h2>

    <!-- 双向绑定 + 回车添加 -->
    <input type="text" placeholder="今天还要干啥？回车添加" v-model="title" @keydown.enter="addTodo" />

    <!-- 任务列表 -->
    <ul v-if="todos.length">
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ done: todo.done }">{{ todo.title }}</span>
      </li>
    </ul>
    <div v-else class="empty">暂无计划，摸鱼去吧～</div>

    <!-- 统计 + 全选 -->
    <div class="footer">
      <label>
        <input type="checkbox" v-model="allDone" />
        全选
      </label>
      <span>未完成 {{ active }} / 共 {{ todos.length }} 条</span>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 400px;
  margin: 40px auto;
  font-family: sans-serif;
}

input[type="text"] {
  width: 100%;
  padding: 8px;
  font-size: 16px;
}

ul {
  padding-left: 0;
  list-style: none;
}

li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.done {
  color: #999;
  text-decoration: line-through;
}

.empty {
  color: #999;
  text-align: center;
  padding: 20px;
}

.footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

实际展示：

一、拆解Vue代码

其实Vue主界面的代码就是我们的HTML+JS+CSS,它是一个三明治结构

    <script setup></script>  //JavaScript
    
    <template></template>    //HTML

    <style scoped></style>   //CSS

二、 响应式数据：Vue 的灵魂

传统写法（jQuery 时代）：

// 想改标题？先找 DOM 再改 innerText
document.querySelector('h2').innerText = '新标题'

Vue 写法：

const title = ref('Todos任务清单')

然后模板里直接 {{ title }}，你改 title.value = '新标题'，页面就自动变了。

为什么这么神奇？因为 Vue 把 todos、title 这些 ref 包装成了响应式对象，只要你通过 .value 去改它，Vue 就知道「有数据变了」，然后自动把所有用到这个数据的地方更新一遍。

记住一句话：在 Vue 里，你只需要操心数据怎么变，页面怎么变 Vue 帮你搞定。

三、 Vue 基础指令

指令作用本例中的用法
v-model双向绑定，表单专属神器输入框和任务的 checkbox 都用了它
v-for循环渲染数组遍历 todos 渲染每一行
v-if / v-else条件渲染没任务时显示「暂无计划」
v-bind动态绑定HTML属或者组件的props完成的任务加上删除线和灰色
@click / @keydown.enter事件监听简写回车添加任务

这些指令就是 Vue 给我们提供的「魔法语法糖」，让我们几乎不用写原生 DOM 操作。

1.v-model——双向数据绑定

<input type="text" v-model="title" @keydown.enter="addTodo" />
<input type="checkbox" v-model="todo.done">
<input type="checkbox" v-model="allDone" />

作用：

2.v-for——列表渲染

<li v-for="todo in todos" :key="todo.id">
  <input type="checkbox" v-model="todo.done">
  <span :class="{ done: todo.done }">{{ todo.title }}</span>
</li>

作用：

注意：

3.v-if与v-else——条件渲染

<ul v-if="todos.length">
  <!-- 渲染任务列表 -->
</ul>
<div v-else class="empty">暂无计划，摸鱼去吧～</div>

作用：

对比v-show：

4.v-bind（简写:）——动态绑定属性

<span :class="{ done: todo.done }">{{ todo.title }}</span>
<li v-for="todo in todos" :key="todo.id">

作用：

其他常见用法：

<img :src="imageUrl" />
<div :style="{ color: textColor }"></div>
<a :href="linkUrl" rel="external nofollow" >链接</a>

v-bind 是 Vue 实现“数据驱动视图”的关键桥梁。

5.@（即v-on）——事件监听

在你的代码中：

<input ... @keydown.enter="addTodo" />

作用：

其他例子：

<button @click="deleteTodo(id)">删除</button>
<input @input="handleInput" />
<form @submit.prevent="handleSubmit">...</form>

@ 是 v-on: 的缩写，就像 : 是 v-bind: 的缩写。

总结:

  1. 用户在输入框输入 → v-model 同步到 title

  2. 按回车 → @keydown.enter 触发 addTodo() → 新任务加入 todos

  3. v-for 重新遍历 todos，渲染新 <li>

  4. 每个任务的复选框用 v-model 双向绑定 todo.done

  5. 勾选复选框 → todo.done 更新 →

    • active 计算属性自动更新（未完成数）
    • allDone.get() 重新计算（是否全选）

  6. 底部全选框用 v-model="allDone" → 点击时调用 allDone.set() → 批量更新所有 todo.done

  7. 如果 todos 为空 → v-if 切换到 v-else 显示“摸鱼”提示

四、 computed 计算属性：自动缓存的派生数据

我们想显示「未完成的任务有几条」，最笨的写法是：

{{ todos.filter(t => !t.done).length }} / {{ todos.length }}

这样每次渲染都会重新 filter 一遍，数据一大就废。

聪明做法：

const active = computed(() => 
  todos.value.filter(t => !t.done).length
)

computed 有两大杀招：

  1. 缓存：只有当 todos 真的变了，它才会重新计算
  2. 响应式：todos 一变，页面上所有用了 active 的地方立刻更新

更牛的全选 checkbox：

const allDone = computed({
  get() {
    return todos.value.length > 0 && todos.value.every(t => t.done)
  },
  set(val) {
    todos.value.forEach(t => t.done = val)
  }
})

这样 就能实现「全选/全不选」双向功能，代码量少到令人发指。

在 Vue 3 的 computed 中，get 和 set 是用于定义「可读写计算属性」的两个函数。默认情况下，computed 只有一个 getter（即只读），但当你需要让计算属性也能被赋值（比如用在 v-model 中），就需要提供一个 setter（即 set 函数）。

const myComputed = computed({
  get() {
    // 返回派生值（必须）
    return someDerivedValue
  },
  set(newValue) {
    // 处理赋值逻辑（可选）
    // 根据 newValue 更新原始数据
  }
})

get()——读取时触发

set(newValue)——赋值时触发

五、 Vue 开发的核心思维转变

传统开发（操作 DOM）Vue 开发（操作数据）
想加一条任务 → appendChild 一个 li想加一条任务 → todos.push(新对象)
想改标题 → getElementById().innerText = xxx想改标题 → title.value = '新标题'
想全选 → 遍历所有 checkbox 打钩想全选 → allDone = true

你看，Vue 让我们彻底从「操作页面元素」变成了「操作数据」，代码更清晰、更容易维护、也更好测试。

最后总结：

到此这篇关于Vue基础学习之ref响应式数据、v-指令、computed的文章就介绍到这了,更多相关Vue ref响应式数据、v-指令、computed内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文