vue學習---computed和watch之間的區別
阿新 • • 發佈：2021-11-13
computed和watch之間的區別：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以進行非同步操作。
兩個重要的小原則：
1.所被Vue管理的函式，最好寫成普通函式，這樣this的指向才是vm 或 元件例項物件。
2.所有不被Vue所管理的函式（定時器的回撥函式、ajax的回撥函式等、Promise的回撥函式），最好寫成箭頭函式，
這樣this的指向才是vm 或 元件例項物件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_watch實現</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- computed和watch之間的區別： 1.computed能完成的功能，watch都可以完成。 2.watch能完成的功能，computed不一定能完成，例如：watch可以進行非同步操作。 兩個重要的小原則： 1.所被Vue管理的函式，最好寫成普通函式，這樣this的指向才是vm 或 元件例項物件。 2.所有不被Vue所管理的函式（定時器的回撥函式、ajax的回撥函式等、Promise的回撥函式），最好寫成箭頭函式， 這樣this的指向才是vm 或 元件例項物件。--> <!-- 準備好一個容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/></div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。 const vm = new Vue({ el:'#root', data:{ firstName:'張', lastName:'三', fullName:'張-三' }, watch:{ firstName(val){ setTimeout(()=>{ console.log(this) this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val } } }) </script> </html>