vue中的 computed和watch基本使用

在日常使用vue中，我们可能在编程时候会遇到过这样的问题，就是将一个页面的字符串转为大写。如果是起步者的话，可能会使用这样的操作：

<div id="box">
    <!--书写 vuejs 代码-->

    <p>姓名：{{ username }}</p>
    <h2>用户名转换为大写进行输出</h2>
    <p>姓名：{{ username.toUpperCase() }}</p>
    <!--单纯语法-->
    <!--负责业务逻辑，VM层，而不是写在V-->
  
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            username: 'andy'
        }
 });
</script>

这样按理来说是可以实现的，可是视图层不应该做逻辑操作那么多，视图层应该只负责渲染就好了。
所以我们可以在js封装好方法，

<div id="box">
    <!--书写 vuejs 代码-->

  <p>姓名：函数： {{ converUserNameToUpperCase(username) }}</p>
    <!--单纯语法-->
    <!--负责业务逻辑，VM层，而不是写在V-->
  
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            username: 'andy'
        },
        methods: {
            converUserNameToUpperCase(val) {
                // 其他的事情
                return val.toUpperCase();
            }
        }
   });
</script>

所以我们可以在模型多增加一个转大写的方法，在视图只需要调用方法并且传入参数就可以了。要是更高级一点，我们还可以使用computed对象

computed

<div id="box">
    <!--书写 vuejs 代码-->

  <p>姓名：computed: {{ upperUsername }}</p>
    <!--单纯语法-->
    <!--负责业务逻辑，VM层，而不是写在V-->
  
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            username: 'andy'
        },
      
        // 计算属性，特点：它里面定义属性是依赖于其他的属性的
        computed: {
            // 定义一个 upperUsername 方法，注意： 这里定义为一个，但是调用的时候是一个属性
            upperUsername: function () {
                return  this.username.toUpperCase();
            }

        }
 });
</script>

值得注意的是upperUsername 这里定义为一个，但是调用的时候是一个属性,所以插值表达式直接 <p>姓名：computed: {{ upperUsername }}</p>。此外，compute对象的upperUsername是依赖于username属性的，所以，当username改变的时候，computed对象会发生变化，username所对的方法toUpperCase()也发生变化。
除了compute还有watch对象也是可以实现的。

watch

作用： 监视某个模型变量的变化，一旦这个模型变量发生变化，watch 对应函数里面执行，执行的时候，会把模型变量的新值传递给第一个参数，旧值传递第二个参数。
watch的原理也很容易明白

<div id="box">
    <!--书写 vuejs 代码-->

  <p>姓名：computed: {{ upperUsername }}</p>
    <!--单纯语法-->
    <!--负责业务逻辑，VM层，而不是写在V-->
  
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            username: 'andy',
            title: 'title'
        },
        // 作用： 监视某个模型变量的变化，一旦这个模型变量发生变化，watch 对应函数里面执行，执行的时候，会把模型变量的新值传递给第一个参数，旧值传递第二个参数
        watch: {
            username: function (newVal, oldVal) {
                console.log('username is changing....');
                console.log(newVal, oldVal);

            },

            title: function (newVal, oldVal) {
                console.log('title is changing....');
                console.log(newVal, oldVal);

            }

            //属性：data里面的 模型变量，属性的值 是一个函数，该函数存在两个参数 参数1：newVal 参数 oldval

        }
 });
</script>

会同时打印新值和旧值，

watch.png

但是值得注意的是，watch监视的值必须是模型变量data里面的值，但是computed里面监视的值，在模型变量data里面不能出现，否则就是重复定义。