vue項(xiàng)目開發(fā)過程常見問題

Apollo 發(fā)布于2019-08-23 10:28 / 911人閱讀

摘要：更新時(shí)間這個(gè)問題是實(shí)例內(nèi)單組件的必須返回一個(gè)對(duì)象如下為什么要一個(gè)數(shù)據(jù)對(duì)象呢官方解釋如下必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例。

更新時(shí)間：2018-07-29

1.data functions should return an object

// 這個(gè)問題是 Vue 實(shí)例內(nèi),單組件的data必須返回一個(gè)對(duì)象;如下

// 為什么要 return 一個(gè)數(shù)據(jù)對(duì)象呢?
官方解釋如下: data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例。如果 data 仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對(duì)象！

2.我給組件內(nèi)的原生控件添加事件,怎么不生效了





導(dǎo)航

3.我用了 axios或ES6promise新特性, 為什么 IE 瀏覽器不識(shí)別(IE9+)

IE系列不能識(shí)別promise特性，在webpack入口處添加babel-polyfill插件
module.exports = {
  context: path.resolve(__dirname, "../"),
  entry: {
    // 使用babel-polyfill 可以模擬ES6使用的環(huán)境，可以使用ES6的所有新方法
    app: ["babel-polyfill", "./src/main.js"]
  },
  ...
}

4.跨域問題No "Access-Control-Allow-Origin" header is present on the requested resource.

1: CORS 前后端都要對(duì)應(yīng)去配置,IE10+
2: nginx 反向代理，線上環(huán)境可以用這個(gè)詳細(xì)配置可以看我另一篇文章nginx反向代理
3：jsonp 只支持get方式，局限太大

如果你用的是vue-cli腳手架生成的目錄結(jié)構(gòu)，開發(fā)環(huán)境可以配置proxyTable來解決跨域，本質(zhì)上也是node.js代理了請(qǐng)求

// 在 config 目錄下的index.js
// target : 就是 api 的代理的實(shí)際路徑
// pathRewrite : 就是路徑重定向
proxyTable: {
  "/apis": {
    target: "http://10.1.1.1:8090",
    changeOrigin: true,
    pathRewrite: {
       "^/": "/"
    }
  }
}

5.明明更改了數(shù)組元素的內(nèi)容，或者添加刪除了對(duì)象的屬性，視圖為什么沒有更新

// 由于 JavaScript 的限制，Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：
// 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
// 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength
// 還是由于 JavaScript 的限制，Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現(xiàn)在是響應(yīng)式的
vm.b = 2
// `vm.b` 不是響應(yīng)式的
// 解決辦法：this.$set(obj,item,value);

官方文檔傳送門：vue

6.為什么我的組件間的樣式不能繼承或者覆寫

// 單組件開發(fā)模式下,請(qǐng)確認(rèn)是否開啟了 CSS模塊化功能!!
// 也就是scoped(vue-cli 里面配置了,只要加入這個(gè)屬性就自動(dòng)啟用)
// 復(fù)制代碼為什么不能繼承或者覆寫呢,那時(shí)因?yàn)槊總€(gè)類或者 id 乃至標(biāo)簽都會(huì)給自動(dòng)在css后面添加hash!
// 寫的時(shí)候是這個(gè)
.test{}
// 編譯過后,加上了 hash
.test[data-v-1ec35ffc]{}

7.路由模式改為history后,除了首次啟動(dòng)首頁(yè)沒報(bào)錯(cuò),刷新訪問路由都報(bào)錯(cuò)

當(dāng)你使用 history 模式時(shí)，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不過這種模式要玩好，還需要后臺(tái)配置支持。因?yàn)槲覀兊膽?yīng)用是個(gè)單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會(huì)返回 404，這就不好看了。
所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面。
官方文檔：vue-router

8.父組件如何直接調(diào)用子組件的方法

可以通過$refs或者$chilren來拿到對(duì)應(yīng)的vue實(shí)例,從而操作

9.組件的通訊方式有幾種

父?jìng)髯? props
子傳父: this.$emit(funName, arg)
兄弟通訊:
event bus: 就是找一個(gè)中間組件來作為信息傳遞中介
vuex: 狀態(tài)管理，為了避免刷新時(shí)丟失數(shù)據(jù)可以和localStorage或sessionStorage本地存儲(chǔ)結(jié)合使用
傳送門:
vue官方組件間的通訊
vuex

10.既然localStorage和sessionStorage能做到數(shù)據(jù)維護(hù),為什么還要引入vuex

