vue总结。。。

Posted 2020-10-17

新作一个vue+axios页面，引得vue.js和axio.js还是很low的，为了熟悉一下，下面来分享踩到的坑。。。

1.axios数据获取是异步的，在声明一个空对象后赋值时  页面如果有用到该对象会是一个undefined  如果数据是undefined不会报错，但是undefined.属性值会直接报错 但是这个错误并不会影响功能，而且在axios执行完毕之后数据还是会渲染上 为了强迫症患者们。。。。  所以在渲染之前先判断一下数据是否为空，可以使用&&  如果不为空直接渲染&&后面的数据

2.vue不接受以&或者_开头的属性值，因为他们可能会跟Vue内置的属性、Api所冲突。可以使用例如vm.$data._propoty来访问，如果直接访问this.（这个属性值）会返回undefined

3.vue 在进行data的数据替换时触发setter和getter方法，从而触发页面数据的更新，但是当data中有一个对象数组的时候，直接整体替换该数组可以，直接更改该数组中某一个对象的某一个属性也可以，但是当整体替换某一个对象的时候，是不能引起页面的更新的，二维数组同理。。。不知道因为啥，待研究。。。

4.页面使用懒加载，将axios获取到的src存在data-src属性里，但是如果将懒加载的方法写在mounted里面，可能是获取不到有data-src属性的元素的，因为这些元素是从axios后端异步获取后再循环的，这个时间差导致最后 设置懒加载的图片是没有图片的  所以需要在axios成功之后 并且确定在元素渲染成功之后 ，所用到的方法为

self.$nextTick(function () {
$(function(){
。。。处理函数
})
})

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

5.小问题。。。axios中的this指代不是Vue 要使用可以在外面定义变量接收一下或者使用=>箭头函数

6.axios传递的参数正常用对象可能后端有处理，但是单独页面写的时候没有处理json对象，需要三种方法：1.params拼接一个字符串，然后加到api接口后面 2.直接在api接口链接后面加上？参数值   3.使用formdata的结构  直接append每个参数和值，然后传递

7.往data中添加新的数据  this.$set(goodObj,"isChecked",true)

 

持续更新～欢迎补充！！！

 

我是一个每天进步一点点的小渣渣呀小渣渣。。。