VUE参考---计算属性和watch
一、总结
一句话总结：
计算属性：在computed属性对象中定义计算属性的方法，可以直接一个函数（只有get），或者一个对象（有get和set）
watch：通过vm对象的$watch()或watch配置来监视指定的属性
<div id="demo"> 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 名: <input type="text" placeholder="Last Name" v-model="lastName"><br> <!--fullName1是根据fistName和lastName计算产生--> 姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br> 姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br> 姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br> <p>{{fullName1}}</p> <p>{{fullName1}}</p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el: '#demo', data: { firstName: 'A', lastName: 'B', fullName2: 'A-B' }, // 计算属性配置: 值为对象 computed: { fullName1 () { // 属性的get() console.log('fullName1()', this) return this.firstName + '-' + this.lastName }, fullName3: { // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值 get () { console.log('fullName3 get()') return this.firstName + '-' + this.lastName }, // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值 set (value) {// fullName3的最新value值 A-B23 console.log('fullName3 set()', value) // 更新firstName和lastName const names = value.split('-') this.firstName = names[0] this.lastName = names[1] } } }, watch: { // 配置监视firstName firstName: function (value) { // 相当于属性的set console.log('watch firstName', value) // 更新fullName2 this.fullName2 = value + '-' + this.lastName } } }) // 监视lastName vm.$watch('lastName', function (value) { console.log('$watch lastName', value) // 更新fullName2 this.fullName2 = this.firstName + '-' + value }) </script>
1、watch属性设置方式？
1、在vm实例定义内的watch对象上设置
2、在vm实例的$watch方法上设置
<div id="demo"> 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 名: <input type="text" placeholder="Last Name" v-model="lastName"><br> <!--fullName1是根据fistName和lastName计算产生--> 姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br> 姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br> 姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br> <p>{{fullName1}}</p> <p>{{fullName1}}</p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el: '#demo', data: { firstName: 'A', lastName: 'B', fullName2: 'A-B' }, // 计算属性配置: 值为对象 computed: { fullName1 () { // 属性的get() console.log('fullName1()', this) return this.firstName + '-' + this.lastName }, fullName3: { // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值 get () { console.log('fullName3 get()') return this.firstName + '-' + this.lastName }, // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值 set (value) {// fullName3的最新value值 A-B23 console.log('fullName3 set()', value) // 更新firstName和lastName const names = value.split('-') this.firstName = names[0] this.lastName = names[1] } } }, watch: { // 配置监视firstName firstName: function (value) { // 相当于属性的set console.log('watch firstName', value) // 更新fullName2 this.fullName2 = value + '-' + this.lastName } } }) // 监视lastName vm.$watch('lastName', function (value) { console.log('$watch lastName', value) // 更新fullName2 this.fullName2 = this.firstName + '-' + value }) </script>
2、计算属性设置方式？
1、可以直接一个函数：fullName1 (){}
2、可以用对象的方式设置get和set：fullName3：{get (){},set(){}}
// 计算属性配置: 值为对象
computed: {
fullName1 () { // 属性的get()
console.log('fullName1()', this)
return this.firstName + '-' + this.lastName
},
fullName3: {
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get () {
console.log('fullName3 get()')
return this.firstName + '-' + this.lastName
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set (value) {// fullName3的最新value值 A-B23
console.log('fullName3 set()', value)
// 更新firstName和lastName
const names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
二、计算属性和watch
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03_计算属性和监视</title> 6 </head> 7 <body> 8 <!-- 9 1. 计算属性 10 在computed属性对象中定义计算属性的方法 11 在页面中使用{{方法名}}来显示计算的结果 12 2. 监视属性: 13 通过通过vm对象的$watch()或watch配置来监视指定的属性 14 当属性变化时, 回调函数自动调用, 在函数内部进行计算 15 3. 计算属性高级: 16 通过getter/setter实现对属性数据的显示和监视 17 计算属性存在缓存, 多次读取只执行一次getter计算 18 --> 19 <div id="demo"> 20 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 21 名: <input type="text" placeholder="Last Name" v-model="lastName"><br> 22 <!--fullName1是根据fistName和lastName计算产生--> 23 姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br> 24 姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br> 25 姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br> 26 27 <p>{{fullName1}}</p> 28 <p>{{fullName1}}</p> 29 </div> 30 31 <script type="text/javascript" src="../js/vue.js"></script> 32 <script type="text/javascript"> 33 const vm = new Vue({ 34 el: '#demo', 35 data: { 36 firstName: 'A', 37 lastName: 'B', 38 fullName2: 'A-B' 39 }, 40 41 // 计算属性配置: 值为对象 42 computed: { 43 fullName1 () { // 属性的get() 44 console.log('fullName1()', this) 45 return this.firstName + '-' + this.lastName 46 }, 47 48 fullName3: { 49 // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值 50 get () { 51 console.log('fullName3 get()') 52 return this.firstName + '-' + this.lastName 53 }, 54 // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值 55 set (value) {// fullName3的最新value值 A-B23 56 console.log('fullName3 set()', value) 57 // 更新firstName和lastName 58 const names = value.split('-') 59 this.firstName = names[0] 60 this.lastName = names[1] 61 } 62 } 63 }, 64 65 watch: { 66 // 配置监视firstName 67 firstName: function (value) { // 相当于属性的set 68 console.log('watch firstName', value) 69 // 更新fullName2 70 this.fullName2 = value + '-' + this.lastName 71 } 72 } 73 }) 74 75 // 监视lastName 76 vm.$watch('lastName', function (value) { 77 console.log('$watch lastName', value) 78 // 更新fullName2 79 this.fullName2 = this.firstName + '-' + value 80 }) 81 82 </script> 83 </body> 84 </html>