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