VUE初學踩坑記和Js操作Json的方法

VUE初學踩坑記

一、vue查看版本的方法

網上大部分都是打開cmd輸入Vue -V ，但這是Vue cli的版本 並非Vue的版本@vue/cli 4.2.2

正確的命令是在項目目錄下輸入npm list vue,返回項目名 + 項目版本 + 路徑 + -- vue@2.6.11，@后為vue的版本,

不知道為什么不在項目目錄下查不到 我記得我的vue也全局安裝了 希望有大佬可以告知。

二、[Vue warn]:You may have an i vue.runtime.esm.js?xxxx nfinte update loop in a component render function.

百度搜索為死循環錯誤 但一想自己也沒有寫監聽類的錯誤 又第一次用iview UI組件庫 input標簽輸入東西時很卡 只能去找找原因 終於在搜索出來b站的一個視頻Vue中踩過的坑 【infinite update loop】 里是講 一個數組[^sort]方法升序降序排序 直接用的原數組

我的大致理解(不保證正確)：

sort方法是在原數組(data中items)上排序 降序函數(descItems)觸發時改變了數組 升序函數(ascItems)又會改變數組 兩個函數變成了死循環 導致這個錯誤 以下是部分代碼 (升序代碼視頻作者沒有錄上 應該是這么寫的)

<span>降序</span>
<span v-for="(item,index) in descItems"
      :key="'desc' + index"
      ></span>

<span>升序</span>
<span v-for="(item,index) in ascItems"
      :key="'asc' + index"
      ></span>

data(){
    return{
        items:[
            {no: 1, name: "紅", color: "red"},
            {no: 2, name: "綠", color: "green"},
            {no: 3, name: "藍", color: "blue"},
        ]
    }
}
computed:{
    descItems(){
        return this.items.sort((a,b)->{
            return b.no - a.no
        })
    },
    ascItems(){
        return this.items.sort((a,b)->{
            return a.no - b.no
        })
    }
}

解決方法：

將this.items改為[...this.items]使用原數組的副本操作

奇怪的是我用一個sort方法排序也會無限循環 不清楚什么原因 用副本操作就不無限循環了 以下是代碼 希望有大佬可告知原因

html

<div v-for="(item,index) in sortitem(items)" :key="index"></div>

js

methods:{
    sortitem:function(itemlist){
        return itemlist.sort(this.up)
    }
    up:function(a,b){
        return a.id - b.id
    }
}

三、Js 生成/操作 Json

倒不算是坑 記錄一下方法 有更簡便的方法歡迎評論

export default new Vuex.Store({
    state:{
        datalist:[],
    	datajson:{},
		temporary:{},
    }
})

對象套對象 / 對象添加子對象

var _str = "Xiaoming"
var _obj = {"val":_str}
state.temporary.name = _obj
state.datajson = state.temporary

輸出結果 {"name":{"val":"Xiaoming"}}

對象套對象套列表套對象 / 對象 添加子對象 添加子對象 添加數組/列表 添加子對象

var _str = "Xiaoming"
var _obj = {"val":_str}
state.datalist.push(_obj)
_str = "Xiaohong"
state.datalist.push(_obj)
state.temporary.classes = {"list":state.datalist}
state.data.json = state.temporary

輸出結果為 {"name":{"val":"Xiaoming"},"classes":{"list":[{"val":"Xiaoming"},{"val":"Xiaohong"}]}}

不太會形容 知道專業術語也歡迎評論 一起共同學習