vue基础篇笔记（二）computed、methods和watch

最新推荐文章于 2024-05-06 17:16:03 发布

团酱

最新推荐文章于 2024-05-06 17:16:03 发布

阅读量926

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46703452/article/details/121845668

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、computed:计算属性

在computed中，可以定义一些属性，这些属性叫做计算属性。计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候，是把他们的名字直接当作属性来使用的；并不会把计算属性当作方法去调用。（注意：不需要加(),）

作用：计算属性，根据现有的值生成一个新的属性值，并用return返回新的属性值。

使用场景：需要生成一个新的属性时或者复杂的逻辑计算。

计算属性在引用时候，一定不能加小括号()去调用，直接把他当作普通属性去使用就好了

只要计算属性这个function内部，所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值

计算属性的求值结果会被缓存起来，方便下次直接使用(提高运行效率)，如果计算属性中所依赖的任何数据，都没有发生过变化，则不会被重新对计算属性求值。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{ num }}</p>
        <p>{{ num1 }}</p>
        <button @click='changeNum1'>点击改变num1的值</button>
    </div>
</body>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            num: 8
        },
        computed: {
            num1: {
                get: function () {//必须有返回值，用来获取属性，称为get函数
                    console.log("调用了get");
                    return this.num - 1;

                },
                set: function (value) {
                    console.log('修改num1的值,调用了set');
                    this.num = 10;
                }
            }
        },
        methods: {
            changeNum1: function () {
                this.num1 = 0;
            }
        }
    })
</script>

</html>

2、methods:

定义函数，在vue中被命名为方法，是调用对象上下文中的函数，还可以操作对象中包含的数据。（存放的是内部方法、事件的回调）

使用场景：每次确实需要重新加载，不需要缓存时用methods。

 var app=new Vue({
        el:"#app",
        data:{
            firstName:"mm",
            lastName:"ll"
        },
        methods: {
            fullName(){//fullName(方法名):function(){}
                return this.firstName+' ' +this.lastName//vue代理的数据和方法在上下文中都可使用，使用this.firstName访问data中的fristName属性
            }
        },
    })

注意：在调用methods定义的方法时，一定要加上小括号（），否则输出的就是函数中的字符

传递参数：可以在methods中写两个参数，然后在模板中使用data中的属性名作为fullName的参数传递给方法。

 methods: {
            fullName(first,last){
                return first + ' ' +last
            }
        },

同时在模板中传data中没有的属性作为参数也是可以的：例如

 {{fullName("kkk",lastName)}}

一个小案例：点击修改msg中的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="change">点我一下</button>
    </div>
</body>
<script src="vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data() {
            return {
                msg:"喵喵喵"
            }
        },
        methods: {
            change(){
                this.msg="汪汪汪"
            }
        },
    })
</script>
</html>

总结：

1、使用methods属性给vue定义方法

2、在方法中使用this.属性名就可以直接访问data中的数据

3、在构造函数外部可以使用app.fullName调用fullName方法

3、watch监听

作用：监听属性，监听data属性中的数据，当数据发生变化时，自动执行函数，但是如果被监听的数据是个对象，对象中的属性发生改变的时候，监听是不会触发的

    watch:{
            f1:{
                handler:function(newName,oldName){
                console.log(newName,oldName);
                this.fullName=newName+''
            },
            immediate:true//mmm undefined (可以对数据实现首次监听)
            },
            f2:{
                handler:function(newName,oldName){
                console.log(newName,oldName);
                this.fullName=oldName+''
            },
            immediate:true// yyy undefined
            },
            
        },
   computed:{
                f1(){
                    return this.firstName
                },
                f2(){
                    return this.lastName
                }
            }

深度监听：在被监听的数据是个对象（或数组），对象中的属性发生改变的时候，监听是可以触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{obj.name}}------{{obj.age}}
        <br>
        名字：<input type="text" v-model="obj.name" name="" id="">
        <br>
        年龄：<input type="text" v-model="obj.age" name="" id="">
    </div>
</body>
<script src="vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            obj:{
                name:"susan",
                age:18
            }
        },
        watch:{
            // 当监听一个对象的时候，如果修改对象的一个字段，监听函数是不会调用的，这时候需要进行深度监听
            obj:{
                handler:function(newobj,old){
                    console.log(newobj,old);
                },
                deep:true//深度监听，不写就不会监听到这个对象的中的值
                immediate:true//组件加载立即触发回调函数执行       
            }, 
            // 可以直接监听到对象中的字段值，例如name
            "obj.name":{
                handler:function(newname,oldname){
                    console.log(newname,oldname);
                }
            },
            // 监听age
            age:function(newage,oldage){
                console.log(newage,oldage);
            }
        },
        computed:{
            age(){
                return this.obj.age
            }
        }
    })
</script>
</html>

4、filter

过滤器：data里面的数据在渲染之前可以通过过滤函数对数据进行加工和处理之后再进行渲染，分为全局过滤器和局部过滤器，本质就是一个函数，通过函数调用的方式使用过滤器，一个数据可以连着使用多个过滤器，过滤器之间需要使用|分割

filter没有缓存，调用频繁，适用的场景像日期格式化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 过滤器：data里面的数据在渲染之前可以通过过滤函数对数据进行加工和处理之后再进行渲染，分为全局过滤器和局部过滤器，本质就是一个函数，通过函数调用的方式使用过滤器，一个数据可以连着使用多个过滤器，过滤器之间需要使用|分割 -->
        <!-- vue3里面把过滤器的配置移除了，建议使用computed计算结果代替过滤器 -->
        <input type="text" v-model="msg">
        <!-- 过滤器的数据|过滤器() -->
        <p>{{msg|dataFormat("万")|capitalize("❤")}}</p>
        <!-- <div v-bind:msg="msg | filter"></div> -->
    </div>
</body>
<script src="vue.js"></script>
<script>
    // 全局过滤器：参数1 过滤器的名字，参数2 回调函数 全局过滤器可以在任何一个组价使用，在框架开发的时候，一般把过滤器写成一个单独的js文件，在需要使用组件里面进行导入
    Vue.filter("dataFormat",function(pre,e){
        // pre,过滤之前的数据
        // e,调用过滤函数传递过滤过来的参数
        console.log(pre,e);
        return (pre/1000).toFixed('2')+e
    })
    var app = new Vue({
        el: "#app",
        data() {
            return {
                msg:"88888"
            }
        },
        // 局部过滤 ：在组件对象里面配置就是局部的组件，只能使用该组件里面
        filters: {
            capitalize(pre,e){
                console.log(pre,e);
                return e+ pre
            }
        }
    })
</script>

</html>