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等其它的生命周期事件也可以通过这种方式监听。
网友评论