當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

vue项目中遇到的一些问题

發(fā)布時(shí)間：2024/9/5 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue项目中遇到的一些问题小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

或訪問(wèn)：https://github.com/littleHiuman/experiences-about-vue

?歡迎補(bǔ)充！

vuex 狀態(tài)

vue-cli 命令行

vue vue

vue-router 路由

es6

eslint

?Js寫(xiě)法規(guī)范。

eslint常見(jiàn)問(wèn)題

brace-style？

no-sequences？

block-spacing？

比較時(shí)，使用全等號(hào)

所有的switch語(yǔ)句都必須要有一個(gè)default分支

yoda：yoda條件語(yǔ)句就是對(duì)象字面量應(yīng)該寫(xiě)在比較操作符的左邊，而變量應(yīng)該寫(xiě)在比較操作符的右邊（默認(rèn)的規(guī)則要求，變量寫(xiě)在左邊而字面量寫(xiě)在右邊）

個(gè)別符號(hào)以及關(guān)鍵字之間需要空格（比如function，逗號(hào)，大括號(hào)，運(yùn)算符）

逗號(hào)在行尾出現(xiàn)/行首

不以新行開(kāi)始的塊 { 前面要不要有空格

立即調(diào)用函數(shù)的寫(xiě)法：

(function() {
　　// body?
}());

只能使用單引號(hào)

最后必須有一行空行，

不能有多余空行

不能有多余空格

空位/制表符距離為2

可以設(shè)置帶分號(hào)，否則js中不能帶分號(hào)。

"semi": [2, "always"]

不能定義了卻未使用的變量

alias中定義的簡(jiǎn)稱只能用于js部分。

模塊必須有一個(gè)根元素

整個(gè)頁(yè)面有切換動(dòng)畫(huà)，那么頁(yè)面的根元素不能有其他樣式影響

Vue實(shí)例中最后一個(gè)屬性末不需要加逗號(hào)

對(duì)象里的最后一項(xiàng)，不需要加逗號(hào)

?引入css文件：

1. index.html中引入，

2. <style></style>中引入，需要@import，

或者另外一個(gè)<style src=""></style>

3. main.js中引入需要寫(xiě)loader（inport/require）

require('!style-loader!css-loader!less-loader!./assets/css/common_m.less')

PS：在webpack中配置好了loader之后，不需要在引入文件時(shí)寫(xiě)loader和文件后綴。?

?cssloader：

{test: /\.css$/,
　　exclude: /node_modules/,loader: "style-loader!css-loader", }, {test: /\.less$/,
　　exclud: /node_module/,loader: "style-loader!css-loader!less-loader", },

// <router-view></router-view>與寫(xiě)的位置無(wú)關(guān)

path.join(__dirname,'..');

this.$set(this, '屬性', '值')

?css scoped 僅本組件

對(duì)象可以存圖片。使用require即可。

images: {error: require('./toast-error.png'),success: require('./toast-success.png'),load: require('./toast-load.gif'),waiting: require('./toast-hourglass.svg') }

border。各屏幕分辨率不同出現(xiàn)的粗細(xì)問(wèn)題。

公共部分。寫(xiě)成組件。利用傳參改變樣式/內(nèi)容。

Ajax。axios。

跨域問(wèn)題的解決：1.服務(wù)器端協(xié)助配置。2.jsonp。3.devServer配置代理。

能用data數(shù)據(jù)解決的問(wèn)題，不用方法解決。如取反。長(zhǎng)度。是否空/false/true。（Vue是數(shù)據(jù)驅(qū)動(dòng)而不是結(jié)構(gòu)驅(qū)動(dòng)）

v-bind:style src to ...

路由傳參。$route。

歷史記錄切換。router-link to/:to或者router.push()/router.replace()

#router.push(location) 導(dǎo)航到不同的 URL

// 聲明式 <router-link :to="...">// 編程式 router.push(...)// 字符串 router.push('home')// 對(duì)象 router.push({ path: 'home' })// 命名的路由 router.push({ name: 'user', params: { userId: 123 }})// 帶查詢參數(shù)，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})

#router.replace(location) 它不會(huì)向 history 添加新記錄，而是替換掉當(dāng)前的 history 記錄。

// 聲明式 <router-link :to="..." replace>// 編程式 router.replace(...)

#router.go(n) 在 history 記錄中向前或者后退多少步，類似 window.history.go(n) 值可以正可以負(fù)

#綜合使用

const router = new VueRouter({routes: [{path: '/user/:userId',name: 'user',component: User}] })<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> router.push({ name: 'user', params: { userId: 123 }})

這兩種方式都會(huì)把路由導(dǎo)航到 /user/123 路徑。

// 命名視圖

// https://router.vuejs.org/zh-cn/essentials/named-views.html

// https://jsfiddle.net/posva/6du90epg/

// 有時(shí)候想同時(shí)（同級(jí)）展示多個(gè)視圖，而不是嵌套展示，例如創(chuàng)建一個(gè)布局，有 sidebar（側(cè)導(dǎo)航）和 main（主內(nèi)容）兩個(gè)視圖，這個(gè)時(shí)候命名視圖就派上用場(chǎng)了。

// 你可以在界面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口。如果 router-view 沒(méi)有設(shè)置名字，那么默認(rèn)為 default。

<router-view class="view one"></router-view><router-view class="view two" name="a"></router-view><router-view class="view three" name="b"></router-view>

// 一個(gè)視圖使用一個(gè)組件渲染，因此對(duì)于同個(gè)路由，多個(gè)視圖就需要多個(gè)組件。確保正確使用 components 配置（帶上 s）：

const router = new VueRouter({routes: [{path: '/',components: {default: Foo,a: Bar,b: Baz}}] })

重定向和別名

切換時(shí)清空歷史記錄。數(shù)據(jù)丟失。sessionStorage。

相對(duì)路徑。

append。concat。

渲染成某個(gè)標(biāo)簽。tag

可以在router-link內(nèi)嵌套其他內(nèi)容。

類型都是Object

$route.params（一個(gè) key/value 對(duì)象，包含了動(dòng)態(tài)片段和全匹配片段，如果沒(méi)有路由參數(shù)，就是一個(gè)空對(duì)象。）

$route.query（一個(gè) key/value 對(duì)象，表示 URL 查詢參數(shù)。例如，對(duì)于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒(méi)有查詢參數(shù)，則是個(gè)空對(duì)象。）

<div><router-link :to="{ name: 'Hello' , params: { userId: 123 }}">click1</router-link> </div><div><router-link :to="{ path: 'hello' , query: {show: 2}}">click2</router-link> </div>console.log(this.$route.params.userId)console.log('top is params, bottom is query')console.log(this.$route.query.show)

?watch：

watch: {'$route' (to, from) {// 對(duì)路由變化作出響應(yīng)...} }

v-show和v-if 。v-if為假直接不渲染。v-show為假display none。

當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)。

個(gè)人建議：外容器overflow hidden，內(nèi)容器overflow scroll。

過(guò)渡效果：

<transition name="fade"></transition>
.fade-enter-active, .fade-leave-active {-webkit-transition: opacity .7s;transition: opacity .7s; }.fade-enter, .fade-leave-active {opacity: 0 }

路由鉤子：判斷從哪個(gè)路由過(guò)來(lái)，到哪個(gè)路由。然后跳轉(zhuǎn)到哪個(gè)路由。（全局鉤子。局部鉤子。）

component頁(yè)面內(nèi)也可以監(jiān)聽(tīng)路由。

滾動(dòng)行為。歷史記錄之間切換。頁(yè)面位置。返回對(duì)象。

scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 } }

