1、watch

理解： 监听器,监听某个数据的变化从而来执行一些操作，当data里面的数据发生变化的时候来执行一下开销较大或异步的操作

1、监听值类型(简单类型)数据

//在一个vue实例中
    new Vue({
        el:"#myApp",
        data:{
            num1:1,
            num2:2
        },
        methods:{},
        watch:{
            //这里两个属性，第一个值是变化后最新的值，第二个是变化前
            num1(after,before){
                this.num2 = after +1
            }
           immediate:true    //页面首次加载的时候做一次监听。
         //这里的意思就是，监听num1的变化，当num1的数据发生变化的时候，来操作num2的值
        }
    })

2、监听引用(复杂)类型的数据

|
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18
|
new Vue({

        ``el:``"#myApp"``,

        ``data:{

            ``obj:{

                ``userName:``"caicai"

            ``}

        ``},

        ``watch:{

            ``obj:{

                ``handler(newValue,oldValue){

                    ``// handler函数是当你的obj发生变化的时候你要做什么                  

                  ``console.log(newValue.userName,oldValue.userName);

                ``},

                ``deep:``true //是否深度侦听，true开启，false关闭,默认false

                ``//加了deep之后相当于在对象obj每一层的属性都加上了handler侦听器。否则的话侦听到的只是引用地址，不会执行handler函数

            ``}

        ``}

    ``}); |

2、computed
理解： 计算属性,顾名思义就是通过某个属性（数据）来计算得到某个属性,这个重点在于计算，我们希望的是拿到data数据后处理一下，得到计算的结果。
在原vue中的template模板，作者初衷只是进行一些简单的运算，那么比较复杂的计算就可用computed来进行操作

|
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
|
  ``<div id=``"myApp"``>

        ``<input type=``"text" v-model=``"str"``>

   ``1、第一种操作，写在模板里，导致模板过重，难于维护

        ``<p>{{str.split(``""``).reverse().join(``""``)}}</p>

   ``2、第二种，使用一个方法来调用，若多处使用，就执行多次，降低运行速度，性能减少

        ``<p>{{fn(str)}}</p>

   ``3、第三种，使用过滤器，具有缓存，只要str不发生变化，就不会再次进行运算

        ``<p>{{reverseStr}}</p>

    ``</div>

<script type=``"text/javascript"``>

new Vue({

    ``el:``"#myApp"``,

    ``data:{

        ``str:``"abcd"

    ``},

    ``methods:{

        ``fn(v){

            ``//若多出调用，就执行多次

          ``return v.split(``""``).reverse().join(``""``)``//炸开--反转--组合

        ``}

    ``},

    ``computed:{

        ``reverseStr(){

            ``//str不发生变化的话，我只执行一次，具有缓存

            ``return this``.str.split(``""``).reverse().join(``""``)

        ``}

    ``}

})

</script> |