vue專案開發過程常見問題

zer0_li發表於2018-07-29
Vue

更新時間：2018-07-29

1.data functions should return an object

// 這個問題是 Vue 例項內,單元件的data必須返回一個物件;如下
<script>
    export default {
        data () {
            return {}
        }
    }
</script>
// 為什麼要 return 一個資料物件呢?
官方解釋如下: data 必須宣告為返回一個初始資料物件的函式，因為元件可能被用來建立多個例項。如果 data 仍然是一個純粹的物件，則所有的例項將共享引用同一個資料物件！

2.我給元件內的原生控制元件新增事件,怎麼不生效了

<!--比如用了第三方框架,或者一些封裝的內建元件; 然後想繫結事件-->
<!--例1-->
<el-input placeholder="請輸入關鍵詞" @mouseover="testKeyword"></el-input>
<!--例2-->
<router-link to="/aaa" @click="navTab">導航</router-link>
<!--上面的兩個例子都沒法觸發事件!!!-->
<!--究其原因,少了一個修飾符 .native-->
<!--官方文件：你可能有很多次想要在一個元件的根元素上直接監聽一個原生事件。這時，你可以使        用 v-on 的 .native 修飾符：-->
<base-input v-on:focus.native="onFocus"></base-input>

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

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

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

1: CORS 前後端都要對應去配置,IE10+
2: nginx 反向代理，線上環境可以用這個詳細配置可以看我另一篇文章nginx反向代理
3：jsonp 只支援get方式，侷限太大

如果你用的是vue-cli腳手架生成的目錄結構，開發環境可以配置proxyTable來解決跨域，本質上也是node.js代理了請求

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

5.明明更改了陣列元素的內容，或者新增刪除了物件的屬性，檢視為什麼沒有更新

// 由於 JavaScript 的限制，Vue 不能檢測以下變動的陣列：
// 當你利用索引直接設定一個項時，例如：vm.items[indexOfItem] = newValue
// 當你修改陣列的長度時，例如：vm.items.length = newLength
// 還是由於 JavaScript 的限制，Vue 不能檢測物件屬性的新增或刪除：
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現在是響應式的
vm.b = 2
// `vm.b` 不是響應式的
// 解決辦法：this.$set(obj,item,value);

官方文件傳送門：vue

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

// 單元件開發模式下,請確認是否開啟了 CSS模組化功能!!
// 也就是scoped(vue-cli 裡面配置了,只要加入這個屬性就自動啟用)
// <style lang="stylus" scoped></style>複製程式碼為什麼不能繼承或者覆寫呢,那時因為每個類或者 id 乃至標籤都會給自動在css後面新增hash!
// 寫的時候是這個
.test{}
// 編譯過後,加上了 hash
.test[data-v-1ec35ffc]{}

7.路由模式改為history後,除了首次啟動首頁沒報錯,重新整理訪問路由都報錯

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不過這種模式要玩好，還需要後臺配置支援。因為我們的應用是個單頁客戶端應用，如果後臺沒有正確的配置，當使用者在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。
所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
官方文件：vue-router

8.父元件如何直接呼叫子元件的方法

可以通過$refs或者$chilren來拿到對應的vue例項,從而操作

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

父傳子: props
子傳父: this.$emit(funName, arg)
兄弟通訊:
event bus: 就是找一箇中間元件來作為資訊傳遞中介
vuex: 狀態管理，為了避免重新整理時丟失資料可以和localStorage或sessionStorage本地儲存結合使用
傳送門:
vue官方元件間的通訊
vuex

10.既然localStorage和sessionStorage能做到資料維護,為什麼還要引入vuex

可維護性: 因為是單向資料流,所有狀態是有跡可循的…資料的傳遞也可以及時分發響應
易用性: 它使得我們元件間的通訊變得更強大,而不用藉助中介軟體這類來實現不同元件間的通訊

11.vuex的使用者資訊為什麼還要存一遍在瀏覽器裡(sessionStorage or localStorage)

vuex的store儲存在瀏覽器的快取內,若使用者重新整理的話,資料將會丟失

12.npm run dev 報埠錯誤!Error: listen EADDRINUSE :::8080

若果是vue-cli腳手架搭建的vue專案
更改webpack 配置: config/index.js

dev: {
 env: require("./dev.env"),
 port: 8080, // 更改啟動埠
 ...
}

若是自己搭建的nodejs服務，或nginx服務，更改啟動的埠號就行

13.什麼時候用v-if,什麼用 v-show

v-if : DOM 區域沒有生成,只有條件為真時才渲染
v-show: DOM 區域在元件渲染的時候同時渲染了,只是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.我在函式內用了this.xxx=,為什麼丟擲Cannot set property `xxx` of undefined

這又是this的套路了..this是和當前執行的上下文繫結的...
一般你在axios或者其他 promise , 或者setInterval 這些預設都是指向最外層的全域性鉤子.
簡單點說:"最外層的上下文就是 window,vue內則是 Vue 物件而不是例項!";
解決方案:
    暫存法: 函式內先快取 this , let that = this;(let是 es6, es5用 var)
    箭頭函式: 會強行關聯當前執行區域為 this 的上下文;

相關文章