vue指令03---computed计算属性/监听器watch

1. 计算属性computed 的说明：

     计算属性computed是根据data中自己已有的属性 计算得到的一个新的属性，创建计算属性，通过computed关键字 他是一个对象，计算属性是基于他们的以来进行缓存的，computed 对象里面是计算属性，它是一个函数 但是可以当做属性来使用

  实例如下：

       

1 computed: {
2            // 这里的fullName就是一个计算属性 它是一个函数 但是可以当做属性来使用
3           fullName(){
4             return this.firstName + this.lastName
5           }
6         }

整体代码如下：

 1 <body>
 2     <div id="app">
 3       <input type="text" v-model="firstName">
 4       <input type="text" v-model="lastName">
 5        <!-- 这样写不好 这样使得模板逻辑变得厚重 不易维护 -->
 6       <div>全名：{{ firstName + lastName }}</div>
 7       <h1>使用computed</h1>
 8       <div>全名：{{fullName}}</div>
 9 
10     </div>
11     <script>
12        //计算属性computed是根据data中自己已有的属性 计算得到的一个新的属性
13       var vm = new Vue({
14         el: '#app',
15         data: {
16           firstName: '',
17           lastName: ''
18         },
19          //创建计算属性，通过computed关键字 他是一个对象，计算属性是基于他们的以来进行缓存的
20         computed: {
21            // 这里的fullName就是一个计算属性 它是一个函数 但是可以当做属性来使用
22           fullName(){
23             return this.firstName + this.lastName
24           }
25         }
26       })
27     </script>
28   </body>

页面展示：

 

 

2.监听器 watch 

 watch属性的说明：watch 监听器用来监听data中数据的值，只要监听到的数据一发生变化，他就能执行相应的函数。 创建监听器通过 watch 属性，它是一个对象，对象里面和 computed 一样也是函数，但是这里面的函数名很特殊，它必须是你要监听的data中的数据的名，这个函数包含两个参数，一个是newVal ，一个是oldVal

示例如下：

  

 1 watch: {    
 2            //监听firstName
 3           firstName(newVal, oldVal){
 4             this.watchFullName = newVal + this.lastName
 5           },
 6            //监听lastName
 7           lastName(newVal, oldVal){
 8             this.watchFullName = this.firstName + newVal
 9           }
10         }

整体代码实例： 

 1 <body>
 2     <div id="app">
 3       <input type="text" v-model="firstName">
 4       <input type="text" v-model="lastName">
 5        <!-- 这样写不好 这样使得模板逻辑变得厚重 不易维护 -->
 6       <div>全名：{{ firstName + lastName }}</div>
 7       <h1>使用computed</h1>
 8       <div>全名：{{fullName}}</div>
 9       <h1>使用watch</h1>
10       <div>全名：{{watchFullName}}</div>
11 
12     </div>
13     <script>
14        //计算属性computed是根据data中自己已有的属性 计算得到的一个新的属性
15       var vm = new Vue({
16         el: '#app',
17         data: {
18           firstName: '',
19           lastName: '',
20           watchFullName: ''
21         },
22          //创建计算属性，通过computed关键字 他是一个对象，计算属性是基于他们的以来进行缓存的
23         computed: {
24            // 这里的fullName就是一个计算属性 它是一个函数 但是可以当做属性来使用
25           fullName(){
26             return this.firstName + this.lastName
27           }
28         },
29          //创建监听器通过 watch 属性，它是一个对象，对象里面和 computed 一样也是函数，但是这里面的函数名很特殊，它必须是你要监听的data中的数据的名，这个函数包含两个参数，一个是newVal ，一个是oldVal
30         watch: {
31            //监听firstName
32           firstName(newVal, oldVal){
33             this.watchFullName = newVal + this.lastName
34           },
35            //监听lastName
36           lastName(newVal, oldVal){
37             this.watchFullName = this.firstName + newVal
38           }
39         }
40       })
41     </script>
42   </body>

页面显示：

 

 

3. 深度监听

 深度监听 watch 对象里面不再是一个函数，而是一个被监听的对象，它里面包含 一个handler 函数 和一个属性 deep：true 的属性，而且handler的函数名是固定，不能改变

示例代码：

 1  watch: {
 2           //监听对象的时候不再能使用一下这种方法  要使用深度监听
 3           // user(newVal, oldVal){
 4           //    console.log('改变了')
 5           // }
 6           user: {
 7              //hander这个函数名是固定不该改变的
 8             handler(newval){
 9               console.log('改变了');
10               console.log(newval.name);
11             },
12              //deep: true 表示深度监听
13             deep: true
14           }
15         }

 整体代码实例：

<body>
    <div id="app">
      <input type="text" v-model="user.name">
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          user: {
            name: 'jack',
          }
        },
        watch: {
          //监听对象的时候不再能使用一下这种方法  要使用深度监听
          // user(newVal, oldVal){
          //    console.log('改变了')
          // }
          user: {
             //hander这个函数名是固定不该改变的
            handler(newval){
              console.log('改变了');
              console.log(newval.name);
            },
             //deep: true 表示深度监听
            deep: true
          }
        }
      })
    </script>

 页面改变前后：

 

 

注意：在实际开发中 能用computed实现的就用computed实现， 需要执行一步操作的时候就要用到watch。

 

posted @ 2018-08-07 23:30  半路出家垒代码  阅读(582)  评论(0)  编辑  收藏  举报