vue小技巧

1.状态共享

多组件状态共享 vue.js 2.6 新增加的 Observable API可以处理一些简单的跨组件数据状态共享的情况

首先创建一个 store.js，包含一个 store和一个 mutations，分别用来指向数据和处理方法。

import Vue from "vue";

export const store = Vue.observable({ count: 0 });
export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

然后在 App.vue里面引入这个 store.js，在组件里面可以直接使用使用引入的数据和方法

<script>
import { store, mutations } from "./store";
export default {
  name: "App",
  computed: {
    count() {     
      return store.count;
    }
  },
  methods: {
    setCount: mutations.setCount
  }
};
</script>

2.长列表性能优化

vue会通过 object.defineProperty对数据进行劫持，来实现视图响应数据的变化，但有的数据不会有任何改变，不需要 vue来劫持我们的数据，这样的数据很多的时候，禁止 vue数据劫持，可以明显减少组件初始化的时间，通过 object.freeze方法来冻结一个对象，对象一旦被冻结就再也不能被修改了。这里的冻结指的是值不能被修改，但引用是可以被修改的。

3.去除多余的样式

purgecss库 中的purge()可以帮我们去除多余的样式，简化代码

4.作用域插槽

作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数
比如定义一个基础布局组件A，只负责布局，不管数据逻辑，然后另外定义一个组件B 负责数据处理，布局组件A 需要数据的时候就去 B 里面去取。假设，某一天我们的布局变了，我们只需要去修改组件A 就行，而不用去修改组件B，从而就能充分复用组件B 的数据处理逻辑 作用域插槽就能很好的完成这一操作
在子组件中，将数据作为slot元素的特性绑定：

<span>  
<slot v-bind:user="user">
    {{ user.lastName }}  
</slot>
</span>

在父组件引用的时候，就可以给 v-slot带一个值来定义我们提供的插槽 prop 的名字：

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

5.属性事件传递

v-bind和 v-on实现将加工过的属性一次性传递

6.函数式组件

函数式组件，即无状态，无法实例化，内部没有任何生命周期处理方法，非常轻量，因而渲染性能高，特别适合用来只依赖外部数据传递而变化的组件。

7.监听组件的生命周期

比如有父组件 Parent和子组件 Child，如果父组件监听到子组件挂载 mounted就做一些逻辑处理，可以通过在父组件引用的时候通过 @hook来监听即可，另外，created， updated等其它的生命周期事件也可以通过这种方式监听。