錨點(diǎn)的實(shí)現(xiàn)。通過(guò)scrollTop。或滾動(dòng)行為。

路由元信息。路由嵌套。

懶加載。

4、在異步加載頁(yè)面中載嵌入異步加載的組件時(shí)對(duì)頁(yè)面是否會(huì)有渲染延時(shí)影響？

答：會(huì)，異步加載的組件將會(huì)比頁(yè)面中其他元素滯后出現(xiàn)，頁(yè)面會(huì)有瞬間閃跳影響；

解決方案：因?yàn)樵谑状渭虞d組件的時(shí)候會(huì)有加載時(shí)間，出現(xiàn)頁(yè)面滯后，所以需要合理的進(jìn)行頁(yè)面結(jié)構(gòu)設(shè)計(jì)，避免首次出現(xiàn)跳閃現(xiàn)象；

At all:

　　1、路由頁(yè)面以及路由頁(yè)面中的組件全都使用懶加載

　　優(yōu)點(diǎn)：（1）最大化的實(shí)現(xiàn)隨用隨載

　　　　　（2）團(tuán)隊(duì)開(kāi)發(fā)不會(huì)因?yàn)闇贤▎?wèn)題造成資源的重復(fù)浪費(fèi)　　　　

　　缺點(diǎn)：（1）當(dāng)一個(gè)頁(yè)面中嵌套多個(gè)組件時(shí)將發(fā)送多次的http請(qǐng)求，可能會(huì)造成網(wǎng)頁(yè)顯示過(guò)慢且渲染參差不齊的問(wèn)題

