计算属性
模板内的表达式非常便利,但是设计它们的初衷是简单运算,在模板中放入过多逻辑会让模板过重且难以维护
<h1>计算属性</h1>
<p>模板内的表达式非常便利,但是设计它们的初衷是简单运算,在模板中放入过多逻辑会让模板过重且难以维护</p>
<h2>基础例子</h2>
<div id="app-1">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#app-1',
data: {
message: 'hello'
},
computed: {
// 计算属性的getter
reversedMessage: function () {
//this指向vm实例
return this.message.split('').reverse().join('');
}
}
});
console.log(vm.reversedMessage); // => 'olleH'
vm.message = 'Goodbye';
console.log(vm.reversedMessage); // => 'eybdooG'
</script>
计算属性缓存vs方法
两个方法是结果看起来是没有什么区别的,但是计算属性是存在缓存的,当响应式依赖发生改变时它们才会重新求值,只要不改变就不会再次执行函数,而方法是每次都需要去执行的
<h2>计算属性缓存vs方法</h2>
<p>两个方法是结果看起来是没有什么区别的,但是计算属性是存在缓存的,当响应式依赖发生改变时它们才会重新求值,只要不改变就不会再次执行函数,而方法是每次都需要去执行的</p>
<div id="app-2">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage() }}"</p>
<p>date now: {{ now }}</p>
</div>
<script>
var vm2 = new Vue({
el: '#app-2',
data: {
message: 'hello'
},
methods: {
// 计算属性的getter
reversedMessage: function () {
//this指向vm实例
return this.message.split('').reverse().join('');
}
},
computed: {
now: function () {
return Date.now();
}
}
});
</script>
计算属性vs侦听属性
<h2>计算属性vs侦听属性</h2>
<div id="demo">侦听属性:{{ fullName }}</div>
<div id="demo1">计算属性:{{ fullName }}</div>
<script>
var vm3 = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName:function (val) {
console.log("firstName val",val);
this.fullName = val+'&&'+this.lastName;
},
lastName:function (val) {
console.log("lastName val",val);
this.fullName = this.firstName + ' ' +val;
}
}
});
var vm4 = new Vue({
el: '#demo1',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: function () {
return this.firstName + '$$$' + this.lastName;
}
}
});
</script>
计算属性的setter
计算属性默认只有getter,需要时也可以提供一个setter
<h2>计算属性的setter</h2>
<p>计算属性默认只有getter,需要时也可以提供一个setter</p>
<div id="demo2">计算属性:{{ fullName }}</div>
<script>
var vm5 = new Vue({
el: '#demo2',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: {
//getter
get: function () {
return this.firstName + '$' + this.lastName;
},
//setter
set: function (newValue) {
console.log("newValue-->",newValue);
var names = newValue.split('$');
console.log("names-->",names);
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
</script>
侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
<h2>侦听器</h2>
<p>虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。</p>
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!',
},
watch: {
//如果`question`发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...';
this.debouncedGetAnswer();
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
// 请参考:https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)';
return;
}
this.answer = 'Thinking...';
var vm = this;
axios.get('https://yesno.wtf/api').then(function (response) {
vm.answer = _.capitalize(response.data.answer);
}).catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error;
});
}
}
});
</script>