01、使用Vue开发时，常见的错误

1. Uncaught SyntaxError: Invalid shorthand property initializer
   原因是数据格式中的“=”写为“：”
   
2. POST(GET) http://127.0.0.1xxx 404(Not Found)错误
   原因是调用API时没有找到对应的接口
   

比如你想调用 地址为 login 的接口，然后出现了这个问题，然而明明有这个接口却调用不到
• 1

3. Avoid using non-primitive value as key, use string/number value instead.
   原因是v-for里面的key设重复了
   
4. Expected ‘v-bind:key’ directive to use the variables which are defined by the ‘v-for’ directive.eslint-plugin-vue
   必须要使用v-for中定义的变量 把index定义到names里面 v-bind:key="name.index"即可
   
5. 17:5 error data property in component must be a function vue/no-shared-com
   原因是data:{}这样写了
   · 实际上，在Vue工程里面，data应该是一个方法，通过return 返回数据·
   

<script>
export default {
    props:{
        add:{
            type:Function,
            requires:true
            }
    },
    data(){ 
        return{
            date:"",
            todo:"",
            isDone:false
        }
    },
    methods:{
        addtodo(){
            const {date,todo,isDone,add} = this;
            add({date,todo,isDone});
        }
    }
}
</script>

注意Vue工程与new Vue({ }) 的细微差别

6. Vue warn]: Error in callback for watcher “toDoList”: “TypeError: Cannot read property ‘call’ of undefined”
   翻译过来就是： 页面报错显示：[Vue warn]: Error in callback for watcher “formManageDevice”: “TypeError: Cannot read property ‘call’ of undefined”，翻译过来为监视器“xx”的回调错误：“TypeError：无法读取未定义的属性‘call’”

• 错误代码
• 错误原因，Vue 监视提供的方法名为handler而不是handle ，注意区分

watch:{
        toDoList:{
            deep:true,
            handle:function(value){
                console.log("开始存储");
                window.localStorage.setItem("toDoList",JSON.stringify(value));
            }
        }
    }

• 正确代码

watch:{
        toDoList:{
            deep:true,
            handler:function(value){
                console.log("开始存储");
                window.localStorage.setItem("toDoList",JSON.stringify(value));
            }
        }
    }

7、Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/Home/msg/msg_detail/?id=2"

• 问题描述：重复点击导航时，控制台出现报错
• 解决方法

• 在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题。

toMenu (item) {
if (this.$route.path !== item.url) {
this.$router.push({ path: item.url })
}

}

```

* 使用try-catch捕获错误，使之不显示在控制台

this.$router.push(route).catch(err => {
  console.log('输出报错',err)
})
  ```