最近在看 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。