Vue计算属性computed的全面解析
前言
一直以来对computed这个计算属性都只停在一个大概的认知中,最近特意仔细研读相关资料,亲测后逐渐了解了其特性。
正文
computed
1.watch擅长处理的场景:一个数据影响多个数据
2.computed擅长处理的场景:一个数据受多个数据影响
特点:
1.初始化/依赖属性(即data的return返回对象的属性)改变时执行(前提是在页面调用计算属性)
2.在计算属性函数执行后会缓存返回值
3.计算属性返回值就是计算属性的值
4.当依赖属性未改变时调用计算属性则直接返回缓存的值
用处:需要依赖别的属性来动态获得值的时候或大量重复计算时可以使用 computed
例:
data() {
return {
msg:''
}
},
computed: {
test: function(){//test为计算属性,调用时和调用属性一样调用test即可
console.log('执行了!')
return 'http://' + this.msg//msg是依赖属性,改变时会执行test函数
}
}
需要特别注意的是依赖属性为数组时,会自动把数组转化为字符串;为对象时,会变为[object Object]
上面的写法中,计算属性不能被修改,如果修改了,就会报下面的错误:
上面错误的原因是computed默认只有getter,所以当你需要修改你所设置的计算属性时必须为它提供一个setter,如下例:
初始化/当计算属性test依赖的响应式属性msg变化时,会执行get(),当计算属性test变化时会执行set(),且set中的参数就是计算属性test的最新值
下例中set()中的赋值是在计算属性test改变时赋值给依赖属性msg,这样两值改变另一方都会改变
data() {
return {
msg:'12345'
}
},
computed: {
test: {
get:function () {
console.log('当依赖的响应式属性(msg)被修改时执行!')
return this.msg.split('').reverse().join(''); //这里的返回值就是计算属性的最新值,可在此处修改计算属性的值
},
set:function (val) {//val就是计算属性的最新属性值
console.log('当计算属性test被修改时执行!')
this.msg = val;
return val;
}
}
}
Vue计算属性computed的全面解析的更多相关文章
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
- vue计算属性computed和methods的区别
computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...
- 在做vue计算属性,v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
随机推荐
- 微信小程序初体验遇到的坑
今天,2017年1月9日凌晨,微信小程序如约上线.2007年1月9日,整整10年前的今天,苹果的iPhone手机正式问世! 经不起新技术的诱惑了,想试着开发一下看看.刚开始遇到很多坑,在这里记录一下, ...
- python 逐行读取txt文件
逐行读取txt文件 path = r'D:\123456\1.txt'with open(path, 'r', encoding='utf-8') as f: for line in f: ...
- [日常] gocron源码阅读-go语言的变量
变量的声明形式是这样的 var 变量名字 类型 = 表达式var ( AppVersion = "1.5" BuildDate, GitCommit string)类型可以被省略, ...
- MATLAB高斯混合数据的生成
MATLAB高斯混合数据的生成 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 高斯混合模型的基本原理:聚类——GMM,MATLAB中GMM聚类算法:M ...
- ARM 寻址方式
寻址方式有 9种 1.寄存器 2.立即数 3.寄存器位移 4.寄存器间接 5.基址 6.多寄存器 7.堆栈 8.块拷贝 9.相对 1. MOV R1,R2 R1 = R2 2. MOV R0,#0x1 ...
- luoguP2486 [SDOI2011]染色
题目 Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段) ...
- c# 第25节 方法重载
本节内容: 1:方法重载简介 2:方法重载的实现实例 1:方法重载简介 2:方法重载的实现实例 决定方法是否构成重载有三个条件: 1:在同一个类中 2:方法名相同 3:参数列表不同 实例例子: 实现:
- BASIC合集
握手包 给你握手包,flag是Flag_is_here这个AP的密码,自己看着办吧. 提交格式:flag{WIFI密码} 破解wifi密码 丢到kali,用aircrack-ng kali有一个包含常 ...
- CF1146D Frog Jumping
CF1146D Frog Jumping 洛谷评测传送门 题目描述 A frog is initially at position 00 on the number line. The frog ha ...
- 【2019.7.24 NOIP模拟赛 T1】道路建设(road)(水题)
原题与此题 原题是一道神仙不可做题,两者区别在于,原题不能有重边和自环. 然而,这题可以有重边... 于是这题就变成了一道大水题. 此题的解法 考虑如何构造. 对于\(n\le10^4\)的情况: 对 ...