一、过滤器不能通过this来复用?不存在的
过滤器被用于一些常见的文本格式化，被添加在表达式的尾部，由“管道”符号指示。
<div>{{ text | capitalize }}</div>
export default {
data() {
return {
text: 'hello'
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
试想一个场景，不仅模板内用到这个函数，在 method 里也需要同样功能的函数。但过滤器无法通过 this 直接引用，难道要在 methods 再定义一个同样的函数吗？
要知道，选项配置都会被存储在实例的 $options 中，所以只需要获取 this.$options.filters就可以拿到实例中的过滤器。豁然开朗.jpg
export default {
methods: {
getDetail() {
this.$api.getDetail({
id: this.id
}).then(res => {
let capitalize = this.$options.filters.capitalize
this.title = capitalize(res.data.title)
})
}
}
}
除了能获取到实例的过滤器外，还能获取到全局的过滤器，因为 this.$options.filters 会顺着 proto 向上查找，全局过滤器就存在原型中。
重置data中的数据? 一键搞定
在vue单文件组件里有时需要重置data中的数据，比如表单填写一半，用户想重新填写。
<script>
export default {
data() {
return {
// 表单
form: {
input: ''
}
}
},
methods: {
// 重置表单方法
retset() {
this.form = this.$options.data().form;
}
},
}
</script>
也可以通过给组件 $data 对象赋值来重置来重置整个 $data。
this.$data = this.$options.data();
