Vue入门到关门之计算属性与监听属性

2024-04-28 00:36

本文主要是介绍Vue入门到关门之计算属性与监听属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、计算属性

1、什么是计算属性

计算属性是基于其它属性计算得出的属性,就像Python中的property,可以把方法/函数伪装成属性,在模板中可以像普通属性一样使用,但它们是基于响应式依赖进行缓存的。这意味着只有在依赖的响应式数据发生改变时,计算属性才会重新计算,否则会直接返回缓存的结果。

2、计算属性的特点

计算属性的主要作用是对数据进行处理和转换,以便在模板中进行展示或其他逻辑操作。相⽐于在模板中直接使用方法来处理数据,计算属性具有以下优势:

  • 缓存结果: 计算属性的值会被缓存起来,只有在依赖的数据发生变化时才会重新计算。这样可以避免不必要的重复计算,提高性能。
  • 响应式更新: 计算属性会自动追踪依赖的数据,当依赖的数据发生变化时,计算属性会自动重新计算,保持数据的实时性。
  • 依赖性:计算属性会自动追踪依赖关系,确保在依赖数据变化时重新计算。
  • 简化模板逻辑: 通过使用计算属性,可以将复杂的逻辑处理和转换操作放在计算属性中,简化模板中的代码,使模板更加清晰和易读。

3、计算属性的使用

(1)计算属性的定义方式

  • 基础定义方式
computed: {// 计算属性的名称propertyName: function() {// 计算属性的逻辑处理// 返回计算结果return result;}
}

(2)首字母变大写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./JS/vue.js"></script><script src="./JS/axios.js"></script></head>
<body>
<div id="app"><h1>首字母变大写</h1>
<!--    <input type="text" v-model="name">-&ndash;&gt; {{name.substring(0, 1).toUpperCase() + name.substring(1)}}-->
<!--    <br>-->
<!--    <input type="text" v-model="name">-&ndash;&gt; {{getName()}}-->
<!--    <br>-->
<!--&lt;!&ndash;    当我执行下面的input框的时候,getName方法也在执行,这就不对了,所以这时候需要计算属性&ndash;&gt;-->
<!--只要页面发生变化,函数都会重新运算,但是计算属性中的属性只针对所依赖的东西发生变化,与其他东西无关--><!--    <input type="text" v-model="name1">-&ndash;&gt; {{name1}}--><br><input type="text" v-model="name">---> {{newName}}
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {name: '',name1: ''},methods: {getName() {console.log('我执行了')return name.substring(0, 1).toUpperCase() + name.substring(1)}},computed: {newName() {return name.substring(0, 1).toUpperCase() + name.substring(1)}}})
</script>
</html>
  • 第一步,加载页面,普通函数和计算属性触发

在这里插入图片描述

  • 第二步,普通函数输入abc,触发三次,其他两个没有被触发

在这里插入图片描述

  • 第三步,普通输入框输入abc,普通函数触发了,计算属性并没有被触发

在这里插入图片描述

  • 第四步,计算属性输入abc,普通函数和计算属性都触发了

在这里插入图片描述

总结:当我执行普通的并没有调用函数的input框的时候,getName方法也执行了,这就不对了,所以这时候就需要使用计算属性。我们要知道只要页面发生变化,函数都会重新运算,但是计算属性中的属性只针对所依赖的东西发生变化,其他没有调用计算属性的不会对其造成影响。

(3)重写过滤案例

  • 通过计算属性重写过滤属性会使我们将代码写的更简单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./JS/vue.js"></script>
