vue项目开发实践问题总结

目录

this指向

this指针

 vue本地代理

---

this指向

 异步回调函数中使用this无法指向vue实例对象

1.  在js中，箭头函数不是简单的function（）｛｝匿名函数的简写语法糖，实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，在编写函数时就已经确定了，而匿名函数的this指向运行时实际调用该方法的对象，无法在编写函数时确定，此时this在箭头函数中已经按照词法作用域绑定了，很明显，使用箭头函数之后，箭头函数指向的函数内部的this已经绑定了外部的vue实例了；
2. 不可以当做构造函数，也就是说，不可以使用new命令，否则会抛出错误。this，arguments，caller等对象在函数体内都不存在，不可以使用yield命令，因此箭头函数不能用作Generator函数；
3. 箭头函数除了传入的参数之外，其他的对象都没有，在箭头函数引用了this，arguments或者参数之外的变量，那它们一定不是箭头函数本身包含的，而是从父级作用域继承的。

axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then((res) => {
  console.log(res);
 })
 .catch((err) => {
  console.log(err);
 });

this指针

 axios请求回调函数中的this指针问题

1. 匿名函数的指针指向->函数操作的本身
2. 箭头函数的指针指向->组件

当你需要使用到组件中声明的变量或者函数，就需要使用箭头函数。

//  匿名函数
this.axios.post(url, data)
.then(function(result) {
var resData = result.data
console.log(resData)
if (resData.status === 1) {
} else {
}
})
.catch(function (error) {
console.log(error)
})

//  箭头函数
this.axios.post(url, data)
.then((result) => {
var resData = result.data
console.log(resData)
if (resData.status === 1) {
} else {
}
})
.catch((error) => {
console.log(error)
})

 vue本地代理

 vue本地代理配置 解决跨域问题，仅限于开发环境

同源策略：

1. 同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，若只有目录不同则仍是同源；
2. 在同源策略下，只有同源的地址才可以相互通过Ajax的方式请求；
3. 在同源策略下，浏览器不允许Ajax获取服务器数据；
4. 同源或者不同源说的是两个地址之间的关系，不同源地址之间请求称为——跨域。

跨域的理解：

1. 跨域即网页所在URL的协议，域名，端口号，和ajax请求URL的协议，域名，端口号有任一对应不上的情况就会发生跨域。

proxyTable: {
    '/backEnd':{
    target:'http://192.168.3.200:8888', //目标接口域名有端口可以把端口也写上
    //或者prot本地起服务端口与服务端统一
    changeOrigin:true,
            }
},
// 发送request请求
//按代理配置 匹配到/backEnd就代理到目标target地址
axios.get('/backEnd/page') 
.then((res) => {
console.log(res) // 数据完全拿得到 配置成功
    this.newsList = res.data
}, (err) => {
    console.log(err)
})
//  在vue中，主要通过Vue脚手架中的vue.config.js文件来配置的，通过在devServer中的proxy来配置跨域的前缀
devServer: {
    // development server port 8000
    port: 8000,
    proxy: {
      [process.env.VUE_APP_API_BASE_URL]: {
        target: process.env.VUE_APP_PROXY_TARGET,
        changeOrigin: true
      }
    }
  },