VUE实践总结

发布时间:2019-05-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了VUE实践总结脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

本文主要总结了自己vue实际开发项目当中遇到的一些常见问题以及解决方案

VUE组件的data是function

当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!

解释:如我们所知,Object是引用类型,如果组件的data是Object就会影响到所有的实例

VUE如何传递参数给子组件

对于父组件来说等价于给子组件绑定了一个属性

// parent.vue
<childcomponent :isShow="parentParam"></childComponent>

然后子组件需要通过PRops接收到父组件的参数

// child.vue
props:{
    isShow:{
        type:Boolean,
        default:false
    }
}

VUE子组件如何传递参数给父组件

对于数据绕子组件执行一圈又回到父组件的需求是很常见的。

对于子组件来说,子组件处理完逻辑后通过$emit发送一个消息(事件)

// child.vue
methods:{
    LOGic(){
        this.$emit("someMsg",param1,param2);
    }
}

对于父组件来说,在子组件的"标签"上监听这个消息(事件)

// parent.vue
<childComponent :isShow="parentParam" @someMsg="someMsgHandler"></childComponent>

<script>
    export default{
        methods:{
            someMsgHandler(param1,param2){
                // do something
            }
        }
    }
</script>

VUE父组件调用子组件的function

// parent.vue
<childComponent :isShow="parentParam" ref="child"></childComponent>

<script>
    export default{
        methods:{
            callChild(){
                // 假设子组件有一个someThingHandler的函数
                this.$refs.child.someThingHandler();
            }
        }
    }
</script>

VUE修改数据视图不更新问题

新手经常会碰到这种情况,我明明改变了这个变量,但是视图竟然没有更新,说好的mvvm呢,黑人问号?

产生的原因很可能就是下面这句话了

因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

细纠一下原因就是,vue的响应式原理是get的时候依赖收集 (添加watcher),set的时候通知相关的Watcher进行视图更新,直接给对象添加一条数据自然没有这个过程,所以自然无法更新视图啦~

解决方案Vue.set( target, key, value ) (别名:vm.$set(target, key, value) )

VUE watch配置注意事项

computed的作用是监听数据变化计算出属性,watch的作用就是监听数据变化执行相应的逻辑,but这里需要注意一下

如果你监听的是一个对象,你需要这样

<script>
    export default{
        watch:{
            obj:{
                handler(oldValue,newValue){
                    // do something
                }
            },
            // 这句不能漏掉
            deep:true
        }
    }
</script>

然后还有,因为是对象,所以oldValue!==newValue行不通滴。实在要比较只能比较对象的具体值了。然后这里又容易触发另外一个问题,数据初始化的时候也会触发watch,so要做好临界判断哦~~

vue生命周期阶段详解

大致可以分为8个阶段

  • beforeCreate:创建前,这个阶段组件的$data和$el都为undefined
  • created:创建完成,这个阶段$data已经初始化完成
  • beforemount:$el依然为undefined,虚拟dom阶段
  • mounted:$el挂载值
  • beforeUpdate:组件更新前
  • updated:组件更新后
  • beforedestroy:组件销毁前
  • destroy:组件销毁后

脚本宝典总结

以上是脚本宝典为你收集整理的VUE实践总结全部内容,希望文章能够帮你解决VUE实践总结所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。