vue骚操作之this.$options(个人笔记)

一、过滤器不能通过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();

本文参考：过滤器复用
vue骚操作之this.$options.data()