Vue中data重置问题
Object.assign()
Object.assign()
方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
目标对象有1个,后边可以有多个源对象。注意他只会拷
贝源对象自身且是可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。
复制对象
var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
注意,Object.assign()
是浅拷贝。
合并对象
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
注意,具有相同属性的对象,同名属性,后边的会覆盖前边的。
Vue中的使用技巧
由于Object.assign()有上述特性,所以我们在Vue中可以这样使用:
Vue组件可能会有这样的需求:在某种情况下,需要重置Vue组件的data数据。此时,我们可以通过this.$data获取当前状态下的data,通过this.$options.data()获取该组件初始状态下的data。
然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态。
Vue中data重置问题的更多相关文章
- vue中data必须是一个函数
前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.
- Vue中data元素之间相互赋值的陷阱
今天在整理代码时,遇到这样的一个场景,下面将结合示例说明: (一)在Vue文件中定义一个const常量,如下图所示: (二)在data中有三个元素是这样赋值的,如下图所示: (三)在created() ...
- vue中data为什么不写成data:{}这样而是写成data(){return {}}类型。
data:{}:这样会直接挂载在vue实例中,变成全局变量,容易造成污染,再次今日该组件页面,会保留上次的变量值,不会被初始化 data(){return {}} :return包裹后数据中变量只在当 ...
- Vue中data返回对象和返回值的区别
速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...
- vue中data中引用本地图片报错404
首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...
- Vue中data数据,使用v-model属性绑定第三方插件(例如Jquery的日期插件)无法自动更新
问题原因就是html结合Vue使用,但是项目又使用了第三方日期控件,这会导致日期值选择形式的更新后,而Vue管理的对应v-model字段并未自动更新,这是因为日期控件未触发Input事件,需要我们在值 ...
- VUE:data数据中,能被网页渲染出来的数据类型有哪些
我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...
- vue中使用axios发送请求
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
- Vue中使用jquery
在vue项目中,需要实现某些特定的功能时,使用mvvm模式不易实现.因此引入jquery包来完成需求 npm install jqueryimport $ from jquery //在需要使用的页面 ...
随机推荐
- 不同狀況下的 bq25896 register
no charger時的 bq25896 register [bq25890 reg@] [0x0]=0x7f [0x1]=0x6 [0x2]=0x91 [0x3]=0x1a [0x4]=0x8 [0 ...
- Lua开发环境搭建(Mac OS X)
1. 安装Rudix Rudix: http://rudix.org curl -O https://raw.githubusercontent.com/rudix-mac/rpm/2015.4/ru ...
- android学习资源
https://codelabs.developers.google.com/ https://developer.android.com/ http://v.youku.com/v_show/id_ ...
- Java -----transient 和static
越来越喜欢深究java基础了,讲讲 transient 和static 对序列化的影响.废话少说,直接上代码就可以了 package serializable; import java.io.Ser ...
- Windows系统Python包的安装
本文针对于Python初学者,Python老鸟请绕道. 最近同时尝试在Windows10.MacOS.Ubuntu三个系统上安装Python相关的包,整体比较,Ubuntu最简单,Windows10最 ...
- Oracle SOA Suite OverView
SOA是一场架构的变革,那既然是变革,那就一定是有内在的原因来推动这个架构的变革.在过去几十年的时间里面,应用程序架构已经经历了3次巨大的变革,从Terminal/主机--> Client/Se ...
- Unable to lock the administration directory (/var/lib/dpkg/) is another process using it?
I see pretty much all the answers recommend deleting the lock. I don't recommend doing that as a fir ...
- ARC forbids Objective-C objects in structs or unions
解决方法有二种: 1.在出错的地方加入__unsafe_unretained 2.关闭系统ARC.1.点击project 2.点击Build Setting 3.找到其以下的Objetive ...
- Solaris之单用户模式
1.TERM 表示终端 vt100 是简单的终端模式 export TERM=vt100 在此模式下,方向键无效,用字母键 有很多环境变量,PATH .PS1 .TERM 一般在屏幕上写的都是暂时的, ...
- pjblog支持QQ、新浪微博一键登录
转载地址: http://www.ruisoftcn.com/blog/article.asp?id=955