VUE初学踩坑记

一、vue查看版本的方法

网上大部分都是打开cmd输入Vue -V ，但这是Vue cli的版本并非Vue的版本@vue/cli 4.2.2

正确的命令是在项目目录下输入npm list vue,返回项目名 + 项目版本 + 路径 + -- [email protected]，@后为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>

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

不太会形容知道专业术语也欢迎评论一起共同学习就是这样能帮到你点个推荐收藏