可維護(hù)性: 因?yàn)槭菃蜗驍?shù)據(jù)流,所有狀態(tài)是有跡可循的...數(shù)據(jù)的傳遞也可以及時(shí)分發(fā)響應(yīng)
易用性: 它使得我們組件間的通訊變得更強(qiáng)大,而不用借助中間件這類來實(shí)現(xiàn)不同組件間的通訊

11.vuex的用戶信息為什么還要存一遍在瀏覽器里(sessionStorage or localStorage)

vuex的store保存在瀏覽器的緩存內(nèi),若用戶刷新的話,數(shù)據(jù)將會(huì)丟失

12.npm run dev 報(bào)端口錯(cuò)誤!Error: listen EADDRINUSE :::8080

若果是vue-cli腳手架搭建的vue項(xiàng)目
更改webpack 配置: config/index.js

dev: {
 env: require("./dev.env"),
 port: 8080, // 更改啟動(dòng)端口
 ...
}

若是自己搭建的nodejs服務(wù)，或nginx服務(wù)，更改啟動(dòng)的端口號(hào)就行

13.什么時(shí)候用v-if,什么用 v-show

v-if : DOM 區(qū)域沒有生成,只有條件為真時(shí)才渲染
v-show: DOM 區(qū)域在組件渲染的時(shí)候同時(shí)渲染了,只是display：none

14.@/components/layout/xxx"中的@是什么意思

// webpack可以配置alias(也就是路徑別名)
// 若是vue-cli腳手架位置在build/webpack.base.conf.js
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
  "vue$": "vue/dist/vue.esm.js",
  "@": resolve("src"),
  "common": resolve("./src/common"),
  "components": resolve("./src/components"),
  "api": resolve("./src/api"),
  "base": resolve("./src/base")
}
// 盡情配置吧

15.我在函數(shù)內(nèi)用了this.xxx=,為什么拋出Cannot set property "xxx" of undefined

這又是this的套路了..this是和當(dāng)前運(yùn)行的上下文綁定的...
一般你在axios或者其他 promise , 或者setInterval 這些默認(rèn)都是指向最外層的全局鉤子.
簡(jiǎn)單點(diǎn)說:"最外層的上下文就是 window,vue內(nèi)則是 Vue 對(duì)象而不是實(shí)例!";
解決方案:
    暫存法: 函數(shù)內(nèi)先緩存 this , let that = this;(let是 es6, es5用 var)
    箭頭函數(shù): 會(huì)強(qiáng)行關(guān)聯(lián)當(dāng)前運(yùn)行區(qū)域?yàn)?this 的上下文;

云服務(wù)器 GPU云服務(wù)器 Vue開發(fā) vue組件開發(fā) Vue開發(fā)技巧 vue20開發(fā)實(shí)踐

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96370.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Apollo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

onevps：新增（支付寶+中文網(wǎng)站），香港vps/新加坡vps/日本vps等9機(jī)房，1Gbps帶寬

閱讀 864·2021-10-09 09:58
Instagram 改進(jìn)了搜索結(jié)果呈現(xiàn)形式，縮小與TikTok的差距

閱讀 709·2021-08-27 16:24
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

閱讀 1791·2019-08-30 14:15
一道面試題引發(fā)的思考

閱讀 2437·2019-08-30 11:04
前端拼音模糊搜索

閱讀 2165·2019-08-29 18:43
flexible

閱讀 2229·2019-08-29 15:20
vue 解決循環(huán)引用組件報(bào)錯(cuò)的問題

閱讀 2782·2019-08-26 12:20
深入淺出面向?qū)ο蠛驮汀痉馄匦抡J(rèn)識(shí)new】

閱讀 1700·2019-08-26 11:44

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

vue項(xiàng)目開發(fā)過程常見問題

相關(guān)文章

Vue現(xiàn)有項(xiàng)目改造為Nuxt項(xiàng)目

vue for contacts項(xiàng)目總結(jié)

vue for contacts項(xiàng)目總結(jié)

vue for contacts項(xiàng)目總結(jié)

發(fā)表評(píng)論

0條評(píng)論

Apollo

男|高級(jí)講師

TA的文章

onevps：新增（支付寶+中文網(wǎng)站），香港vps/新加坡vps/日本vps等9機(jī)房，1Gbps帶寬

Instagram 改進(jìn)了搜索結(jié)果呈現(xiàn)形式，縮小與TikTok的差距

【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

一道面試題引發(fā)的思考

前端拼音模糊搜索

flexible

vue 解決循環(huán)引用組件報(bào)錯(cuò)的問題

深入淺出面向?qū)ο蠛驮汀痉馄匦抡J(rèn)識(shí)new】

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

vue項(xiàng)目開發(fā)過程常見問題

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！