hookEvent

给一个组件注入一个生命周期函数

<child @hook:updated="childUpdateHandle" />
Copy

这种写法常常用于给第三方组件的生命周期添加方法，比如第三方的table组件没有loading效果，我们可以给第三方组件添加mounted事件等。

组件使用this.$on绑定

vm.$on('hooks:created', cb)
vm.$on('hooks:created', cb)
Copy

这种写法使得代码的可读性增加，如遇到以下场景，我们需要在组件挂载完成的时候添加一个监听事件，等组件销毁等时候要删除该监听等事件。

export default {
  mounted() {
    // 监听窗口发生变化，resize组件
    window.addEventListener('resize', this.resizeHandle)
    // 通过hook监听组件销毁钩子函数，并取消监听事件
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.resizeHandle)
    })
  },
  updated() {},
  created() {},
  methods: {
    resizeHandle() {
      // ...
    }
  }
}
Copy

自定义组件使用v-model

有时候我们需要封装自己等输入框组件，那么v-model是必须的，在理解v-model之前我们需要了解平时所在原生input上使用v-model的原理。

<input v-model="searchText">
Copy

等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
Copy

当用在组件上时，v-model 则会这样：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>
Copy

为了让它正常工作，这个组件内的 input 必须：

• 将其 value attribute 绑定到一个名叫 value 的 prop 上
• 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

现在 v-model 就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>
Copy

强制vue实例渲染

由于数据嵌套过深，数据改变了，但是视图没有更新，可以使用
vm.$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

vm.$set( target, propertyName/index, value )

在实例创建之后添加新的属性到实例上，它不会触发视图更新。
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

this.$set(this.obj,'newPro','value')
Copy

组件二次封装，props传递与事件传递

对一个组件进行包装，我们要继承组件对属性与事件，那么**v-bind="$attrs"**与**v-on="$listeners"**将使封装变得简单。

将父组件的props传递到子组件

<template>
  <childComponent v-bind="$attrs" />
</template>
Copy

而不是

<template>
  <childComponent :prop1="prop1" :prop2="prop2" :prop="prop3" ... />
</template>
Copy

将父组件到事件监听传递到子组件

<template>
  <childComponentv-on="$listeners" />
</template>
Copy

深层选择器

如果你引入第三方组件中的页面使用scoped属性，那么想修改第三方组件的样式可以使用深层选择器 >>> /deep/ ::v-deep

示例

<style scoped>
>>> .vant-class {
  color: gray;
}

/deep/ .vant-class {
  color: gray;
}

::v-deep .vant-class {
  color: gray;
}
</style>
Copy