　　2、路由頁(yè)面使用懶加載，而路由頁(yè)面中的組件按需進(jìn)行懶加載, 即如果組件不大且使用不太頻繁, 直接在路由頁(yè)面中導(dǎo)入組件, 如果組件使用較為頻繁使用懶加載

　　優(yōu)點(diǎn)：（1）能夠減少頁(yè)面中的http請(qǐng)求，頁(yè)面顯示效果好

　　缺點(diǎn)：（2）需要團(tuán)隊(duì)事先交流，在框架中分別建立懶加載組件與非懶加載組件文件夾

　　3、路由頁(yè)面使用懶加載，在不特別影響首頁(yè)顯示延遲的情況下，根頁(yè)面合理導(dǎo)入復(fù)用組件，再結(jié)合方案2

　　優(yōu)點(diǎn)：（1）合理解決首頁(yè)延遲顯示問(wèn)題

　　　　　（2）能夠最大化的減少http請(qǐng)求，且做其他他路由界面的顯示效果最佳

　　缺點(diǎn)：（1）還是需要團(tuán)隊(duì)交流，建立合理區(qū)分各種加載方式的組件文件夾

export default new Router({routes: [{path: '/',component: resolve => require(['components/Hello.vue'], resolve)},{path: '/about',component: resolve => require(['components/About.vue'], resolve)}] })

// solve：

// components/page

?<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷(xiāo)毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。

當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。

主要用于保留組件狀態(tài)或避免重新渲染。

?組件：

當(dāng)注冊(cè)組件（或者 props）時(shí)，可以使用 kebab-case ，camelCase ，或 TitleCase 。Vue 不關(guān)心這個(gè)。

// 在組件定義中 components: {// 使用 kebab-case 形式注冊(cè)'kebab-cased-component': { },// register using camelCase'camelCasedComponent': { },// register using TitleCase'TitleCasedComponent': { } }

在 HTML 模版中，請(qǐng)使用 kebab-case 形式：

<kebab-cased-component></kebab-cased-component><camel-cased-component></camel-cased-component><title-cased-component></title-cased-component>

當(dāng)使用字符串模式時(shí)，可以不受 HTML 的 case-insensitive 限制。

<my-component></my-component><myComponent></myComponent><MyComponent></MyComponent>

如果組件未經(jīng) slot 元素傳遞內(nèi)容，你甚至可以在組件名后使用 / 使其自閉合：

<my-component/>

當(dāng)然，這只在字符串模版中有效。因?yàn)樽蚤]的自定義元素是無(wú)效的 HTML ，瀏覽器原生的解析器也無(wú)法識(shí)別它。

component命名要求：

1. 檢查名稱是否與 HTML 元素或者 Vue 保留標(biāo)簽重名，不區(qū)分大小寫(xiě)。（常用HTML標(biāo)簽）

2. 檢查組件名稱是否以字母開(kāi)頭，后面跟字母、數(shù)值或下劃線。

使用 Virtual DOM 解析模板時(shí)，不會(huì)將模板中的標(biāo)簽名轉(zhuǎn)成小寫(xiě)，而是保留原始標(biāo)簽名。然后，使用原始的標(biāo)簽名進(jìn)行匹配組件。

