监视属性和计算属性对比:computed和watch之间的区别
- 计算属性computed能完成的功能,watch都可以完成
- 监听属性watch能完成的功能,computed计算属性不一定能完成,例如:watch可以进行异步操作
两个重要小原则:
- 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。
- 所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象。
监视属性示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名示例</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"></br> 名:<input type="text" v-model="lastName"></br> 全名:<span>{{fullName}}</span> </div> </body> </html> <script type="text/javascript"> //console.log(vm) const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', fullName: '张-三' }, // watch 监视 watch: { // 简写 firstName (val) { //简写方式 只能有 handler 不能有其他设置,如上代码deep: true,存在的话,则不可简写 this.fullName = val + '-' + this.lastName }, lastName (val) { //简写方式 只能有 handler 不能有其他设置,如上代码deep: true,存在的话,则不可简写 this.fullName = this.firstName + '-' + val }, } }) </script>
计算属性:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名示例</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"></br> 名:<input type="text" v-model="lastName"></br> 全名:<span>{{fullName}}</span> </div> </body> </html> <script type="text/javascript"> // -------------------计算属性------------------- const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', }, computed: { // 简写,简写时确保不用settter // myfullname: function () { fullName () { console.log('get 被调用了') return this.firstName + '|' + this.lastName } }, }) // -------------------监视属性------------------- //console.log(vm) /* const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', fullName: '张-三' }, // watch 监视 属性 watch: { // 简写 firstName (val) { //简写方式 只能有 handler 不能有其他设置,如上代码deep: true,存在的话,则不可简写 this.fullName = val + '-' + this.lastName }, lastName (val) { //简写方式 只能有 handler 不能有其他设置,如上代码deep: true,存在的话,则不可简写 this.fullName = this.firstName + '-' + val }, }, }) */ </script>
查看官网资料:https://v2.cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7
示例二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名示例</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"></br> 名:<input type="text" v-model="lastName"></br> 全名:<span>{{fullName}}</span> </div> </body> </html> <script type="text/javascript"> // -------------------计算属性------------------- // const vm = new Vue({ // el: '#root', // data: { // firstName: '张', // lastName: '三', // }, // computed: { // // 简写,简写时确保不用settter // // myfullname: function () { // fullName () { // console.log('get 被调用了') // return this.firstName + '|' + this.lastName // } // }, // }) // -------------------监视属性------------------- const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', fullName: '张-三' }, // watch 监视 属性 watch: { // 简写 firstName (val) { //简写方式 只能有 handler 不能有其他设置,如上代码deep: true,存在的话,则不可简写 // 异步等待,等待三秒后执行 setTimeout(() => { this.fullName = val + '-' + this.lastName }, 3000) }, lastName (val) { //简写方式 只能有 handler 不能有其他设置,如上代码deep: true,存在的话,则不可简写 this.fullName = this.firstName + '-' + val }, }, }) </script>
注:监听属性可实现异步等待操作,而计算属性中不可
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!