Do you know this.$options? (Vue)

Inscription

We will need to use this.$options in many situations in the Vue project, so next we will introduce a few scenarios where $options will be used. We think the first problem is when we often use filters in templates, then you can directly Do you use filters in methods? Can we generally clear the form input directly? Back to the starting point, we are in a complex component with code written by others, and their functions do not reset the initial value of the data at the end. So what do we need to use the data for our new functions? What about the initial value? . . .

1. Filters cannot be reused through this? It does not exist.

Filters are used for some common text formatting and are added at the end of expressions, indicated by the "pipe" symbol.

<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)
         }
    }
}

Boldly imagine a scenario where this function is not only used in the template, but also requires a function with the same function in the method. But the filter cannot be directly referenced through this. Do we need to define the same function in methods?

You should know that the option configuration will be stored in the $options of the instance, so you only need to get this.$options.filters to get the filters in the instance.

export default {
    methods: {
        getDetail() {
            this.$api.getDetail({
                id: this.id
            }).then(res => {
                let capitalize = this.$options.filters.caplize
                this.title = caplize(res.data.title)
            })
        }
    }
}

 In addition to obtaining the instance filter, you can also obtain the global filter, because this.$options.filters will search upward along the proto, and the global filter exists in the prototype.

2. Reset the data in data? Don’t want to change other people’s code to get the initialized data?

In the Vue single file component, sometimes it is necessary to reset the data in the data. For example, the form is half filled in and the user wants to fill it in again.

<script>
    export default {
        data() {
            return {
                // 表单
                form: {
                    input: ''
                }
            }
        },
        methods: {
            // 重置表单方法
            retset() {
                this.form = this.$options.data().form;
            }
        },
    }
</script>

You can also reset the entire $data by assigning a value to the component's $data object. 

this.$data = this.$options.data();

We can get our initialized query data through the following method

 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
      }

 2. Can we improve the performance of Vue without adding responsiveness to some data that does not require responsiveness?

Of course, if you ask this question, you must be very careful. Sometimes our variables do not need to be changed. We can put such variables outside data(). Such variables are not responsive because the definition The data in data will automatically have get and set methods added, which sometimes results in a waste of performance.

 <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>

 We found that
after clicking the button, the value of bigName will change, but the interface display will still be the same as before. Because there is no set or get method bound to bigName.

extension

Do you know the difference between this.$data and this.$options.data()? The former is a value that keeps changing, and the latter is an initialized value. Then we know that new ideas will arise when we reset. Take a look at the code below.

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 )
        }
    }

Everyone passing by is a destined person. You must be an aspiring young man who likes to study. Please give it a like, thank you! ! !