例如， <MyComponent></MyComponent> 不會(huì)轉(zhuǎn)為為小寫(xiě)形式，直接以 MyComponent 為基礎(chǔ)開(kāi)始匹配。

當(dāng)然，匹配的規(guī)則依次匹配：原標(biāo)簽名、camelCase化的標(biāo)簽名、PascalCase化的標(biāo)簽名。

//之前在 1.0 不能正常運(yùn)行的示例代碼，在 2.0 中可以正常運(yùn)行了： Vue.component('MyComponent', {template: '<div>hello, world</div>' })new Vue({el: '#app',template: '<MyComponent></MyComponent>' })

在 Vue 1.0 和 2.0 中還有一種定義組件模板的方式，即使用 DOM 元素。在這種情況下，解析模板時(shí)仍然會(huì)將標(biāo)簽轉(zhuǎn)為小寫(xiě)形式。所以下面的代碼，在 1.0 和 2.0 均不能正常運(yùn)行。

// index.html <div id="app"><MyComponent></MyComponent> </div>// main.js Vue.component('MyComponent', {template: '<div>hello, world</div>' })new Vue({el: '#app' })

?由于 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

為了解決第一類問(wèn)題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時(shí)也將觸發(fā)狀態(tài)更新：

// Vue.set Vue.set(example1.items, indexOfItem, newValue)// Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue)

為了解決第二類問(wèn)題，你也同樣可以使用 splice：

example1.items.splice(newLength)

?父組件給子組件傳參，通過(guò)props屬性。還可以定義類型

https://cn.vuejs.org/v2/guide/components.html#Prop-驗(yàn)證

除了以下定義一種類型的寫(xiě)法，還有多種類型，必傳且是某個(gè)類型，某個(gè)類型且有默認(rèn)值，某個(gè)類型但默認(rèn)值由一個(gè)工廠函數(shù)返回，或者是自定義

props: {username: String, }// 全局注冊(cè)的組件的寫(xiě)法： props: ['myMessage'],

子組件給父組件傳參，通過(guò)this.$emit('方法', '內(nèi)容')

vertical-align: top;

兩個(gè)span對(duì)齊 / 圖片和文字對(duì)齊 / inline-block元素?.......

?字體圖標(biāo)。

一行文字超出省略號(hào)：

white-space: nowrap overflow: hidden text-overflow: ellipsis

空白間隙去掉的方法：

font-size: 0;// 或者兩個(gè)標(biāo)簽之間緊貼著。

?filter類似濾鏡效果。模糊效果。

filter: blur(10px)

同上類似。模糊效果（僅對(duì)背景生效，僅限iOS系統(tǒng)）

backdrop-filter: blur(10px)

?type，給參數(shù) / 變量定義類型。

computed，內(nèi)容變時(shí)會(huì)更新，否則會(huì)緩存起來(lái)。

如果是傳參等方式得到值，需要判斷值是否為空，否則會(huì)報(bào)值為undefined的錯(cuò)。

使用變量 / 產(chǎn)量拼接內(nèi)容，而不使用字符串拼接內(nèi)容。

各子元素不固定寬 / 高，但是整個(gè)布局占固定值時(shí)，flex布局。盡量用block元素。

flex的默認(rèn)值為0 1 auto

flex是放大比例（flex-grow）縮小比例（flex-shrink）占據(jù)的空間（flex-basis）的簡(jiǎn)寫(xiě)屬性

可以填auto（相當(dāng)于 1 1 auto）和none（0 0 auto）

flex: 1（相當(dāng)于 1 1 0%）

使用flex屬性后，該元素最好添加width屬性，值為flex-basis定義的值。?

vue項(xiàng)目中，不用寫(xiě)CSS的兼容性代碼。

因?yàn)関ue-loader在編譯.vue文件的時(shí)候，使用了Postcss的工具，它會(huì)給有兼容性問(wèn)題的屬性添加兼容性代碼。

它是根據(jù)can i use官網(wǎng)寫(xiě)的代碼。

寫(xiě)在<style></style>內(nèi)才會(huì)生效。在html中添加style屬性是不會(huì)添加兼容性代碼的。

換行問(wèn)題：

