你知道this.$options吗？（Vue）

题记

我们在Vue项目中会有很多情况下需要用到this.$options,所以接下来我们介绍几个场景会用到$options，我们想第一个问题当我们在template经常使用filter，那么你可以直接在methods里边用过滤器吗？我们在表单输入一般可不可以直接清空啊回到起点，我们在一个别人已经写的代码的复杂组件中，他们的功能在最后没有重置数据的初始值那么我们自己新加的功能需要用数据怎么初始值呢？。。。

一、过滤器不能通过this来复用?不存在的

过滤器被用于一些常见的文本格式化，被添加在表达式的尾部，由“管道”符号指示。

<div>{{ text | caplize }}</div>

export default {
    data() {
        return {
            text: 'hello'
        }  
    },
    filters: {
        caplize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
         }
    }
}

大胆试想一个场景，不仅模板内用到这个函数，在 method 里也需要同样功能的函数。但过滤器无法通过 this 直接引用，难道要在 methods 再定义一个同样的函数吗？

要知道，选项配置都会被存储在实例的 $options 中，所以只需要获取 this.$options.filters就可以拿到实例中的过滤器。

export default {
    methods: {
        getDetail() {
            this.$api.getDetail({
                id: this.id
            }).then(res => {
                let capitalize = this.$options.filters.caplize
                this.title = caplize(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();

通过下边的方法可以可以拿到我们初始化的query数据

 this.query = this.$options.data().query
      if (this.val.length > 0) {
        if (val.length > 1) {
          this.$message('只能选择一条')
          return
        }
        let amout = 0
        this.val.forEach(item => {
          amout = amout + item.billAmount
        })
        this.query.sumAmount = amout
      } else {
        this.query.billAmount = this.val[0].billAmount
      }

 二、通过一些不需要响应式的数据我们不加响应式，提高Vue的性能可以吗？

当然如果你问到这个问题，绝对是非常用心的，我们的变量有的时候确实不需要变化的，这样的变量我们可以放在data()之外，这样的变量就是没有响应式的，因为定义data中的数据会被自动添加了get和set方法，有时会有性能的浪费。

 <span> {{$options.big}}</span>
    <el-button @click="changeName">改变big变量</el-button>
<script>
export default {
  big: "冬雨",
  data() {
    return {
         
    };
  },
  methods:{
    changeName(){
        console.log(this.$options.big);
        this.$options.big="周冬雨";
      },
  }
  //在data外面定义的属性和方法通过$options可以获取和调用

</script>

 我们发现：
点击按钮之后，bigName的值会变，但是界面显示还是之前的。因为没有对bigName绑定set、get方法。

延申

你知道this.$data与this.$options.data()两者的区别吗？前者是一直变化的值，而后者是初始化的值，那么我们知道我们重置的时候就会产生新的思路大家看下下边的代码

methods:{
        gotos(){
            this.obj.sex='我改变了'
        },
        //获取vue中data中的所有值 当然data中的值也有可能是被改变了的
        obtain(){
            console.log('vue中data中的所有值',this.$data);
        },
        // 获取组件下初始状态下的值；就是你在data中最初写的值
        inithander(){
            console.log('初始状态下的值',this.$options.data());
        },
        // 重置值
        reset(){
            Object.assign(this.$data.obj,{name:'',age:'', sex:''});
            // 还可以使用   Object.assign(this.$data.obj,this.$options.data().obj); //前提是obj的值是空
            console.log('重置', this.obj )
        }
    }

路过的都是有缘人，你一定是喜欢学习热爱学习的有志青年，点个赞吧，谢谢！！！