</head>
<body>
<div id="app"><h2>过滤案例</h2><input type="text" v-model="search" ><ul><li v-for="item in newDataList">{{item}}</li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {search: '',dataList: ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe'],},computed: {newDataList(){return this.dataList.filter(item => item.indexOf(this.search) >= 0)}}})
</script>
</html>

二、监听属性(侦听器)

1、什么是监听属性

监听属性是Vue中的⼀种特殊属性,用于监测数据的变化并触发相应的回调函数。通过监听属性,我们可以在数据发生改变时执行一些额外的逻辑操作。

2、监听属性的特点

监听属性的作用是在数据发生变化时,执行一些操作或触发其他的逻辑。它可以用于响应数据的变化并进行相应的处理,比如数据的验证、异步操作、触发其他组件的更新等。

  • 更灵活:与计算属性不同,监听属性更适用于执行异步操作或需要更多控制的情况。
  • 侦听任何数据变化:你可以监听任何数据的变化,而不仅限于计算属性所依赖的数据。

3、监听属性的使用

(1)监听属性的定义方式

在watch对象中,可以定义多个属性的监听器,每个属性对应一个回调函数。当被监听的属性发生变化时,Vue会自动调用对应的回调函数,并传递新值和旧值作为参数。

  • 监听对象定义方式
watch: {// 监听firstName属性变化firstName: function (newVal, oldVal) {// 在这里执行相关的操作},// 监听lastName属性变化lastName: function (newVal, oldVal) {// 在这里执行相关的操作}
}
  • 监听数组定义方式
watch: {['firstName', 'lastName']: function (newVal, oldVal) {// 在这里执行相关的操作}
}
  • 无论是对象语法还是数组语法,处理函数都接收两个参数:新值(newVal)和旧值(oldVal)。
  • 我们可以在处理函数中访问这两个值,并根据需要执行相应的操作。
  • 通过使用watch属性,我们可以轻松地监听Vue实例中数据的变化,从而执行一些特定的操作,例如发送请求、更新页面内容等。

(2)示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./JS/vue.js"></script><script src="./JS/axios.js"></script><style>.item{width: 150px;height: 50px;background-color: red;font-size: 25px;margin: 10px;display: flex;justify-content: center;align-content: center;}.top{display: flex;justify-content: center;}</style>
</head>
<body>
<div id="app"><h1>监听属性</h1><div class="top"><div class="item" @click="course_type='java'"><span>java</span></div><div class="item" @click="course_type='python'"><span>python</span></div><div class="item" @click="course_type='go'"><span>go</span></div></div><div>内容部分:{{content}}</div>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {content:'java',course_type:'java'},watch:{course_type(newValue,oldValue){console.log(newValue,oldValue)this.content = 'niubi'+this.course_type+'666'}}})
</script>
</html>

三、computed和watch的区别

在Vue.js中,计算属性(Computed Properties)和侦听器(Watchers)是用来处理数据响应式更新的两个重要工具,它们之间存在一些明显的区别:

  1. 计算属性

    • 基于Vue实例的数据状态计算得出的属性。
    • 会根据依赖的数据发生变化而变化,但只有在依赖数据发生改变时才会重新计算。
    • 具有缓存特性,只有在依赖发生变化时才会重新计算,否则会返回之前缓存的结果。
    • 适合处理简单的逻辑计算,避免模板过于臃肿。
    • 用于根据多个响应式数据计算出一个新的值。
  2. 侦听器

    • 允许在数据变化时执行异步或开销较大的操作。
    • 更通用,适合执行异步操作或执行较为复杂的操作。
    • 可以监听任何数据的变化,而不仅限于计算属性依赖的数据。
    • 用于监听某个数据的变化并做出相应的处理,或者在需要执行异步操作或开销较大的操作时使用。

但只有在依赖数据发生改变时才会重新计算。

  • 具有缓存特性,只有在依赖发生变化时才会重新计算,否则会返回之前缓存的结果。
  • 适合处理简单的逻辑计算,避免模板过于臃肿。
  • 用于根据多个响应式数据计算出一个新的值。
  1. 侦听器
    • 允许在数据变化时执行异步或开销较大的操作。
    • 更通用,适合执行异步操作或执行较为复杂的操作。
    • 可以监听任何数据的变化,而不仅限于计算属性依赖的数据。
    • 用于监听某个数据的变化并做出相应的处理,或者在需要执行异步操作或开销较大的操作时使用。

总的来说,计算属性适合处理简单的逻辑计算,具有缓存特性,适用于基于响应式数据生成的属性;而侦听器更适合处理更复杂的逻辑,可以监听任何数据的变化并执行相应的操作,适用于需要执行异步操作或开销较大的操作的场景。

这篇关于Vue入门到关门之计算属性与监听属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/941909

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo