当前位置：首页 > news >正文

Vue入门学习笔记-计算属性和监听属性

news 2025/5/23 13:52:12

Vue.js 计算属性

计算属性关键词: computed。

反转字符串案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p><p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div><script>
var vm = new Vue({el: '#app',data: {message: 'Hello World!'},computed: {// 计算属性的 getterreversedMessage: function () {// this 指向 vm 实例return this.message.split('').reverse().join('');}},methods:{reversedMessage2:function(){return this.message.split('').reverse().join('');}}
})
</script>
</body>
</html>

以上的例子是分别使用计算属性和函数的方式进行反转字符串，结果相同，但是处理的方式的不同的：

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
使用computed相当于使用一个属性，获取属性值；而使用methods相当于调用一个方法，获取返回值。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ person }}</p>
</div><script>
var vm = new Vue({el: '#app',data: {name: 'zhangsan',age: 22},computed: {person: {// getterget: function () {return this.name + ' ' + this.age},// setterset: function (newValue) {var values = newValue.split(' ')this.name = values[0]this.age = values[values.length - 1]}}}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.person="张三 23";
document.write('name: ' + vm.name);
document.write('<br>');
document.write('age: ' + vm.age);
</script>
</body>
</html>

vue对象调用对象属性进行复制时，默认调用对象属性中的set方法进行赋值

Vue.js 监听属性

通过实例演示，Vue.js 监听属性 watch，可以通过 watch 来响应数据的变化。

watch 实现计数器：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app"><p style = "font-size:25px;">计数器: {{ counter }}</p><!-- 在单击click事件中，直接进行数据处理，这里是减一 --><button @click = "counter--" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">var vm = new Vue({el: '#app',data: {counter: 100}});vm.$watch('counter', function(nval, oval) {alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');});
</script>
</body>
</html>

千米与米之间的换算：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script>
</head><body><div id = "app">千米 : <input type = "text" v-model = "kilometers">米 : <input type = "text" v-model = "meters"></div><p id="info"></p><script type = "text/javascript">var vm = new Vue({el: '#app',data: {kilometers : 0,meters:0},methods: {},computed :{},watch : {kilometers:function(val) {this.kilometers = val;this.meters = this.kilometers * 1000},meters : function (val) {this.kilometers = val/ 1000;this.meters = val;}}});// $watch 是一个实例方法vm.$watch('kilometers', function (newValue, oldValue) {// 这个回调将在 vm.kilometers 改变后调用document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;})</script></body>
</html>