初识Vue——计算属性和观察者
一、计算属性
在模板内使用
1、基础例子
<template><div class="main">
<div >
<p>原始字符串:{{ msg }}</p>
<p>倒置字符串:{{ reversedmsg }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
msg: '梦里梦到醒不来的梦',
}
},
computed: {
//计算属性的getterreversedmsg: function () {
return this.msg.split('').reverse().join('')
}
}
}
</script>
<style>
#reverse_str{
color: powderblue;
}
</style>
解释说明:这里我们声明了一个计算属性reversemsg,我们提供的函数将用作属性的getter函数
2、计算属性缓存vs方法
以上还可以通过在表达式中调用方法来达到同样的效果:
<template><div class="main">
<div >
<p>原始字符串:{{ msg1 }}</p>
<p>倒置字符串:{{ reversedmsg1() }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
msg1: '浮现你被软禁的红'
}
},
methods: {
reversedmsg1 () {
return this.msg.split('').reverse().join('')
}
}
}
</script>
<style>
#method{
color: darksalmon;
}
</style>
这两种方式的结果是一模一样的;不同的是,计算属性是基于他们的依赖进行缓存的;计算属性只有在他的相关依赖发生改变时,才会重新求值;这就意味着只要msg没有发生改变,多次访问reversemsg计算属性会立即返回之前计算的结果,而不必再次执行函数;
这也意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖,
computed: {// 计算属性的getter
now_time: function () {
return Date.now()
}
},
3、计算属性VS侦听属性
侦听属性:观察和相应Vue实例上的数据变动;watch回调
<template><div class="main">
<div >
<div class="watch_it">
<input v-model="first" />
<input v-model="last" />
<p>{{ fullname }}</p>
</div>
</div></div>
</template>
<script>
export default {
name: 'test',
data () {
return {
sangname: '我如果爱你——',
author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',
}
},
watch: {
first: function (val) {
this.fullname = val + ' ' + this.last
},
last: function (val) {
this.fullname = this.first + ' ' + val
}
}
}
</script>
<style>
.watch_it input{
list-style: none;border: 1px seagreen solid;width: 200px;height:30px;color: gray;padding:0 10px;outline: none;
}
</style>
上面的代码是命令式的,且重复代码较多,下面来写一下计算属性的版本:
<template><div class="main">
<div >
<p>{{ sang }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
sangname: '我如果爱你——',
author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',
},
computed: {
// 计算属性的getter
sang: function () {
return this.sangname + ' ' + this.author
}
}
}
</script>
<style>
#sang{
color: cadetblue;
}
</style>
4、计算属性的setter
计算属性只有默认的getter,不过在必要的时候你可以自定义一个setter
<template><div class="main">
<div >
<p>{{ sang }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
sangname: '我如果爱你——',
author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',
}
},
computed: {
sang: {
//getter
get: function () {
return this.sangname + ' ' + this.author
},
set: function (newval) {
var sentence = newval.split(' ')
this.sangname = sentence[0]
this.author = sentence[sentence.length - 1]
}
}
}
}
</script>
<style>
#sang{
color: cadetblue;
}
</style>
二、侦听器
虽然计算机属性可以适用于大多数情况,但有时也需要一个自定义的侦听器;
暂无
以上是 初识Vue——计算属性和观察者 的全部内容, 来源链接: utcz.com/z/377899.html