Vue需要注意的地方
2017-12-13 10:32
465 查看
使用vue过程中,遇到了一些问题,这里先总结以下两个:
问题一:
vue组件之间传递数据,在子组件中我想改变一个从父组件中传过来的值这是父组件
1234567891011121314151617181920 | <template> <div> <Child :message="message"></Child> </div></template><script>import Child from './child.vue';export default { data() { return { message: '这是传给子组件的信息', }; }, components: { Child, },};</script> |
123456789101112131415161718192021 | <template> <div @click="handleChange"> {{message}} </div></template><script> export default { props: { message: { type: String, default: '这是默认信息', }, }, methods: { handleChange() { this.message = '我是子组件修改后的信息'; }, }, };</script> |
但是在子组件中,我们不要去修改 prop。如果你必须要修改到这些数据,你可以使用以下方法:
把 prop 赋值给一个局部变量,然后需要修改的话就修改这个局部变量,而不影响 prop
1234567891011121314151617181920212223242526 | <template> <div @click="handleChange"> {{newMessage}} </div></template><script> export default { props: { message: { type: String, default: '这是默认信息', }, }, data() { return { newMessage: this.message, }; }, methods: { handleChange() { this.newMessage = '我是子组件修改后的信息'; }, }, };</script> |
问题二:
vue中检测不到data的变化,我想把给data中的a赋值一个新的对象(添加一个它本身不存在的属性),然而经过尝试发现直接赋值是行不通的,以下是我做的一下尝试12345 | <template> <div> {{a}} </div></template> |
123456789101112131415 | data() { return { a: {}, }; }, created() { setTimeout(() => { this.a.b = 1; }, 1000) }, watch: { a(newVal, oldVal) { console.log(`${oldVal}现在变成了${newVal}`); },}, |
vue文档中也明确表示添加到对象上的新属性不会触发更新,所以我们应该新建一个新的对象并将这个心对象的值赋值给原有的对象
12345678910111213141516171819 | export default { data() { return { a: {}, }; }, created() { setTimeout(() => { this.a = { b: 1, }; }, 500); }, watch: { a(newVal, oldVal) { console.log(`${oldVal}现在变成了${newVal}`); }, },}; |
由此给大家拓展一个对象的一些知识
tips1:
js取值的两种方式的区别
123 | const obj = {abc:"ss",nn:90};const v1 = obj.abc; // 使用点的方式const v2 = obj["abc"]; // 使用中括号的方式 |
1 | const v3 = obj[key]; |
tips2:
对象深拷贝实现方法
先解释什么是深拷贝和浅拷贝浅拷贝是对对象地址的复制,并没有开辟新的栈,复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,另一个对象的属性也会改变
深拷贝是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性
最简单的如下(方法一)
1 | b = JSON.parse( JSON.stringify(a) ) |
无法复制函数
原型链没了,对象就是object,所属的类没了。
使用递归(方法二)
12345678910111213141516171819202122232425262728 | const obj1 = { name: 'cehsi', age: 13, friends:['sk','ls'],}function deepCopy(o, c) { var c = c || {}; for(const i in o) { if(typeof o[i] === 'object') { // 判断是对象 if(o[i].constructor === Array) { // 数组 c[i] = []; } else { c[i] = {}; } deepCopy(o[i], c[i]); } else { c[i] = o[i]; } } return c;}let obj2 = {name: 'result'};obj2 = deepCopy(obj1, obj2);console.log(obj2); // { name: 'cehsi', age: 13, friends: [ 'sk', 'ls' ] }obj2.age = 20;console.log(obj2, obj1); // { name: 'cehsi', age: 20, friends: [ 'sk', 'ls' ] } { name: 'cehsi', age: 13, friends: [ 'sk', 'ls' ] } |
install deepcopy
tips3:
深对比,方法参考 http://stackoverflow.com/questions/1068834/object-comparison-in-javascript
方法一:Object.toJSON()1 | 这个方法简单,但是只适用于两个对象属性相同的情况,在没有方法和DOM节点的情况下,您可以使用简单的JSON样式对象: |
123456789101112131415 | const obj1 = { a: 1, b: 2,}const obj2 = { a: 1, b: 2,}const obj3 = { b: 2, a: 1,}console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // trueconsole.log(JSON.stringify(obj1) === JSON.stringify(obj3)); // false |
1 | 比较对象而不挖掘原型,然后递归地比较属性的投影,还可以比较构造函数。 |
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 | function deepCompare(x, y) { var i, l, leftChain, rightChain; function compare2Objects(x, y) { var p; // remember that NaN === NaN returns false // and isNaN(undefined) returns true if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') { return true; } // Compare primitives and functions. // Check if both arguments link to the same object. // Especially useful on the step where we compare prototypes if (x === y) { return true; } // Works in case when functions are created in constructor. // Comparing dates is a common scenario. Another built-ins? // We can even handle functions passed across iframes if ((typeof x === 'function' && typeof y === 'function') || (x instanceof Date && y instanceof Date) || (x instanceof RegExp && y instanceof RegExp) || (x instanceof String && y instanceof String) || (x instanceof Number && y instanceof Number)) { return x.toString() === y.toString(); } // At last checking prototypes as good as we can if (!(x instanceof Object && y instanceof Object)) { return false; } if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) { return false; } if (x.constructor !== y.constructor) { return false; } if (x.prototype !== y.prototype) { return false; } // Check for infinitive linking loops if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) { return false; } // Quick checking of one object being a subset of another. // todo: cache the structure of arguments[0] for performance for (p in y) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } } for (p in x) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } switch (typeof(x[p])) { case 'object': case 'function': leftChain.push(x); rightChain.push(y); if (!compare2Objects(x[p], y[p])) { return false; } leftChain.pop(); rightChain.pop(); break; default: if (x[p] !== y[p]) { return false; } break; } } return true; } if (arguments.length < 1) { return true; //Die silently? Don't know how to handle such case, please help... // throw "Need two or more arguments to compare"; } for (i = 1, l = arguments.length; i < l; i++) { leftChain = []; //Todo: this can be cached rightChain = []; if (!compare2Objects(arguments[0], arguments[i])) { return false; } } return true;} |
具有不同原型结构但相同投影的物体
函数可能具有相同的文本,但是指的是不同的闭包原型
转载http://wangyaxing.top/categories/vue/
相关文章推荐
- VUE 学习之 route-link 的样式以及需要注意的地方
- Vue删除对象属性需要注意的地方
- 详解关于Vue2.0路由开启keep-alive时需要注意的地方
- 处理XML需要注意的几个地方
- 关于开车需要注意的地方
- 使用String的HashCode作为Map主键需要注意的地方
- 将鼠标指针修改为自定义图片需要注意的几个地方
- 26个提升java性能需要注意的地方
- label app名称与标题栏名称 需要注意的地方
- 写正确函数需要注意的地方:int转char*, char* 转int。
- Tomcat中使用JNDI时需要注意的地方
- group by需要注意的地方
- oracle 默认值需要注意的一个地方
- string标准库几个需要注意的两个地方
- Activity启动模式以及在使用时需要注意的地方
- cocos2dx 使用 VERTEX_ATTRIB_COLOR需要注意的地方
- SOCKET连接优化需要注意的地方。
- 一些需要注意的地方
- go map操作需要注意的地方
- /etc/fstab文件需要注意的地方