vue computed 计算属性

一、计算属性(computed)

1、说明

当一些数据需要根据其它数据变化时,需要进行处理才能去展示,虽然vue提供了绑定数据表达式绑定的方式,但是设计它的初衷只是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,对于一些比较复杂和特殊的计算有可能就捉襟见肘了,而且计算的属性写在模板里也不利于项目维护

computed主要的作用:

  • 分离逻辑(模板和数据分离)
  • 缓存值
  • 双向绑定(getter,setter)

2、语法格式 

computed:{ [key: string]: Function | { get: Function, set: Function } }

  • key

    字符串类型

  • 可以是一个方法,如果是方法默认是get操作,也可以是对象 ,设置get属性或者set属性

3、基础用法 

  1. 说明

    在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回一个结果,计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新,适用于比较费时的数据计算

  2. 示例代码

    <div id="app"><!--使用表达式的方式--><p v-text="originalPrice - discountPrice"></p><!--使用计算属性的方式--><p v-text="currentPrice"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>let app = new Vue({el: '#app',data: {id:1,originalPrice:1200,discountPrice:200,},//计算属性computed: {// 把日期换成 常见规格格式的字符串。currentPrice: function () {return "当前价格:" + (this.originalPrice - this.discountPrice);}}});
    

4、setter与getter 

  1. 说明

    每一个计算属性都包含一个getter 和一个setter,上面的示例都是计算属性的默认用法, 只是利用了getter来读取。如果需要,也可以提供一个setter 函数, 当修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数。

  2. 示例代码

    <div id="app1"><p v-text="currentPrice"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>let app = new Vue({el: '#app',data: {id: 1,originalPrice: 1200,discountPrice: 200,},//计算属性computed: {cache:false,// 把日期换成 常见规格格式的字符串。currentPrice: {get: function () {return "当前价格:" + (this.originalPrice - this.discountPrice);},// 注意必须要传递参数,否则没有意义set: function (value) { //执行自定义的一下操作this.discountPrice = value}}}});
    </script>
    <!-- 
    在 console 中 输入 app.currentPrice=300 
    1> 先执行get方法改变discountPrice的值
    2> 因为数据发生改变了 所以会重新计算当前的价格, 执行get方法
    -->
    
  3. 注意

    绝大多数情况下,我们只会用默认的getter方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法。

5、缓存

  1. 说明

    计算属性基于它们的依赖进行缓存的,只有相关依赖发生改变的时候才会重新求值,一般为响应式依赖。

  2. 什么是响应式依赖,Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应

  3. 示例代码
     

    <!-- 响应式依赖 -->
    <script>var vm = new Vue({data: {// 声明 message 为一个空值字符串message: ''},})// 响应式vm.message = 'Hello!'vm.v="非响应式的的值"
    </script>
    
    <div id="app"><button @click="getMethodsDate">methods</button><button @click="getComputedDate">computed带缓存</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">new Vue({el: '#app',methods: {getMethodsDate: function () {console.log(new Date().toLocaleTimeString())},// 返回computed选项中设置的计算属性——computedDategetComputedDate: function () {console.log("缓存--->" + this.computedDate)}},computed: {computedDate: function () {return new Date().toLocaleTimeString()}}})
    </script>

6、与methods的区别

  1. computed`只有符合:存在依赖型数据,依赖型数据发生改变这两个条件,computed才会重新计算。

    methods下的数据,是每次都会进行计算的

  2. 调用方式不一样,computed定义的成员像属性一样访问,

    methods定义的成员必须以函数形式调用。

  3. computed是带缓存的,只有其引用的响应式属性发生改变时才会重新计算,

    methods里的函数在每次调用时都要执行

 二、侦听器(watch)

1、说明

官方:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态

watch和我们前面介绍的methods相同的语法,但是有一个关键的区别。虽然嵌套属性的值确实是函数,但键的名称必须对应数据属性中的名称

2、语法格式

watch:{
[key: string]: string | Function | Object }]
  1. key

    必须是Vue对象data中定义的属性

    • 值可以是一个字符串,这个字符串是方法名
    • 值可以是一个函数
    • 值也可以是一个对象,其中包含回调函数可以其他选项:比如是否深度遍历。

3、基础使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let vm = new Vue({data: {test: "111",user: {name: "码帝",address: {city: "大武汉"}}},methods: {fun: function (val) {alert(val)}},watch: {// 方法名方式 对应 methods中的函数名// test: 'fun',// 函数方式test: function (v1, v2) {alert("新值" + v1 + "====旧值:" + v2)},/***什么是深度 例如  data: {test: "111", user: {name: "码帝" ,address{city:'大武汉'}}* user属性对应值就是深层,一次内推* 如果我们监听的user属性 当user.name属性发生改变的时候 watch监听是不到,所有我们这里需要使用深层监听*///user: {handler: function (val) {alert(val.name)},// 是否深度监听 默认是false// 如果不设置为true当我们手动设置vm.user.name = "撸帝"的时候,是监听不到的deep: true},/*** 或者也可以使用下面的方式来监听* 注意键值必须是一个字符串,所以用引号括起来**/"user.address.city": function (val) {alert(val)}}});vm.test = '333';vm.user.name = "撸帝";vm.user.address.city = '长沙'
<div id="app"><input type="text" v-model="search"/><ul><li v-for="result in results" v-text="result"></li></ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>let vm = new Vue({el: "#app",data: {user:{name:"码帝",}search: "",results: [],},methods: {fun: function () {alert("111");}}watch: {// 使用函数search: function (v1, v2) {console.log('新值: %s, 旧值: %s', v1, v2)this.results.push(v1)}}})
</script>

 

4、与computed的区别

  1. 触发条件不同
    • computed计算属性会依赖于使用它的data属性,只要是依赖的data属性值有变动,则自定义重新调用计算属性执行一次。
    • watch则是在监控的data属性值发生变动时,其会自动调用watch回调函数。
  2. 应用场景不同
    1. 执行异步操作,开销较大的操作,避免堵塞主线程,使用watch。
    2. 简单且串行返回的,使用computed

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/22345.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【会议征稿,ACM独立出版】第三届机器人、人工智能与信息工程国际学术会议(RAIIE 2024,7月05-07)

2024年第二届机器人、人工智能与信息工程国际学术会议&#xff08;RAIIE 2024&#xff09;将于2024年7月5-7日在新加坡举行。本次会议主要围绕“机器人”、“智能仿生”和“信息科学”的最新研究进展展开&#xff0c;会议汇聚了该领域内国际学者、专家、研究人员及相关从业人员…

274 基于matlab的随机粗糙表面对微气体轴承内气体压强分布的影响

基于matlab的随机粗糙表面对微气体轴承内气体压强分布的影响。采用差分法求解气体轴承的雷诺方程&#xff0c;通过尺寸参数、分形维数对粗糙度表面设置&#xff0c;滑流参数设置&#xff0c;实现气压分布可视化结果显示。程序已调通&#xff0c;可直接运行。 274 气体轴承 随机…

hnust 湖南科技大学 2022 软件测试报告+代码

hnust 湖南科技大学 2022 软件测试报告代码 内容 BMI junit单元测试决策表划分方法测试三角形判断问题文档修改问题之因果图实验逻辑覆盖测试技术实验&#xff08;白盒测试&#xff09;selenium 功能自动化测试Jmeter 性能自动化测试 下载地址 https://pan.baidu.com/s/19e…

基于websocket与node搭建简易聊天室

一、前言 上一篇文章介绍了websocket的详细用法与工具类的封装&#xff0c;本篇就基于websocket搭建一个简易实时的聊天室。 在本篇开始之前也可以去回顾一下websocket详细用法&#xff1a;WebSocket详解与封装工具类 二、基于node搭建后台websocket服务 首先确认本机电脑中…

c# 操作Microsoft Access数据库

数据库结构为&#xff1a; public static string connting "数据库路径&#xff1a;如&#xff1a;D:\\xxx.mdb";//插入public bool InsertToFile(string casenumber, int lastrowid, int pagecount){bool result true;try{string connString $"ProviderMicr…

在nodeJS 中实现langchain 的Agent (实验笔记)

在nodeJS 中实现langchain 的Agent 实验过程记录如下&#xff1a; 1 构建一个Agent &#xff0c;使用两个工具 Calculator和TavilySearchResults 2 Tavily Search的API key 的获取 之前一直找不到一个合适的搜索引擎&#xff0c;Google Search 被墙&#xff0c;bing Search …

【Linux】进程(5):命令行参数

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解Linux进程&#xff08;5&#xff09;&#xff1a;命令行参数&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 &#xff08;A&#xff09;为什么要有命令…

iOS中的@objc和@objcMembers实现Swift和OC的交互

目录 ​​​​​​​前言 一、使用OC和Swift混编的场景 二、objcMembers 1.objcMembers 的用法和示例 1.基本用法 2.与objc 的区别 3.使用场景 1. 与Objective-C代码互操作 2.需要使用Objective-C运行时特性 3.避免重复的objc修饰符 4.注意事项 前言 这篇博客主要讨…

Paraformer解读(1)基于self-attention和dfsmn的encoder

DFSMN SAN-M python实现 import torch import torch.nn as nn import torch.nn.functional as Fclass PositionalEncoding(nn.Module):def __init__(self, d_model, dropout0.1, max_len5000):super(PositionalEncoding, self).__init__()self.dropout nn.Dropout(pdropout)p…

C语言中整形提升举例说明

一. 简介 前面一篇文章简单学习了 C语言中的整形提升。文章如下&#xff1a; C语言中的整型提升-CSDN博客 本文再举例说明 C语言随处可见的整型提升的代码示例。 二. C语言中整形提升举例说明 1. 什么是整形提升&#xff1f; C语言的表达式中的 字符型&#xff08;即 c…

sklearn.pipeline的用法介绍

sklearn.pipeline可以将多个数据预处理步骤和机器学习模型组合,成一个整体,从而简化了机器学习的流程。 sklearn.pipeline类可以将多个算法模型串联起来&#xff0c;比如将特征提取、归一化、分类组织在一起形成一个典型的机器学习问题工作流&#xff0c;主要带来两点好处: 1.…

你管这破玩意儿叫负载均衡?

你管这破玩意儿叫负载均衡? 那么四层负载均衡器是如何工作的呢总结 相信大家都听过这样的一道经典面试题&#xff1a;「请说出在淘宝网输入一个关键词到最终展示网页的整个流程&#xff0c;越详细越好」 这个问题很难&#xff0c;涉及到 HTTP&#xff0c;TCP&#xff0c;网关…

MATLAB基础应用精讲-【数模应用】SPSSPRO数据处理

目录 SPSS SPSSRO 数据标签 1、作用 2、输入输出描述 3、案例示例 4、案例数据

Ubuntu 中 Pycharm 的一个奇怪bug:命令行换行处会丢失字符

如果命令行一行显示不完原本连续的一行&#xff0c;那么在末尾处的若干个字符可能会丢失。 可能的解决方案&#xff1a; 1. 检查 PyCharm 终端设置 PyCharm 的终端可能需要配置&#xff0c;以确保换行时不会丢失字符。 打开 PyCharm。进入 File > Settings&#xff08;W…

Python第二语言(二、Python语言基础)

目录 1. python中常用的6中数据类型 2. Print语句&#xff08;输出程序&#xff09; 3. 字面量 4. 注释 5. 变量 6. 数据类型 7. type()语句&#xff1a;查询数据类型 8. 数据类型转换语句 9. 标识符 10. 算术运算符 11. 赋值运算符 && 复合赋值运算符 12. …

3. redis常见部署架构

redis常见部署架构 一、redis常见部署架构1、常见部署架构2、多实例部署2.1 规划安装目录、配置文件2.2.2 编辑实例配置文件2.2.3 启动实例2.2.4 测试数据读写 3、redis主从复制3.1 规划3.2 从服务器配置3.3 验证主从状态3.4 主从角色切换 4、分片集群4.1 原理4.2 分片集群的部…

如何反编译jar并修改后还原为jar

如何反编译jar并修改后还原为jar 目标:修改jar包中某个类的某个方法后还原为新的jar 1.新建android工程,把旧的jar添加为lib 2.用jadx-gui打开旧的jar并保存所有资源 3.找到保存的资源中想修改的.java类 4.复制类中的内容, 在android工程中新建一个同样路径的包,并在包下创建…

CSAPP Lab02——Bomb Lab完成思路详解

看见的看不见的 瞬间的永恒的 青草长啊大雪飘扬 ——月亮之上 完整代码见&#xff1a;CSAPP/bomb at main SnowLegend-star/CSAPP (github.com) 01 字符串比较 简单的把输入的字符串和地址“0x402400”内早已存储的字符串相比较。如果两个字符串相等则函数返回&#xff0c;否…

【Git】如何不管本地文件,强制git pull

要在 Git 中强制执行 git pull 操作&#xff0c;忽略本地文件的更改&#xff0c;可以按照以下步骤操作&#xff1a; 保存当前工作状态&#xff1a;如果你有未提交的更改&#xff0c;可以使用 git stash 将这些更改存储起来。 git stash强制拉取最新代码&#xff1a;使用 git re…

力扣2156.查找给定哈希值的子串

力扣2156.查找给定哈希值的子串 rolling hash&#xff1a;求带权的值 左边是高位 右边是低位 本题要求左边低位 只要反向求即可 class Solution {public:string subStrHash(string s, int power, int modulo, int k, int hashValue) {int n s.size();long long M modulo,p…