菜单 搜索
首页 前端知识 Vue3从零开始——如何巧妙使用setup语法糖、computed函数和watch函数

Vue3从零开始——如何巧妙使用setup语法糖、computed函数和watch函数

2024-09-10 23:09:14 前端知识 前端哥 345 439 我要收藏

文章目录

  • 一、setup语法糖
  • 二、computed函数
    • 2.1 computed的基本用法
    • 2.2 computed vs methods
    • 2.3 注意事项
  • 三、watch函数
    • 3.1 watch的基本用法
    • 3.2 immediate和deep选项
  • 四、综合小Demo
  • 五、总结

在这里插入图片描述

下载 (14)

一、setup语法糖

之前我们在编写代码时每次都要编写setup()​ ,默认导出配置，还要返回变量和方法，有什么方法可以只写变量和方法，自动返回变量和方法？setup语法糖就可以帮助我们轻松解决这个麻烦。

下面为原本的代码：

<script>  
export default {
    setup() {
      // 创建一个响应式对象
      const state = reactive({
        count: 0,
        title: '计数器应用',
      });
  
      // 增加计数
      function increment() {
        state.count++;
      }
  
      // 重置计数
      function reset() {
        state.count = 0;
      }
      // 暴露定义的数据和函数
      return {
        state,
        increment,
        reset,
      };
    },
  };
</script>

使用setup​语法糖后：

<script setup>
import { reactive } from 'vue';
// 创建一个响应式对象
const state = reactive({
  count: 0,
  title: '计数器应用',
});

// 增加计数
function increment() {
  state.count++;
}

// 重置计数
function reset() {
  state.count = 0;
}

</script>

观察可以发现我们去除掉了export default 、setup函数和其中的返回语句，而我们仅仅是在 script 标签上添加了setup就实现了同样的功能，可以看到代码变得更加简洁，并且不用再写返回内容了。

二、computed函数

computed​ 函数用于定义计算属性，它基于其他响应式状态自动计算其值，并且具有缓存机制，只有在依赖项变化时才会重新计算。

2.1 computed的基本用法

在 setup​ 中，使用 computed​ 创建计算属性。

使用步骤：

  1. 导入computed​函数
  2. 在computed​函数中传入一个getter​函数用来计算数据
  3. 函数返回计算好的数据，返回值为一个计算属性 ref
<template>
    <p>是否有出版书籍:</p>
    <span>{{ publishedBooksMessage }}</span>
</template>


<script setup>
// 1. 导入 computed 函数
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 2. 传入getter函数计算数据，返回的计算属性 publishedBooksMessage
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

image​

2.2 computed vs methods

与直接使用方法生成数据不同，computed​ 属性会缓存其结果，除非其依赖的响应式数据发生变化，否则不会重新计算。这对于性能优化非常重要。

前面代码的判断书籍数量是否大于0当然也可以使用函数来实现：

<template>
    <p>是否有出版书籍:</p>
    <p>{{ calculateBooksMessage() }}</p>
</template>


<script setup>
...

// 通过函数实现
function calculateBooksMessage() {
    return author.books.length > 0 ? 'Yes' : 'No'
}
</script>

两种方式在结果上确实是完全相同的，然而，不同之处在于使用​computed​会基于其响应式依赖被缓存。计算属性publishedBooksMessage​仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books​ 不改变，无论多少次访问 publishedBooksMessage​ 都会立即返回先前的计算结果，而不用重复执行 getter 函数。相比之下，方法调用总是会在重渲染发生时再次执行函数。

2.3 注意事项

  1. 避免直接修改计算属性值

由于从计算属性返回的值是一个“临时数据”，每当源状态发生变化时，就会创建一个新的数据。更改计算属性是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。

  1. Getter 不应有副作用

计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要。举例来说，不要改变其他状态、在 getter 中做异步请求或者更改 DOM！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。

比如说下面的代码：在 computed​ 中引入了副作用

import { ref, computed } from 'vue';
 
const counter = ref(0);
const thresholdReached = ref(false);

// 错误：在 computed getter 中引入副作用
const checkThreshold = computed(() => {
    if (counter.value > 10) {
        thresholdReached.value = true; // 副作用：修改了外部状态
    }
    return counter.value;
});

在这个例子中，checkThreshold​ 是一个 computed​ 计算属性，但它在 getter​ 中修改了 thresholdReached​ 变量。这是一个副作用，违反了 computed​ 的最佳实践原则。解决这个问题的方法是使用侦听器watch​函数来根据其他响应式状态的变更来创建副作用。

import { ref, computed, watch } from 'vue';

const counter = ref(0);
const thresholdReached = ref(false);

