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 //在需要使用的页面 ...
随机推荐
- 标准C程序设计七---61
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- 标准C程序设计七---34
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- ajax 将整个表单提交到后台处理
$(document).on('click', '.user-save-btn', function () { $.ajax({ url: 'index', type: 'post', dataTyp ...
- poj 1573(搜索)
Robot Motion Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 12351 Accepted: 5982 Des ...
- 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- 洛谷——P1767 家族_NOI导刊2010普及(10)
P1767 家族_NOI导刊2010普及(10) 题目描述 在一个与世隔绝的岛屿上,有一个有趣的现象:同一个家族的人家总是相邻的(这里的相邻是指东南西北四个方向),不同的家族之间总会有河流或是山丘隔绝 ...
- awk 统计
命令太多,记不住,组合起来用一把…..示例文件: 1 2 3 4 5 6 7 8 9 10 11 [root@lovedan test]# cat a.txt hello good world hel ...
- CodeChef - RIN Course Selection
Read problems statements in Mandarin Chineseand Russian. Rin is attending a university. She has M se ...
- BZOJ1014火星人prefix Splay維護序列 + 字符串哈希
@[Splay, 哈希] Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:\(madamimadam\), 我们将这个字符串的各个字符予以标号 ...
- SqlServer 并发事务:死锁跟踪(三)6种跟踪死锁的方法总结 大神
http://blog.csdn.net/kk185800961/article/details/42504857