Vue.js — 计算属性和侦听器

vue

1. 计算属性和侦听器

1.1 计算属性

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div >

<p>{{ message }}</p>

<p>{{ reversedMessage }}</p>

</div>

<script>

new Vue({

el: '#app',

data: {

message: 'hello'

},

computed: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

/*

// 相当于

reversedMessage: {

get(){

return this.message.split('').reverse().join('')

}

}

*/

}

});

</script>

</body>

</html>

解释:我们在属性computed中定义了计算属性reversedMessage,这里提供的函数将作为计算属性reversedMessage的getter函数。

1.2 setter

计算属性默认只有getter,不过我们可以提供一个setter。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div >

<p>{{ message }}</p>

<p>{{ reversedMessage }}</p>

<input type="text" v-model="reversedMessage" />

</div>

<script>

new Vue({

el: '#app',

data: {

message: 'hello'

},

computed: {

reversedMessage: {

get(){

return this.message.split('').reverse().join('')

},

set(value){

this.message = value.split('').reverse().join('')

}

}

}

});

</script>

</body>

</html>

1.3 缓存

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div >

<p>{{ message }}</p>

<p>{{ reversedMessage }}</p>

<p>{{ reversedMessage1() }}</p>

</div>

<script>

new Vue({

el: '#app',

data: {

message: 'hello'

},

methods: {

reversedMessage1: function(){

return this.message.split('').reverse().join('')

}

},

computed: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

}

});

</script>

</body>

</html>

注意:虽然通过计算属性和方法,都可以达到同样的效果,但是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

1.4 侦听属性

通过Vue实例的watch属性可以侦听数据的变化。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div >

<p>{{ message }}</p>

<button @click="reverse=!reverse">反转</button>

</div>

<script>

new Vue({

el: '#app',

data: {

message: 'Vue',

reverse: false

},

watch: {

// message: function(newVal, oldVal){

reverse: function(newVal){

console.log(newVal)

this.message = this.message.split('').reverse().join('')

}

},

});

</script>

</body>

</html>

我们可以通过实例属性vm.$watch达到同样的效果。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div >

<p>{{ message }}</p>

<button @click="reverse=!reverse">反转</button>

</div>

<script>

var vm = new Vue({

el: '#app',

data: {

message: 'Vue',

reverse: false

}

});

// vm.$watch('reverse', function (newVal, oldVal) {

vm.$watch('reverse', function (newVal) {

console.log(newVal)

this.message = this.message.split('').reverse().join('')

});

</script>

</body>

</html>

参考:

  • 计算属性和侦听器 — Vue.js

以上是 Vue.js — 计算属性和侦听器 的全部内容, 来源链接: utcz.com/z/378834.html

回到顶部