Vue—-计算属性和监视

深碍√TFBOYSˉ_ 2022-05-18 11:16 211阅读 0赞

# Vue—-计算属性和监视 #

### 1、计算属性 ###

1）在computed属性对象中定义计算属性的方法  
2）在页面中使用\{ \{方法名\}\}来显示计算的结果

### 2、监视属性 ###

1）通过vm对象的$watch()或watch配置来监视指定的属性  
2）当属性变化时，回调函数自动调用，在函数内部进行计算

### 3、计算属性高级 ###

1）通过getter/setter实现对属性数据的显示和监视  
2）计算属性存在缓存，多次读取只执行一次getter计算

### 4、简单代码例子 ###

实现的功能：  
在姓和名的输入框中输入内容，下面的姓名1、2、3的输入框会同步输入的内容，反之在 姓名3（双向）输入框中输入也可以实现数据的双向显示效果。  
![显示效果：][70]

<div id="demo"> 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 名: <input type="text" placeholder="Last Name" v-model="lastName"><br>  姓名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>

[70]: /images/20220518/6948f5c8536447e4818dc9916efaab7d.png