Vue的使用注意事項

阿新 • • 發佈：2021-10-11

這篇文章是我在工作中使用vue遇到的問題做的簡單彙總，希望能對看到這篇文章的你有所幫助

vue中給陣列中的物件,新增使vue監聽的屬性

不能使用直接遍歷設定的方法

this.arr.forEach(item => {
  item.showEditBtn = true
})

要使用$set的方法

this.arr.forEach(item => {
  this.$set(item, 'showEditBtn', true)
})

或者使用 splice+ Object.assign() 方法

注意點：目標物件要使用一個新的空物件，將目標和原物件一起混入到新的物件中，這樣新 property才會觸發更新

同時：陣列要觸發狀態更新，不使用set的情況下要使用splice方法觸發陣列的更新

this.arr.forEach((item , index) => {
 splice(index, 1, Object.assign({}, data, keyValue));
    //或者
    tableData.splice(index, 1, { ...data, ...keyValue });
})
//注意
//直接使用data= Object.assign({}, data, keyValue)
//會使資料在棧中引用的地址發生改變
//但是使陣列中的引用地址還是原來的地址
//會導致陣列不會發生任何改變 只是data這個變數的地址引用發生了改變

參考文件：對於物件對於陣列

v-if 使用時注意 vue會將一樣的元素複用需要加key解決

在下面的案例中即使渲染出返回按鈕因為下面的每個else元素都一樣但是返回依然不現實因為複用了下面的元素樣式display: none; 需要在不需要複用的元素上加key 解決

vue原文連結

   <div class="top-button" v-if="isView">
    <el-button type="primary" plain @click="isView = false" icon="iconfont iconfont-hcm-back">返回</el-button>
   </div>
   <div class="top-button" v-else-if="isEdit === false">
    <el-button type="primary" plain @click="onNewPayment" icon="iconfont iconfont-hcm-add" v-btn:edit="$route.query"
     >新建</el-button
    >
    <el-button
     type="primary"
     icon="iconfont iconfont-xinchou-fabu"
     plain
     @click="onPublish(true)"
     v-btn:edit="$route.query"
     >釋出</el-button
    >
    <el-button
     type="primary"
     icon="iconfont iconfont-xinchou-quxiaofabu"
     plain
     @click="onPublish(false)"
     v-btn:edit="$route.query"
     >取消釋出</el-button
    >
    <el-button type="primary" plain @click="onClickCancelPublish" v-btn:edit="$route.query">設定啟動時間</el-button>
    <el-button
     type="primary"
     plain
     @click="$refs.changeLogDialog.open(currentNode.data.id, false)"
     v-btn:view="$route.query"
     >檢視變更記錄</el-button
    >
   </div>

   <div class="top-button" v-else-if="isEdit">
    <el-button type="primary" plain @click="onEditSave" icon="iconfont iconfont-hcm-save">儲存</el-button>
    <el-button type="primary" plain @click="onEditCancel" icon="iconfont iconfont-hcm-delete">取消</el-button>
   </div>
  </el-header>

vue樣式：scoped 使用

深度作用選擇器

如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子元件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述程式碼將會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之類的前處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

參考： vue-loader官方文件-深度作用選擇器

Vue 中的v-bind 使用問題

在vue中使用v-bind 繫結物件時需要注意：v-bind繫結值不會覆蓋之前的屬性

<input type="text" class="test" :disabled="false" v-bind="{ disabled: true, class: 'test3' }" />
<!-- 上面的程式碼disabled顯示的還是false 但是class可以進行合併 顯示：class="test test3" -->
<input 
   type="text" 
   class="test" 
   :class="'test2'" 
   :disabled="false" 
   v-bind="{ disabled: true, class: 'test3' }"
   />
<!--注意： class 只能合併一次  最後顯示 class="test test2"-->

模板 v-bind繫結值的變數名為class 報 'v-bind' directives require an attribute value.eslint

在模板中繫結的名稱不要用class 作為命名否則eslint會報'v-bind' directives require an attribute value.eslint

$attrs 可以獲取任何繫結在元件上的屬性但（ porp中的屬性和 class 和 style 除外）

vue-property-decorator 注意事項（ts專案中）

介紹連結[https://segmentfault.com/a/1190000019906321]

1.新建元件必須加@Component 否則元件會怎樣都不現實

router 傳參注意事項

路由傳參query 和 params 顯示到位址列形式的注意不要超長，否則瀏覽器會報413錯誤，傳參需要按需傳送

prop 中預設值返回空物件

prop 中 default 預設值返回物件或陣列需要使用工廠函式，一般我們都會用箭頭函式簡寫

  props: {
    defaultText: {
      type: Array,
      default: ()=> []	   // 工廠函式返回空陣列
    },
    // 錯誤寫法
    defaultAttrs: {
      type: Object,
      default: ()=> {}    // 但是返回空物件就不能直接=>{} 這樣就代表函式的塊級作用域了 會報錯
    },
    // 正確寫法
     defaultAttrs: {
      type: Object,
      default: ()=> ({})    // 在{}外面包一層()即可
    },    
  },