vue 中的this问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 中的this问题相关的知识，希望对你有一定的参考价值。

参考技术A 在vue中当在vue中使用匿名函数的时候，会出现this指针改变的问题，出现方法或者属性数据 undefine 的问题，以下是相关的解决方法
一、在 回调函数之前 重新将this赋值
例如

二、使用箭头函数

在回调函数中有时候回调函数会修改this的指向，this本来应该指的是vue这个对象，但是他的this指向的是回调，由于在回调函数改变了this指针，导致后序出现this指向的数据出现未定义的状况。
但是在箭头函数中 this 指向的永远都是vue对象，所以建议多是想用箭头函数

vue列表排序实现中的this问题

最近在看vue框架的知识，然后其中有个例子中的this的写法让我很疑惑

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="demo">
        search: <input type="text" v-model="searchName">
        <ul>
            <li v-for="(p,index) in filterPersons" :key="index">
                {{index}} --- {{p.name}} --- {{p.age}}
            </li>
        </ul>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: ‘#demo‘,
            data: {
                searchName: ‘‘,
                /**
                 * 排序种类:
                 *  0 - 原本顺序
                 *  1 - 年龄升序
                 *  2 - 年龄降序
                 */
                orderType: 0,
                persons: [{
                        name: ‘Tom‘,
                        age: 18
                    },
                    {
                        name: ‘Jack‘,
                        age: 20
                    },
                    {
                        name: ‘Bob‘,
                        age: 16
                    },
                    {
                        name: ‘Kaka‘,
                        age: 25
                    },
                    {
                        name: ‘22‘,
                        age: 23
                    },
                    {
                        name: ‘33‘,
                        age: 18
                    },
                    {
                        name: ‘Shadow‘,
                        age: 21
                    },
                    {
                        name: ‘Good‘,
                        age: 18
                    },
                    {
                        name: ‘Lily‘,
                        age: 20
                    },
                    {
                        name: ‘Lena‘,
                        age: 19
                    }
                ]
            },
            computed: {
                filterPersons() {
                    // 取出相关的数据
                    const {
                        searchName,
                        persons,
                        orderType
                    } = this;

                    let flag;
                    flag = persons.filter(p => p.name.indexOf(searchName) !== -1);

                    if (orderType !== 0) {
                        flag.sort(function (p1, p2) {
                            if (orderType === 2) {
                                return p2.age - p1.age;
                            } else {
                                return p1.age - p2.age;
                            }
                        });
                    }

                    return flag;
                }
            },
            methods: {
                setOrderType(orderType) {
                    this.orderType = orderType;
                }
            }
        });
    </script>
</body>

</html>

在这堆代码中的filterPerson函数的第一行进行了this的赋值，创建了一个对象赋给了一个常量 在一些教程中表示这是取出要用的数据 其实算是简化操作，因为后面我将其注释掉，然后在每个变量前面加上this依旧可以跑起来

computed: {
                filterPersons() {
                    // 取出相关的数据
                    // const {
                    //     searchName,
                    //     persons,
                    //     orderType
                    // } = this;

                    let flag;
                    flag = this.persons.filter(p => p.name.indexOf(this.searchName) !== -1);

                    if (this.orderType !== 0) {
                        flag.sort(function (p1, p2) {
                            if (this.orderType === 2) {
                                return p2.age - p1.age;
                            } else {
                                return p1.age - p2.age;
                            }
                        });
                    }

                    return flag;
                }
            }

所以，在这个地方是将要用的数据事先放在了this中, 主要是函数中本身没有这几个变量，所以直接在函数内部使用是会报错的，因此需要去外面的vue实例中获取。如果不这么做，要多写很多个this。

以上是关于vue 中的this问题的主要内容，如果未能解决你的问题，请参考以下文章

vue列表排序实现中的this问题

vue中的this指向问题

vue这里的this指向哪里

vue js 组件中的 this.$route 只返回 undefined

Vue中匿名函数和箭头函数的this

Vue 3 中的 this.$forceUpdate 等效项 - 组合 API？