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 //在需要使用的页面 ...
随机推荐
- ckeditor小记
widget 只要创建都会执行 init函数,可以绑定事件,但是如果widget释放了,其上绑定的时间也就没有了
- 【NOIP2016练习】T1 string (计数)
题意: 思路: ; ..]of int64; n,k,i:longint; ans,x,y:int64; s,t:ansistring; function c(x,y:longint):int64; ...
- canvas之webgl的浏览器开启方式
引自百度知道的回答 1.开启方式: 第一种:打开cmd,切换到Chorme的安装目录,敲入chrome.exe --enable -webgl,回车就会打开一个chrome浏览器窗口: 第二种:找到C ...
- 34深入理解C指针之---通过字符串传递函数
一.通过字符串传递函数 1.定义:可以使用函数名(字符串)调用函数,也可以使用函数指针调用函数,将两者结合 2.特征: 1).在函数声明时使用函数指针 2).调用函数时使用函数名称(字符串) 3).可 ...
- Day 21 三元表达式、生成器函数、列表解析
知识点程序: #! /usr/bin/env python # -*- coding: utf-8 -*- # __author__ = "DaChao" # Date: 2017 ...
- JSONP简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- Java 对象的序列化、反序列化
对象的序列化(Serialize):将内存中的Java对象转换为与平台无关的二进制流(字节序列),然后存储在磁盘文件中,或通过网络传输给另一个网络节点. 对象的反序列化(Deserialize):获取 ...
- codeforces A. Wrong Subtraction
A. Wrong Subtraction time limit per test 1 second memory limit per test 256 megabytes input standard ...
- MySQL中limit与max同时使用时查询为空的情况
一般情况下使用limit进行分页时通常是第一页就用max和min这些函数去求值,这样的情况是正常的,但是如果limit去到了第二页的时候发现这样用是不行的,原因未知! 修改的方式如下,适合大部分: , ...
- Java中HashMap的初始容量设置
根据阿里巴巴Java开发手册上建议HashMap初始化时设置已知的大小,如果不超过16个,那么设置成默认大小16: 集合初始化时, 指定集合初始值大小. 说明: HashMap使用HashMap(in ...