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"}]}}

不太会形容 知道专业术语也欢迎评论 一起共同学习