// 正确：纯粹的计算属性
const checkThreshold = computed(() => {
    return counter.value;
});

// 使用 watch 监听 counter 的变化并执行副作用
watch(counter, (newVal) => {
    if (newVal > 10) {
        thresholdReached.value = true; // 副作用：修改外部状态
    }
});

三、watch函数

watch​ 函数用于监听响应式数据的变化，并执行副作用操作（如异步请求、手动修改DOM等）。在某些场景下，watch​ 比 computed​ 更适合处理复杂的副作用。

3.1 watch的基本用法

watch​ 允许我们在数据变化时执行某些操作，例如在用户输入时进行验证或发送请求。

使用步骤：

  1. 导入 watch​ 函数：从 vue​ 中导入 watch​ 函数。

  2. 定义响应式数据：使用 ref​ 或 reactive​ 定义你想要监听的响应式数据。

  3. 调用 watch​ 函数：传入要监听的响应式数据或计算属性，以及一个回调函数。当数据变化时，回调函数会被触发。

<template>
    <div>
        <input v-model="message" placeholder="输入一些内容">
        <p>输入内容：{{ message }}</p>
    </div>
</template>

<script setup>
// 1. 导入 watch 函数
import { ref, watch } from 'vue';

// 2. 定义响应式数据
const message = ref('');

// 3. 监听 message 的变化，传入回调函数
watch(message, (newValue, oldValue) => {
    console.log(`message changed from ${oldValue} to ${newValue}`);
});
</script>

代码分析：

模板部分的input​使用 v-model​ 实现双向绑定 message​，实时更新输入框的值。

当输入框的内容改变时，message​相应的也会改变，此时watch​函数监听到message​变化后也会相应的执行回调函数来输出log信息。

‍

image​
vue3 中说 watch 只能监视4种数据：

  • ref定义的数据
  • reactive 定义的数据
  • 函数返回一个值（getter函数）
  • 一个包含上述内容的数组

3.2 immediate和deep选项

watch​ 函数接受一个可选的第三个参数，可以用来配置监听的行为：

  • ​immediate​​：是否立即执行回调，默认是 false​。如果为 true​，则在监听开始后立即执行一次回调。
  • ​deep​​：是否深度监听对象内部的变化，默认是 false​。如果为 true​，则会深度监听对象及其嵌套属性的变化。
<script setup>
import { ref, watch } from 'vue';

const nestedObject = ref({ nested: { value: 1 } });

// 深度监听对象
watch(nestedObject, (newVal, oldVal) => {
    console.log('嵌套对象已更改：', newVal);
}, { deep: true });

</script>

四、综合小Demo

下面是一个结合了 setup、computed 和 watch 的小Demo，在我们之前写的计数器的基础上实现以下功能：

  • 计数状态显示：根据当前计数值显示 “计数大于10” 或 “计数不大于10”。
  • 超限提示：当计数值超过 10 时，弹出提示框提醒用户 “计数已超过10！”。
<template>
    <div>
        <h1>{{ title }}</h1>
        <p>当前计数：{{ count }}</p>
        <p>计数状态：{{ countStatus }}</p>
        <button @click="increment">增加</button>
        <button @click="reset">重置</button>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';


const title = ref('计数器');
const count = ref(0);

// 使用 computed 创建一个计算属性
const countStatus = computed(() => {
    return count.value > 10 ? '计数大于10' : '计数不大于10';
});

// 监听 count 的变化
watch(count, (newVal) => {
    if (newVal > 10) {
        alert('计数已超过10！');
    }
});

function increment() {
    count.value++;
}

function reset() {
    count.value = 0;
}

</script>

<style scoped>
button {
    margin: 5px;
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}


p {
    font-size: 18px;
}
</style>

代码分析：

  • ​ref​​ 和 ​setup​​：在 setup​ 函数中使用 ref​ 创建了 title​ 和 count​ 两个响应式变量。
  • ​computed​​：通过 computed​ 创建了 countStatus​ 计算属性，用于动态显示计数的状态。
  • ​watch​​：使用 watch​ 监听 count​ 变量，当其值大于10时，弹出提示框。

image​

五、总结

setup​ 语法糖、computed​ 函数和 watch​ 函数是 Vue 3 组合式 API 的核心特性，提供了更灵活和高效的方式来组织组件逻辑。本文我们详细讲解了setup​ 语法糖、computed​ 函数和 watch​ 函数的基本使用语法和注意事项，通过合理使用这些特性，可以大大提升代码的可读性和可维护性。希望本文的内容对大家有所帮助☺️。

‍

‍

参考文章：

Vue官网

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18100.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！