一、過濾器不能通過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()