零基础入门Vue之窥探大法——计算与侦听-Toy模板网

这篇具有很好参考价值的文章主要介绍了零基础入门Vue之窥探大法——计算与侦听。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

在上一小节我介绍了我学习vue入门插值语法的过程。

在本篇，我将记录我对vue的计算属性和侦听器的学习记录

注：本篇对于”侦听“和”监听“是一个意思

一、计算属性

在官网上，可以看到这样一个例子：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

Vue官方预判到了某些人学了Vue，会在{{}}写复杂的语句，而这些语句会大大降低可读性，但有时候又不得不去写这么复杂的逻辑来满足业务需求

因此Vue提供了新的配置项：computed

在面对每当我们读取变量时需要对变量进行处理后再现实的情况

1.1 计算属性的基本用法

看代码：

computedcomputed<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 500px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="root">
        输入b站视频连接: <input v-model="bUrl"><br>
        该视频的id为: {{id}}
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
        data:{
            bUrl:"https://www.bilibili.com/video/BV1xC4y1C7Hz/?spm_id_from=333.1007.tianma.1-1-1.click", //这是可以存放用于展示的数据
        },
        computed:{
            id(){
                if(this.bUrl.includes("?")){
                    return this.bUrl.split("/").slice(-2,-1)[0];
                }

                return this.bUrl.split("/").slice(-1)[0];
            }
        }
    })
</script>
</html>

在这个例子中，在input框输入b站url链接，computed配置的方法会立刻计算，在dom节点可以当成属性来获取

为什么每次修改input的内容computed相关方法会重新执行一次呢？因为v-model对bUrl和input框的内容进行了双向绑定，一旦改变了其中一个另外一个也会跟着变化，变化的时候就会触发computed配置里面的相关方法

1.2 计算属性添加setter

除此之外，如果我要对计算属性的方法添加一个setter，那么就需要写成这样子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 500px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="root">
        输入b站视频连接: <input v-model="bUrl"><br>
        该视频的id为: {{id}} <br>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
        data:{
            bUrl:"https://www.bilibili.com/video/BV1xC4y1C7Hz/?spm_id_from=333.1007.tianma.1-1-1.click",
        },
        computed:{
            id:{
                get(){
                    if(this.bUrl.includes("?")){
                        return this.bUrl.split("/").slice(-2,-1)[0];
                    }

                    return this.bUrl.split("/").slice(-1)[0];
                },
                set(){
                    /* show your code. */
                }
            }
        }
    })
</script>
</html>

二、侦听器

在Vue中提供了单独的配置去监听变量的变化，这个配置项就是：watch

2.1 监听器的基本用法

对于watch来说，当被监听对象发生改变时会调用监听的回调函数（handler）：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 200px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        输入b站视频连接: <input v-model="msg"><br>
        变化: {{info}}
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", 、
        data:{
            msg:"hello", 
            info:"没变化"
        },
        watch:{
            msg:{
                handler(oldValue,newValue){
                    this.info = `之前是${oldValue}，现在是${newValue}。`;
                }
            }
        }
    })
</script>
</html>

除此之外，你还可以用vm去创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 200px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        输入b站视频连接: <input v-model="msg"><br>
        变化: {{info}}
    </div>
</body>
<script type="text/javascript">
    let vm = new Vue({
        el:"#root", 
        data:{
            msg:"hello", 
            info:"没变化"
        },
    });

    vm.$watch('msg',function(oldValue,newValue){
        this.info = `之前是${oldValue}，现在是${newValue}。`;
    });
</script>
</html>

2.2 监听器的各种配置

详见文档

deep
immediate

deepimmediate:true,<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 50px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        <h1>{{mark.subject}}</h1>
        当前学习进度：{{mark.process}} % <br>
        输入要修改的值：<input type="text" v-model="newValue"> <button @click="changeProcess">确认</button>
    </div>
</body>
<script type="text/javascript">
    let vm = new Vue({
        el:"#root", 
        data:{
            newValue:0,
            mark:{
                subject:"Vue课程学习进度",
                process:30
            }
        },
        watch:{
            mark:{
                deep:true, //开启深度监听，即遇到对象时对象成员变化也会触发handler
                immediate:true, //开启立即执行，即刚一开始dom渲染也会被调用一次
                handler(oldV,newV){
                    if(!newV){
                        return; //把这个注释掉可以体会下有无immediate的区别
                    }
                    alert("老师修改进度为："+ newV.process);
                }
            }
        },
        methods: {
            changeProcess(){
                this.mark.process = this.newValue;
            }
        },
    });
</script>
</html>

2.3 监听的两种简写方式

如果要使用监听的简写方式意味着你放弃了配置 immediate 和 deep 属性

就是将，原本配置对象的地方，改为一个函数，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 200px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        输入b站视频连接: <input v-model="msg"><br>
        变化: {{info}}
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", 
        data:{
            msg:"hello", 
            info:"没变化"
        },
        watch:{
            msg(oldValue,newValue){
                this.info = `之前是${oldValue}，现在是${newValue}。`;
            }
        }
    })
</script>
</html>