vue的数据赋值联动改变解决方案
作者:互联网
1.踩坑
1.1.深拷贝/浅拷贝
这实际上算不上vue的问题,算是js基础没打好的坑吧。
先来看一个简单的例子:
let obj = {name:'fiona-SUN'};
let copyObj = obj;
copyObj.name = 'fiona';
console.log(copyObj.name); // 'fiona'
console.log(obj.name); // 'fiona'
在js中也有栈(stack)和堆(heap)的概念:
- 栈:自动分配的内存空间,大小确定会自动释放。存放变量/局部变量/形参等。在js中存放简单数据段(五种基本数据类型:Number、String、Boolean、Null、Undefined),他们是按值存放的,可以直接访问。
- 堆:动态分配的内存,大小不定并且不会自动释放。存放在堆内存中的对象,栈中的变量实际保存的是一个指针,这个指针指向堆中的某一个位置。
所以上述例子中,属于浅拷贝,当我们声明一个对象,由于他不属于五种基本数据类型(即非简单数据段
),栈中会存放一个我们声明的obj
变量,它指向了堆中实际的这个对象的地址
。当我们把这个引用地址赋值给了copyObj
,实际它获得的是一个与obj
一致的指向堆中的地址。当copyOjb
改变了指向的对象地址的实际的值的时候,obj
拿到的值也就自然而然变化了。看图理解⬇
嗯,道理我都懂,但是写代码我就自然而然的忽略了,该反思。。。
深拷贝的方法
- 方法一:逐个去拿到简单数据项(网上可以搜到递归解决,思路类似)
let obj = {name:'fiona-SUN'};
let copyFunc = (originObj) => {
let copyObj = {};
for(let key in originObj){
copyObj[key] = originObj[key];
}
return copyObj;
};
let copyObj = copyFunc(obj);
copyObj.name = 'fiona';
console.log(copyObj.name); // 'fiona'
console.log(obj.name); // 'fiona-SUN'
- 方法二:通过JSON去解析
let obj = {name:'fiona-SUN'};
let copyObj = JSON.parse(JSON.stringify(obj));
copyObj.name = 'fiona';
console.log(copyObj.name); // 'fiona'
console.log(obj.name); // 'fiona-SUN'
- 方法三:es6之展开Object.assign(拷贝obj的内容到一个新的堆内存,copyObj存储新内存的引用)
let obj = {name:'fiona-SUN'};
let copyObj = Object.assign({}, obj);
copyObj.name = 'fiona';
console.log(copyObj.name); // 'fiona'
console.log(obj.name); // 'fiona-SUN'
- 方法四:es6之展开运算符(仅用于数组)
let arr = [1,2,3];
let copyArr = [...obj];
copyArr[2] = 0;
console.log(copyArr[2]); // 0
console.log(arr[2]); // 2
数组的深拷贝:
方法一:使用slice
var arr = [1,2,3];
var newArr = arr.slice(0);
方法二:使用concat
var arr = [1,2,3];
var newArr = arr.concat();
1.2.列表更新检测
1.2.1数组更新检测
以下摘自vue官网API
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue
相同的效果,同时也将触发状态更新:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题,你可以使用 splice:
example1.items.splice(newLength)
触发视图更新的方法:
- 变异方法
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- vue提供的set方法
- Vue.set( target, key, value )
1.2.2对象更新检测
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
解决方法:
- vue提供的set方法
- Vue.set( target, key, value )
- Object.assign()
- bject.assign({}, target, {key:value})
1.3.页面刷新vuex被清空
这真的是遇到一个很坑的问题,同一个页面(router未改变),一旦刷新(刷新或深度刷新),存储的vuex就马上和你说拜拜
-
localStorage
网上推荐最多的方法就是用localStorage。但是我个人觉得不太合适,还得看项目吧。localStorage是永久存储的。 -
数据重新获取
我使用的方法是在需要某些数据之前先判断一下数据是否存在,如果不存在重新获取。
1.4nextTick适当使用
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
简而言之,等待DOM更新之后再进行操作。
1.5.异步问题
这个是一个亘古不变的话题。
请求后台数据异步,常不经意的带来了问题。(处理异步的方法就不详细描述了,网上一搜一大堆)
1.6.组件之间的调用方式
1.6.1.父子组件
- prop向下传递,事件向上传递
- 子组件添加ref属性,父组件可以获取到子组件的实例(不建议)
- 插槽slot 作用域插槽
1.6.2.非父子组件
- 使用状态管理
- 实例化一个公共vue实例
1.7.计算属性设置值
计算属性是基于它们的依赖进行缓存的,一旦依赖发生变化,计算属性会重新计算
想要改变计算属性的值。要通过set方法去触发它所依赖的变量,(类似于触发它重新计算,单纯赋予一个新值,在取的时候也是不会被改变的)
1.8.vue文件中内联样式中有无scoped属性的差别
- 有scoped属性:
当前仅当该vue文件可以使用这个样式。 - 无scoped属性:
影响其他文件
1.9 v-for v-key
当 Vue.js 用v-for
正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):
1.10 v-for 和 v-if
当它们处于同一节点,v-for的优先级比v-if更高。
1.11 js文件中引入的css不会自动加前缀
无论是开发环境还是生成环境都不会自动加前缀,因为vue-loader只管.vue文件里面的样式,没有自动执行autoprefixer loader
在build/utils.js下引入postcss-loader
var postcssLoader = {
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('autoprefixer')()
],
sourceMap: true
}
}
如果还有问题在改成
var postcssLoader = {
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('autoprefixer')({
browsers: [
// 加这个后可以出现额外的兼容性前缀
"> 0.01%"
]
})
],
sourceMap: true
}
}
1.12 组件、prop大小写不敏感,事件敏感
对于组件和prop而言,html上用kebab-case (短横线分隔命名) ,其对应的js上要用
(HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:)
【但是:如果你使用字符串模板,那么这个限制就不存在了。】
components: {
kebabCase
}
---
prop: ['kebabCase']
跟组件和 prop 不同,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。
跟组件和 prop 不同,事件名不会被用作一个 JavaScript 变量名或属性名,所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此,我们推荐你始终使用 kebab-case 的事件名。
1.13 refs是静态节点
refs是静态节点
1.14 prop值的改变--不是立即
如果父组件中给子组件传递了一个prop的值,然后调用子组件的方法去获取该值,会发现值没有立即改变。
解决方法:
- 可以监听值的改变去调用相应子组件的方法
- 将子组件相关方法的调用放在nextTick里面
1.15 elmentui里面的el-form '就地复用'
和v-for一样,更新已渲染过的元素时,它默认用‘就地复用’策略。如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是简单服用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
1.16 elementui中的el-table的列显示与隐藏
如果有一组按钮组,点击不同的tab的时候显示不同的列,列会更换位置。默认用‘就地复用’,不会更新,需要加一个key值取随机数
1.17 fetch兼容
在vue-cli中使用fetch方式请求的时候。存在一定的兼容问题。
可以在build/webpack.base.conf.js中添加一个plugins
plugins:[
new webpack.ProvidePlugin({
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
})
]
1.18 字符串模板
ps:注意依赖包的下载
2.优化
2.1.错误处理
错误处理很重要但是这是最容易让开发忽略的点。
2.1.1.请求接口错误
由于我的请求是使用axios插件或者fetch单独写在了一个js,可以对其进行响应拦截。一旦失败,或者后台报错,就进行响应的错误处理以及友好提示,也避免了重复的代码,提高可维护性
2.1.2.页面错误处理(404)
- nginx未匹配到路由走404路由
- router.beforeEach是否匹配到响应的路由,否则走错误路由。
2.1.3 错误提示封装
将错误提示模块化,通过vuex来操作错误的显示以及信息等内容。
2.2.减少不必要的依赖包
性能优化是很重要的,特别是对于vue这种首屏加载时间长的。
例如有些项目用到了图表(echarts),可以选择加载依赖包,不用加载整个echarts库。
2.3.不发送多个相同的请求
不发送多个相同的请求,在点击触发请求的同时锁定请求,直至给出响应/错误解锁。
以上内容,如有错误请指出,不甚感激。
如需转载,请注明出处
2.4.组件中引入css的css依赖 -- sass-resources-loader
为了让SCSS之类的文件在CSS中引入中不需要每次都引入var.scss文件,可以引入一个sass-resources-loader
解决。
2.4.为了解决组件内引入的外部css文件没有做css兼容处理 -- postcss-loader
在build/utils中引入postcss-loader
loader: 'postcss-loader',
options:{
plugins: (loader) => [
require('autoprefixer')()
],
sourceMap: true
}
作者:逸宸a
链接:https://www.jianshu.com/p/32d44a047b07
来源:简书
标签:vue,obj,name,解决方案,loader,copyObj,组件,fiona,赋值 来源: https://www.cnblogs.com/ruruo/p/13213362.html