watch
屬性的使用
小demo:想要實現 名
和 姓
兩個文本框的內容改變,則全名的文本框中的值也跟着改變, 一般我們可以在兩個輸入的文本框中綁定鍵盤事件,當觸發鍵盤事件在調用拼接‘名’和‘姓’的函數即可實現。
以下是watch屬性的應用
- 監聽
data
中屬性的改變:
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen',
fullName: 'jack - chen'
},
methods: {},
watch: {
'firstName': function (newVal, oldVal) { // 第一個參數是新數據,第二個參數是舊數據
this.fullName = newVal + ' - ' + this.lastName;
},
'lastName': function (newVal, oldVal) {
this.fullName = this.firstName + ' - ' + newVal;
}
}
});
</script>
- 監聽路由對象的改變:
<div id="app">
<router-link to="/login">登錄</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
<script>
var login = Vue.extend({
template: '<h1>登錄組件</h1>'
});
var register = Vue.extend({
template: '<h1>註冊組件</h1>'
});
var router = new VueRouter({
routes: [
{ path: "/login", component: login },
{ path: "/register", component: register }
]
});
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router,
watch: {
'$route': function (newVal, oldVal) {
if (newVal.path === '/login') {
console.log('這是登錄組件');
}
}
}
});
</script>
computed
計算屬性
特點:computed的函數中的data屬性發生改變則立即會執行此函數,一般這個函數會返回一個計算值,因此才說這個函數通常用作一個屬性。
- 默認只有
getter
的計算屬性:
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {},
computed: { // 計算屬性; 特點:當計算屬性中所以來的任何一個 data 屬性改變之後,都會重新觸發 本計算屬性 的重新計算,從而更新 fullName 的值
fullName() {
return this.firstName + ' - ' + this.lastName;
}
}
});
</script>
- 定義有
getter
和setter
的計算屬性:
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<!-- 點擊按鈕重新爲 計算屬性 fullName 賦值 -->
<input type="button" value="修改fullName" @click="changeName">
<span>{{fullName}}</span>
</div>
<script>
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {
changeName() {
this.fullName = 'TOM - chen2';
}
},
computed: {
fullName: {
get: function () {
return this.firstName + ' - ' + this.lastName;
},
set: function (newVal) {
var parts = newVal.split(' - ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
});
</script>
watch
、computed
和methods
之間的對比
computed
屬性的結果會被緩存,除非依賴的響應式屬性變化纔會重新計算。主要當作屬性來使用;methods
方法表示一個具體的操作,主要書寫業務邏輯;watch
一個對象,鍵是需要觀察的表達式,值是對應回調函數。主要用來監聽某些特定數據的變化,從而進行某些具體的業務邏輯操作;可以看作是computed
和methods
的結合體;