Vue中的计算属性和侦听器

1. Vue中的方法——methods

在开发过程中，如果我们需要实现一些，随着数据的变化执行不同操作，的功能的时候，我们会习惯性的想到将这部分代码封装成一个函数方法进行调用，比如要实现点击按钮对数组进行自加操作：

<div id="app">
        <p>{{num}} </p>
        <p><input type="text" v-model="msg"></p>
        <p @click="num++">按钮点击num</p>
        <p>doubleNum --> {{doubleNum()}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            num:1
        },
        methods: {
            doubleNum() {
                // console.log('调用方法了...');
                return this.num * 2
            }
        }
    })
</script>

但是这种方法存在一些问题，那就是：当页面里的一些无关数据发生变化时，会引发页面的重新渲染，我们封装的函数也会进行调用，因此，我们可以通过watch监听器去监听有特定依赖性的数据；

2.侦听器——watch

watch可以监听现有数据的改变，然后当现有的数据发生改变后，就会实行接下来的业务逻辑；

 <div id="app">
        <p>{{num}} </p>
        <p @click="num++">按钮点击num</p>
        <p>watchNum --> {{watchNum}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            num:1
        },
        watch:{
            //这种写法最开始是加载不到数据的，因为最开始没调用这里
            // num: function (newValue, oldValue) {
            //     console.log(newValue, oldValue);
            //     this.watchNum = newValue * 2;
            // }
            num: {
                immediate: true, //初始化时就会执行一次
                handler(newValue, oldValue) {
                    this.watchNum = newValue * 2
                }
            }
        }
    })
</script>

使用watch之后，无关数据的变化不会再影响，但是watch的监听只能是单个的监听，每次监听只能监听一个变量的修改，不能同时监听多个变量的修改；

vue提供了一个东西叫做计算属性，他可以依赖多个数据的变化，并且只跟他所依赖的项进行关联；因此这里需要用到计算属性；

3.计算属性——computed

计算属性就是在实例配置项中通过computed来为vm设置一个新的数据，而这个新数据会拥有一个依赖（一条已经存在的数据），当依赖发生变化的时候，新数据也会发生变化

<div id="app">
        <p>{{num}} </p>
        <p><input type="text" v-model="msg"></p>
        <p @click="num++">按钮点击num</p>
        <p>computedNum --> {{computedNum}}</p>
        <hr>
        <p>{{firstName}}</p>
        <p><input type="text" v-model="firstName"></p>
        <p>{{lastName}}</p>
        <p><input type="text" v-model="lastName"></p>
        <p>fullName:{{fullName}}</p>
</div>
<script>
     new Vue({
        el: '#app',
        data: {
            num: 1,
            msg: "hello",
            watchNum: "",
            firstName: '',
            lastName: ''
        },
        computed: {
            computedNum() {
                return this.num * 2
            },
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
</script>

计算属性的写法是一个函数，但在界面中调用的时候需要写成属性的方式（不加括号）进行调用

计算属性不仅仅可以获取值，也可以设置值。虽然默认只有 getter，不过在需要时你也可以提供一个 setter，可以当此计算属性数据更改的时候去做其他的一些事情，相当于watch这个计算属性。
写法：将计算属性写成对象，再提供get/set方法

<div id="app">
        <p>{{computedMsg}}</p>
        <input type="text" v-model="computedMsg">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        computed: {
            computedMsg: {
                get() {
                    return this.msg
                },
                set(val) {
                    this.msg = val
                }
            }
        }
    })
</script>

4.计算属性computed和调用方法methods的区别

计算属性是基于它们的响应式依赖进行缓存的。他会根据现有的数据生成一个新的数据，并且二者会产生关联，建立永久性缓存，同时当无关数据发生改变的时候，计算属性内部不会重新计算，而是直接从缓存里面取值使用。只在相关响应式依赖发生改变时它们才会重新求值。
而对调用方法来说，每当触发重新渲染时，总会再次执行函数。哪怕是一些和该方法无关的数据发生变化时，我们封装的函数也会被调用。因此会产生大量的缓存。

5.计算属性computed和侦听器watch的区别

watch的监听只能是单个的监听，每次监听只能监听一个变量的修改，不能同时监听多个变量的修改；但是计算属性可以依赖多个数据的变化，并且只跟他所依赖的项进行关联。
当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed；当需要在数据变化时执行异步或开销较大的操作时，只能采用watch。