1.2 天气案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<title>天气案例</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h3>今天天气很{{ info }}</h3>
  <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
  <!-- <button @click="isHot = !isHot">切换天气</button> -->
  <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el:'#root',
    data:{
      isHot:true,
    },
    computed:{
      info(){
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather(){
        this.isHot = !this.isHot
      }
    }
  })
</script>

1.3 侦听属性的基本用法

watch侦听属性

  1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
  2. 监视的属性必须存在，才能进行监视，既可以监视data，也可以监视计算属性
  3. 配置项属性immediate:false，改为 true，则初始化时调用一次 handler(newValue,oldValue)
  4. 监视有两种写法
    (1) 创建Vue时传入watch: {}配置
    (2) 通过vm.$watch()监视

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<title>天气案例_监视属性</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot
      }
    },
    // 方式一
    /* watch:{
        isHot:{
            immediate:true,
            handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
                }
                }
            } */
  })
  // 方式二
  vm.$watch('isHot', {
    immediate: true, // 初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时
    handler(newValue, oldValue) {
      console.log('isHot被修改了', newValue, oldValue)
    }
  })
</script>

1.4 深度监视

  1. Vue中的watch默认不监测对象内部值的改变（一层）
  2. 在watch中配置deep:true可以监测对象内部值的改变（多层）

注意:
(1) Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
(2) 使用watch时根据监视数据的具体结构，决定是否采用深度监视

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>天气案例_深度监视</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>今天天气很{{info}}</h2>
   <button @click="changeWeather">切换天气</button>
   <hr/>
   <h3>a的值是:{{numbers.a}}</h3>
   <button @click="numbers.a++">点我让a+1</button>
   <h3>b的值是:{{numbers.b}}</h3>
   <button @click="numbers.b++">点我让b+1</button>
   <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
   {{numbers.c.d.e}}
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
  const vm = new Vue({
   el:'#root',
   data:{
    isHot:true,
    numbers:{
     a: 1,
     b: 1,
     c: {
      d: {
       e: 100
      }
     }
    }
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
   watch:{
    isHot:{
     // immediate:true, //初始化时让handler调用一下
     //handler什么时候调用？当isHot发生改变时。
     handler(newValue,oldValue){
      console.log('isHot被修改了',newValue,oldValue)
     }
    },
    //监视多级结构中某个属性的变化
    /* 'numbers.a':{
     handler(){
      console.log('a被改变了')
     }
    } */
    //监视多级结构中所有属性的变化
    numbers:{
     deep:true,//深度监视开启
     handler(){
      console.log('numbers改变了')
     }
    }
   }
  })

 </script>
</html>

结果图展示:

1.5 侦听属性的简写形式

只有当如果监视属性除了handler没有其他配置项的话，可以进行简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>天气案例_监视属性_简写</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>今天天气很{{info}}</h2>
   <button @click="changeWeather">切换天气</button>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
  const vm = new Vue({
   el:'#root',
   data:{
    isHot:true,
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
   watch:{
    //正常写法
    /* isHot:{
     // immediate:true, //初始化时让handler调用一下
     // deep:true,//深度监视
     handler(newValue,oldValue){
      console.log('isHot被修改了',newValue,oldValue)
     }
    }, */
    //简写
    /* isHot(newValue,oldValue){
     console.log('isHot被修改了',newValue,oldValue,this)
    } */
   }
  })

  //正常写法
  /* vm.$watch('isHot',{
   immediate:true, //初始化时让handler调用一下
   deep:true,//深度监视
   handler(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
   }
  }) */

  //简写，最好写成普通函数，这样 this 的指向才是vm或组件实例对象，箭头函数this指向window
  // 箭头函数
  /* vm.$watch('isHot',(newValue,oldValue)=>{
   console.log('isHot被修改了',newValue,oldValue,this)
  }) */
  // 普通函数
    /* vm.$watch('isHot',function(newValue,oldValue){
   console.log('isHot被修改了',newValue,oldValue,this)
  }) */
 </script>
</html>

1.6 计算属性与监听属性的区别

computed和watch之间的区别

  • computed能完成的功能，watch都可以完成
  • watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

两个重要的小原则

(1) 所有被Vue管理的函数，最好写成普通函数，这样 this 的指向才是vm或组件实例对象
(2) 所有不被Vue所管理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数），最好写成箭头函数，这样 this 的指向才是vm或组件实例对象

两种属性的不同写法
计算属性的写法

1
2
3
4
5
6
7
8
9
10
11
12
new Vue({
    el:'#root', 
    data:{ 
        firstName:'张',
        lastName:'三'
    },
    computed:{
    	fullName(){
		    return this.firstName + '-' + this.lastName
    	}
    }
})

监听属性的写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
  el:'#root',
  data:{
    firstName:'张',
    lastName:'三',
    fullName:'张-三'
  },
  watch:{
    firstName(val){
      setTimeout(()=>{
        this.fullName = val + '-' + this.lastName
      },1000);
    },
    lastName(val){
      this.fullName = this.firstName + '-' + val
    }
  }
})

1.7 姓名案例_watch实现完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>姓名案例_watch实现</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <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>