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：组件销毁后