前言

一直以来对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的全面解析的更多相关文章

  1. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  2. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  3. 在做vue计算属性,v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  4. Vue学习3:计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  6. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  7. Vue教程:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  8. 007——VUE中非常使用的计算属性computed实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

随机推荐

  1. 微信小程序初体验遇到的坑

    今天,2017年1月9日凌晨,微信小程序如约上线.2007年1月9日,整整10年前的今天,苹果的iPhone手机正式问世! 经不起新技术的诱惑了,想试着开发一下看看.刚开始遇到很多坑,在这里记录一下, ...

  2. python 逐行读取txt文件

    逐行读取txt文件 path = r'D:\123456\1.txt'with open(path, 'r', encoding='utf-8') as f:    for line in f:   ...

  3. [日常] gocron源码阅读-go语言的变量

    变量的声明形式是这样的 var 变量名字 类型 = 表达式var ( AppVersion = "1.5" BuildDate, GitCommit string)类型可以被省略, ...

  4. MATLAB高斯混合数据的生成

    MATLAB高斯混合数据的生成 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 高斯混合模型的基本原理:聚类——GMM,MATLAB中GMM聚类算法:M ...

  5. ARM 寻址方式

    寻址方式有 9种 1.寄存器 2.立即数 3.寄存器位移 4.寄存器间接 5.基址 6.多寄存器 7.堆栈 8.块拷贝 9.相对 1. MOV R1,R2 R1 = R2 2. MOV R0,#0x1 ...

  6. luoguP2486 [SDOI2011]染色

    题目 Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段) ...

  7. c# 第25节 方法重载

    本节内容: 1:方法重载简介 2:方法重载的实现实例 1:方法重载简介 2:方法重载的实现实例 决定方法是否构成重载有三个条件: 1:在同一个类中 2:方法名相同 3:参数列表不同 实例例子: 实现:

  8. BASIC合集

    握手包 给你握手包,flag是Flag_is_here这个AP的密码,自己看着办吧. 提交格式:flag{WIFI密码} 破解wifi密码 丢到kali,用aircrack-ng kali有一个包含常 ...

  9. CF1146D Frog Jumping

    CF1146D Frog Jumping 洛谷评测传送门 题目描述 A frog is initially at position 00 on the number line. The frog ha ...

  10. 【2019.7.24 NOIP模拟赛 T1】道路建设(road)(水题)

    原题与此题 原题是一道神仙不可做题,两者区别在于,原题不能有重边和自环. 然而,这题可以有重边... 于是这题就变成了一道大水题. 此题的解法 考虑如何构造. 对于\(n\le10^4\)的情况: 对 ...