一、三者之間的對比： 1、methods方法表示一個具體的操作，主要書寫業務邏輯； 2、watch；一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體業務邏輯操作；可以看作是”computed"和“methods”的結合體； 3、computed屬性的 ...
一、三者之間的對比：
1、methods方法表示一個具體的操作，主要書寫業務邏輯；
2、watch；一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體業務邏輯操作；可以看作是”computed"和“methods”的結合體；
3、computed屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用。
二、methods：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>methods實現名稱拼接</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" @keyup="getFullname" /> +
<input type="text" v-model="lastname" @keyup="getFullname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
methods: {
getFullname() {
this.fullname = this.firstname + "-" + this.lastname;
}
}
});
</script>
</body>
</html>
2、watch:
使用這個屬性，可以監視 data中指定數據的變化，然後觸發這個watch中對應的function處理函數。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>methods實現名稱拼接</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <!-- <input type="text" v-model="firstname" @keyup="getFullname" /> + <input type="text" v-model="lastname" @keyup="getFullname" /> = --> <input type="text" v-model="firstname" /> + <input type="text" v-model="lastname" /> = <input type="text" v-model="fullname" /> </div> <script> var vm = new Vue({ el: "#app", data: { firstname: "", lastname: "", fullname: "" }, methods: { // getFullname() { // this.fullname = this.firstname + "-" + this.lastname; // } }, watch: { firstname: function(newVal, oldval) { this.fullname = newVal + "-" + this.lastname; }, lastname: function(newVal) { this.fullname = this.firstname + "-" + newVal; } } }); </script> </body> </html>
3、watch監聽路由地址的變化：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>methods實現名稱拼接</title> <script src="./lib/vue.js"></script> <!-- 1.導包 --> <script src="./lib/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/login">登錄</router-link> <router-link to="/register">註冊</router-link> <router-view></router-view> </div> <script> //2.創建子組件 var login = { template: "<h3>這是登錄子組件</h3>" }; var register = { template: "<h3>這是註冊子組件</h3>" }; //3.創建一個路由對象 var router = new VueRouter({ routes: [ //路由規則數組 { path: "/", redirect: "/login" }, { path: "/login", component: login }, { path: "/register", component: register } ], linkActiveClass: "myactive" //和激活有關的類 }); var vm = new Vue({ el: "#app", data: { }, methods: {}, router, watch: { "$route.path": function(newVal, oldVal) { if (newVal === "/login") { console.log("歡迎進入登錄頁面"); } else if (newVal === "/register") { console.log("歡迎進入註冊頁面"); } } } }); </script> </body> </html>
4、computed：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>methods實現名稱拼接</title> <script src="./lib/vue.js"></script> <script src="./lib/vue-router.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname" /> + <input type="text" v-model="middlename" /> + <input type="text" v-model="lastname" /> = <input type="text" v-model="fullname" /> </div> <script> var vm = new Vue({ el: "#app", data: { firstname: "", middlename: "", lastname: "" }, methods: {}, watch: {}, computed: { fullname: function() { console.log("ok"); return this.firstname + "-" + this.middlename + "-" + this.lastname; } } }); </script> </body> </html>
在computed 中，可以定義一些屬性，這些屬性 ，叫做 【計算屬性】，計算屬性的本質就是一個方法。
只不過，我們在使用這些計算屬性的時候，是把它們的名稱，直接當作屬性來使用的；並不會把計算屬性當作方法去調用。
需要註意的是：
①、計算屬性在引用的時候，一定不要加（)去調用，直接把它當作 普通屬性去使用就好了；
②、只要計算屬性，這個 function 內部，所用到的任何 data 中的數據發送了變化，就會立即重新計算這個計算屬性的值；
③、計算屬性的求值結果，會被緩存起來，方便下次直接使用；如果計算屬性方法中，所以來的任何數據，都沒有發生過變化，則 不會重新對 計算屬性求值。
