vue中计算属性之set和get

最新推荐文章于 2024-05-18 16:55:08 发布
最新推荐文章于 2024-05-18 16:55:08 发布
阅读量3.3k 收藏 12
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tdmbs/article/details/105429581
版权

computed计算属性中包含了set和get两个方法（回调函数）

get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值

set回调函数:监视当前属性值发生改变时调用,更新相关的属性值

在这里插入图片描述在这里插入图片描述计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，否则就是多次调用，但只会计算第一次，其他次调用的计算结果采用缓存的结果。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

土豆面包　
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js 计算属性的基本使用，复杂使用 ，set 和 get，计算属性与methods的对比 和 计算属性与侦听器
qq_52499703的博客
07-27 2085
Vue.js 计算属性的基本使用，复杂使用 ，set 和 get，计算属性与methods的对比 和 计算属性与侦听器
Vue之 get和set
smalCat的博客
04-15 7102
在之前的面试中遇到面试官让我讲解一下vue的get和set的原理，当时我有点蒙逼，个人熟练运用vue但并未去探究其原理，所以GG 现在讲解一下： get和set是es5也就是es2015中的对象访问器，它在对象属性或方法获取值（get）时被触发，同时设置值得时候也会触发（set） 这是es5的特性 vue中的运用： vue在组件本身是一个对象，当将此对象传入vue的实例的时候，vu...
Vue.set、计算属性（computed）和侦听器（watch）
最新发布
qq_35915504的博客
05-18 1012
在你的例子中，如果需要在响应式对象中添加一个新的属性并确保这个属性是响应式的（比如在接收到服务器响应后更新对象的 ID），使用 Vue.set 是最合适的。Vue.set：Vue.set 主要用于在已有的响应式对象上添加新的属性，并确保这个新属性同样是响应式的，即它可以被 Vue 的系统追踪并在变化时触发界面更新。在您的例子中，当从服务器接收到新的 id 值并需要更新对象的 id 属性时，我们使用 Vue.set 是因为我们在一个现有的响应式对象上添加一个新属性，并希望这个新属性也是响应式的。
vue2数据响应式原理(7) 收集依赖，用get和set叙述出最基础的至高vue哲学
weixin_45966674的博客
04-26 940
然后 相对 我们的depend 也比较需要理解 这一块 先判断 拿不拿到当前的目标 Dep.target 这就是收集依赖的方法 谁触发了 get谁就是依赖 我们就需要通过Dep.target拿到当前这个目标节点 然后 通过addSub将这个依赖加到订阅数组里。这里 大家可以仔细看一下Watcher中的parsePath函数 做的正式 一层一层去把他找到的一个事情 然后 第三个参数 当数据改变触发依赖时 要做的事情。去修改监听的值来触发依赖。
vue的get 和set
王依米
05-15 1万+
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    &l
vue中属性get和set概念总结
xiaoxiao1777的博客
05-06 3480
get： 根据其它相关属性动态计算当前属性值 set：监视当前属性的变化，更新其它相关属性值 按照正常的思路不是：this.data.name吗，为什么可以直接通过this调用data中的属性：this.name呢？ 底层分析： 底层会自动把data中的属性名称给与组件对象，并且添加set和get方法，从而操作这个属性值的变化，所以可以直接使用this.name调用，这里的set方法不仅起...
vue计算属性get和set用法示例
10-17
主要介绍了vue计算属性get和set用法,结合实例形式分析了计算属性的功能及get和set用法的具体使用技巧,需要的朋友可以参考下
详解Vue之计算属性
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了丰富的功能来构建用户界面。在Vue应用中，计算属性（Computed Properties）是一个非常重要的...计算属性的灵活性和自动化管理依赖使其成为Vue应用中不可或缺的一部分。
vue中的计算属性的使用和vue实例的方法示例
11-29
本文介绍了vue计算属性的使用和vue实例的方法示例，分享给大家，具体如下： 计算属性 在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且...
vue.js——computed中get方法、set方法
薛增辉的博客
03-13 5733
众所周知，vue中computed为计算属性，计算属性是一种带有行为的属性，本质上是方法，但是不能调用。 而需要重新渲染时使用methods中的方法会重复调用执行函数，若函数复杂，浏览器性能会降低。使用computed则会缓存计算结果，避免重复计算，从而提高效率。 computed中的get方法可简单理解为取值时调用此方法，而set则为重新赋值时调用。 当不设置get和set方法时可简写，如...
vue双向数据绑定 set 和get
m0_68456754的博客
05-18 774
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
Vue之计算属性（computed）
浩泽学编程的博客
06-30 2万+
计算属性以上就是计算属性的大致讲解。
Vue - 计算属性
热门推荐
小海的博客
11-01 5万+
1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果 场景: 一个变量的值, 需要用另外变量计算而得来 语法: computed: { "计算属性名" () { return "值" } } 注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同 注意2: 函数内变量变化, 会自动重新计算结果返回 例子: 需求: 需求1: 求2个数的和显示到页面上 需求2: 字符串翻转 <template> &l
计算属性的get和set——6
百味皆苦的博客
02-14 682
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计算属性的setter和getter&lt;/title&gt; &lt;script src="vue.js"&gt;&lt;/script&gt
计算属性的 set get 如何使用
sunlizhen的专栏
10-23 1766
每一个计算属性都包含一个getter 和一个setter ； 绝大多数情况下，我们只会用默认的getter 方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter 都声明。 但在你需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数  ...
对于vue计算属性的理解 set 和get的触发和作用
qq_58984486的博客
07-23 1394
计算属性的理解 <template> <div id="app"> <span>{{newnum}}</span> <!-- 点击事件控制num+1，计算属性newnum 会跟着变，触发该计算属性的get方法--> <button @click="num++">+1</button> <!-- input框绑定newnum 输入新的值，newnum 的值发生变化触发该计算属性的set方法--> <inp
vue.js get和set方法使用
蕃薯耀的博客
12-05 6823
lt;meta charset="UTF-8"&gt; &lt;title&gt;vue.js get和set方法使用&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="vue-div"&gt; &lt;div&gt;姓：&lt;input placeholder="姓&
计算属性computed中的set和get使用例子（VUE+ElementUI）
前端开发
08-17 3203
通过例子演示vue计算属性的set和get的使用方法。
vue（计算属性set和get）
lbs311709000127的博客
11-20 506
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .active{ color:red; } .line{ color:...
vue中的计算属性set与get
07-15
在Vue中，计算属性是一种可以根据其他属性的值计算出新值的属性。计算属性有两个主要的方法：get和set。 get方法用于获取计算属性的值。当其他依赖的属性发生改变时，该方法会重新计算计算属性的值，并返回新的值。例如： ```javascript computed: { fullName() { return this.firstName + ' ' + this.lastName; } } ``` 在上面的例子中，fullName是一个计算属性，它依赖于firstName和lastName这两个属性。当firstName或lastName发生改变时，get方法会重新计算fullName的值。 set方法用于修改计算属性的值。当我们对计算属性进行赋值时，set方法会被调用。例如： ```javascript computed: { fullName: { get() { return this.firstName + ' ' + this.lastName; }, set(value) { const [firstName, lastName] = value.split(' '); this.firstName = firstName; this.lastName = lastName; } } } ``` 在上面的例子中，我们定义了一个fullName计算属性，并且同时定义了get和set方法。当我们对fullName进行赋值时，set方法会被调用，然后根据赋值的新值来更新firstName和lastName属性。 需要注意的是，计算属性默认情况下只有get方法，如果我们只需要获取计算属性的值而不需要修改它，可以省略set方法的定义。另外，计算属性不能与data中已有的属性重名，否则会导致命名冲突。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值