computed的作用
computed用data中现有的属性计算出一个新的属性,叫做计算属性,计算属性和data中属性在{{}}写法和属性一样,例如计算属性name写为
computed的定义位置
computed的定义位置和methods还有data为同级写法为computed: {}
export default {
data() {
return {
}
},
computed: {},
methods: {},
}
计算属性的属性名
计算属性的属性名需要写在computed中
计算属性的属性名里面有getter和setter函数
get的作用 现有的属性计算出新的计算属性来使用
get在初次使用计算属性的时候触发1次,后续直接读取计算属性的缓存,例如下列完整代码中name属性即使在模板上写入多个也只会触发一次get
但计算属性依赖的数据发生变化时get也会触发,例如下面完整代码中的计算属性name,如果platform或position属性的值被修改get就会触发
名称:{{name}}
名称:{{name}}
名称:{{name}}
set的作用计算属性的时候必须写set函数去相应修改,且set中要引起计算时依赖的数据发生改变
set在计算属性被修改的时候触发
//完整代码
服务器托管网
平台:
职位:
名称:{{name}}
export default {
name: 'HelloWorld',
data() {
return {
platform: '微信',
position: '客服',
}
},
computed: {
name: {
get() {
return this.platform + this.position;
},
set(val) {
console.log(val);
}
}
}
}
get属性使用较多,set属性使用场景比较少服务器托管网
如果确定不会修改计算属性的值可以简化掉set,简写计算属性的函数
计算属性简写:get函数简写为:function() {}
computed: {
name: function {
return this.platform + this.position;
}
}
计算属性再简写:get函数简写为计算属性名的函数
computed: {
name {
return this.platform + this.position;
}
}
最后简写完后的代码
平台:
职位:
名称:{{name}}
export default {
name: 'HelloWorld',
data() {
return {
platform: '微信',
position: '客服',
}
},
computed: {
name() {
return this.platform + this.position;
}
}
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: React – 25 redux中间件及处理机制
坑位服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net 机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net相关推荐: Spark性能调优基础一、开发调优 复用RDD并进行持久化 对于同一份数据的读取…