v-html可以直接加<br>進(jìn)行換行，v-model中無(wú)效

例外：textarea標(biāo)簽使用v-model時(shí)，可以使用\r進(jìn)行換行

實(shí)現(xiàn)垂直居中的方式：

父元素： display: table，

子元素： display: table-cell;vertical-align: middle;
無(wú)論一行或多行。

刪除線效果 text-decoration: line-through

?iScroll

ref的使用：

在父頁(yè)面調(diào)用子組件的標(biāo)簽：

在父頁(yè)面中的組件上加ref。然后在子組件中的某個(gè)標(biāo)簽加ref。即可。

?nextTick

將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。

https://cn.vuejs.org/v2/api/#vm-nextTick

new Vue({// ... methods: {// ...example: function () {// 修改數(shù)據(jù)this.message = 'changed'// DOM 還沒(méi)有更新this.$nextTick(function () {// DOM 現(xiàn)在更新了// `this` 綁定到當(dāng)前實(shí)例this.doSomethingElse()})}} })

box-sizing: border-box

:disabled="type == '值'"

:class = name

name可以是computed

$dispatch 和 $broadcast在vue2.0中已經(jīng)棄用，推薦使用一個(gè)專用的狀態(tài)管理層如：Vuex 。

或者子組件和父組件之間相互傳參。

getBoundingClientRect用于獲取某個(gè)元素相對(duì)于視窗的位置集合。集合中有top, right, bottom, left等屬性。

點(diǎn)擊事件。取消冒泡。

v-on:click.stop="doThis"

阻止默認(rèn)事件。

v-on:click.prevent="doThis"

https://cn.vuejs.org/v2/guide/events.html#事件修飾符

判斷頁(yè)面來(lái)源。

https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

組件內(nèi)部的方法，命名建議以兩個(gè)下劃線開(kāi)頭

外部傳參方法等，不用兩個(gè)下劃線開(kāi)頭。

padding取%值，

> %，規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。

給按鈕加padding。方便點(diǎn)擊

或者整個(gè)部分可以點(diǎn)擊。

過(guò)濾：filter

// 計(jì)算屬性 computed: {evenNumbers: function () {return this.numbers.filter(function (number) {return number % 2 === 0})} }// 或者，你也可以在計(jì)算屬性不適用的情況下 (例如，在嵌套 v-for 循環(huán)中) 使用 method 方法： <li v-for="n in even(numbers)">{{ n }}</li> data: {numbers: [ 1, 2, 3, 4, 5 ] }, methods: {even: function (numbers) {return numbers.filter(function (number) {return number % 2 === 0})} }// ----------------- // 過(guò)濾器函數(shù)  {{ message | capitalize }}  <div v-bind:id="rawId | formatId"></div>// PS：為了在其他指令中實(shí)現(xiàn)更復(fù)雜的數(shù)據(jù)變換，你應(yīng)該使用計(jì)算屬性。new Vue({// ... filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}} })// 過(guò)濾器可以串聯(lián)： {{ message | filterA | filterB }}// 過(guò)濾器是 JavaScript 函數(shù)，因此可以接受參數(shù)： {{ message | filterA('arg1', arg2) }}// 這里，字符串 'arg1' 將傳給過(guò)濾器作為第二個(gè)參數(shù)， arg2 表達(dá)式的值將被求值然后傳給過(guò)濾器作為第三個(gè)參數(shù)。

https://cn.vuejs.org/v2/guide/list.html#顯示過(guò)濾-排序結(jié)果
https://cn.vuejs.org/v2/guide/syntax.html#過(guò)濾器

export 和 export default

http://es6.ruanyifeng.com/#docs/module#export-命令
http://es6.ruanyifeng.com/#docs/module#export-default-命令

切換組件時(shí)，希望保留組件的狀態(tài)時(shí)，加上keep-alive 即可

轉(zhuǎn)載于:https://www.cnblogs.com/hiuman/p/7066444.html

總結(jié)

以上是生活随笔為你收集整理的vue项目中遇到的一些问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

项目
Vue

上一篇： [设计模式][c++]状态切换模式
下一篇： MVC之排球比赛计分程序 ——（二）架构