VUE开发实践总结

发表于 | 阅读次数

前言

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

VUE 组件的 data 是 function

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

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

VUE 如何传递参数给子组件

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

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

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

1
2
3
4
5
6
7
// child.vue
props:{
    isShow:{
        type:Boolean,
        default:false
    }
}

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

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

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

1
2
3
4
5
6
// child.vue
methods:{
    logic(){
        this.$emit("someMsg",param1,param2);
    }
}

对于父组件来说，在子组件的”标签“上监听这个消息（事件）

1
2
3
4
5
6
7
8
9
10
11
12
// parent.vue
<childComponent :isShow="parentParam" @someMsg="someMsgHandler"></childComponent>

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

VUE 父组件调用子组件的 function

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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 这里需要注意一下

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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：组件销毁后