Vue踩坑记

本文围绕Vue和Vuex开发展开,介绍了Vue实例生命周期钩子、计算属性问题及解决办法,如生命周期钩子报错可临时定义方法或注释代码,计算属性可将ajax设为同步;还提及组件Prop传值、block标签使用问题,Vuex Mutations多参数定义,以及Vue调试模式的设置要点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、Vue实例

生命周期钩子

  • 在开发程序的时候,有时候喜欢先不写实现,先将组成的部分定义好,但在写Vue生命周期钩子的时候出现了错误。错误信息vue.esm.js?3153:591 [Vue warn]: Error in created hook: “TypeError: handlers[i].call is not a function”,我的代码如下:
        created: {
          // 加载会员信息
        },
    
    解决方式:可以临时定义一个方法,或将生命周期整段注释。

计算属性

  • 页面中有一个下拉菜单,是通过ajax获取后台数据,动态生成的。后台请求可以正常返回,前台也可以接收到,但下拉菜单还是空白。调试时发现,ajax方法还没执行完毕,函数就返回了,所以下拉菜单为空。可以将ajax设置为同步,async: false

二、组件

Prop

  • 父组件需要向子组件传值,根据Vue官方Prop,子组件需要声明props,如下图:
    在这里插入图片描述
    我的子组件声明如下:

    <script>
      export default {
        name: 'bind-success-container',
        props: {
          bindModel: Object
        }
      }
    </script>
    

    父组件如下:
    在这里插入图片描述
    父子组件的类型都一致,但编译之后一直提示vue.esm.js?3153:591 [Vue warn]: Invalid prop: type check failed for prop “bindModel”. Expected Object, got Function.,猜测是因为父组件也是子组件,data是以函数进行定义,所以此处写的Object会默认处理成函数。后来将Object改成{}可以了。最终代码如下:
    在这里插入图片描述

block

当有多个组件需要进行控制的时候,我们一般做法也许会用block标签进行包裹,需要注意的是,**它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。**我在写hidden的时候,死活没效果,后来查看文档定义才发现。condation

三、Vuex

Mutations

  • 定义了一个Mutation,里面有两个业务参数,分别是用户姓名、用户手机号,用户姓名可以正常获取,但第二个参数无法取到,提示undefined,赋值是没问题的。查看Vuex官方API发现,如果是多个参数,需要将其以一个对象的形式定义。
    在这里插入图片描述

四、调试模式

在使用Vue开发的时候,需要进行调试,但如果没有进行相应设置,是无法看到Vue相关错误的。以下是需要进行设置的地方

  1. 开发环境下,不要使用vue.min.js,而是要使用vue.js

在这里插入图片描述

  1. 如果发现js是正确的,但Chrome的vue插件不显示,可查看以下选项是否有勾选

    在这里插入图片描述
    这个选项记得勾选,否则不会显示插件。

参考链接:
vue插件
vue安装说明

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值