零基础入门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>

The More

计算属性缓存-vs-方法

计算属性-vs-侦听属性


本节完~~~~

热门相关:随身英雄杀   唐土万里   少林武僧在异界   重生隐婚:Hi,高冷权少!   天河大帝