你知道this.$options吗?(Vue)

题记

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

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

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

javascript 复制代码
<div>{{ text | caplize }}</div>
javascript 复制代码
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就可以拿到实例中的过滤器。

javascript 复制代码
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中的数据,比如表单填写一半,用户想重新填写。

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

也可以通过给组件data对象赋值来重置来重置整个data。

复制代码
this.$data = this.$options.data();

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

javascript 复制代码
 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方法,有时会有性能的浪费。

javascript 复制代码
 <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()两者的区别吗?前者是一直变化的值,而后者是初始化的值,那么我们知道我们重置的时候就会产生新的思路大家看下下边的代码

javascript 复制代码
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 )
        }
    }

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

相关推荐
前端菜鸟日常9 分钟前
Webpack 和 Vite 的主要区别
前端·webpack·node.js
Clockwiseee35 分钟前
js原型链污染
开发语言·javascript·原型模式
仙魁XAN1 小时前
Flutter 学习之旅 之 flutter 在设备上进行 全面屏 设置/隐藏状态栏/隐藏导航栏 设置
前端·学习·flutter
hrrrrb1 小时前
【CSS3】化神篇
前端·css·css3
木木黄木木1 小时前
HTML5拼图游戏开发经验分享
前端·html·html5
BBbila2 小时前
小程序主包方法迁移到分包-调用策略
开发语言·javascript·微信小程序
Java程序之猿2 小时前
Docker 部署Spring boot + Vue(若依为例)
vue.js·spring boot·docker
不能只会打代码2 小时前
六十天前端强化训练之第十七天React Hooks 入门:useState 深度解析
前端·javascript·react.js
何包蛋H2 小时前
分享vue好用的pdf 工具实测
javascript·vue.js·pdf
PagiHi2 小时前
iWebOffice2015 中间件如何在Chrome107及之后的高版本中加载
前端·javascript·chrome·中间件·edge·js