木灵鱼儿
阅读:2675
vue项目里使用Object.assign的一个小技巧
当我们请求一个api的时候,他返回的数据可能会有很多,这些数据可能需要分别拆分存放在data预设的变量中。
这就导致我们可能要写好几个赋值操作
this.xxx = xxx;
this.xx = xxx;
this.xx = xxx;
我们可能会重复很多次上面这种操作,是不是有点麻烦。
为此,我们可以利用Object.assign来达到我们的偷懒效果
Object.assign(this,{xx:xxx},{xxx:xxx});
使用这种方式,我们的vue可以检测到动态改变的值,也就是说watch监听是可以触发的。
且效果和你写多个this.xxx=xxx是一样的。
感觉这个方法妙啊,所以分享出来,当然也是防止自己忘记。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关推荐
执行上下文
什么是执行上下文JavaScript引擎在执行代码阶段时,通常是调用函数的时候,就会先做一些准备工作,这个准备工作被称为执行上下文,简称EC,或者也可以叫做执行环境。执行上下文也是有不同的,有三个类型:全局执行上下文:最基础的执行上下文,一个程序也只会存在一个全局执行上下文,全局上下文会生成一个全局对象,这个对象就是window,并且会将该上下文的中this绑定到该全局对象上。函数执行上下文:当函数被调用时都是产生一个新的上下文对象,不管函数是否是重复调用Eval函数执行上下文:执行在 eval 函数内部的代码也会有它属于自己的执行上下文而this是由上下文中提供的,我们可以将上下文理解...
关于this
为什么会有thisthis在JavaScript中是一个非常复制的机制,它的存在其实是为了能让我们更好的复用代码,this提供了一种更优雅的方式来隐式“传递”一个对象引用,因此可以将API设计的更加简洁且易于复用。我们举个例子:new一个构造函数,我们可以得到一个新的实例对象,这个对象会继承原型,此时,如果没有this,如何在原型方法里去访问你的新的实例对象,以及获取属性这些操作。显然是不太好做的,难道每次都把自身作为参数传递给prototype上的方法吗?显然这非常不方便,如果使用了this,this会指向这个新的实例对象,那么我们在书写代码是就会更加方便了,复用也更加简单。这个thi...
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
创建型模式:原型模式
简介原型模式指的是:用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型相同或者相似的新对象。这个原型不同于js中的prototype,它指的是被克隆的对象。在java中克隆可以通过Object父类中的clone方法实现,但是在前端中,是没有这种方式的,我们需要通过其他方法实现克隆。克隆又分浅克隆和深克隆,因为引用类型的存在,浅克隆对引用类型只会克隆该类型的内存地址,而深克隆则会完全复制一份引用类型对象,达到完全克隆。原型模式也是用于创建一个对象,而这个对象可能非常复杂,为了减少消耗的资源,更高效的生成对象。反例假设我们现在有这么一段代码:const run = { a:...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
name.
Google Chrome Windows 10学到了学到了