1个状态共享

随着组件的细化，会出现多组件状态共享的情况。Vuex肯定能解决这种问题。但是，正如Vuex的官方文档所说，如果应用程序不够大，最好不要使用它，以避免繁琐和冗余的代码。今天我们介绍Vue.JS2.6中新加入的Observable api，通过使用这个api，可以处理一些简单的跨组件数据状态共享的情况。

在下面的例子中，我们将在组件外部创建一个store，然后在App.vue组件中使用store.js提供的store和突变方法，其他组件也可以用同样的方式使用，这样多个组件就可以共享数据状态。

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

从“Vue”导入Vue；export const store=Vue . observatory({ count : 0 })；导出常量突变={ setCount(count){ store . count=count；}};然后在App.vue中引入这个store.js，并在组件中使用引入的数据和方法

template div id=' app ' img width=' 25% ' src=' http :/assets/logo . png ' pcount : { { count } }/Pb button @ click=' setCount(count 1)' 1/button button @ click=' setCount(count-1)'-1/button/div/templatescript import { store，ventures } from '。/store '；导出默认{name: 'App '，computed : { count(){ return store . count；}}，methods: {setCount:突变. setCount:/scriptstyle你可以点击在线DEMO查看最终效果

2长列表性能优化

我们都应该知道vue通过object.defineProperty劫持数据，这样视图就可以响应数据的变化。然而，有时我们的组件是纯数据显示，不会有任何变化，所以我们不需要vue劫持我们的数据。在数据显示量较大的情况下，这样可以明显减少组件的初始化时间。我们如何禁止vue劫持我们的数据？您可以使用object.freeze方法来冻结对象。一旦冻结，对象就不能再被修改。

导出默认值{ data :()=({ users 3360 } })，async created(){ const users=wait axios . get('/API/users ')；this . user=object . freeze(用户)；}};另外需要注意的是，这里只冻结用户的值，不会冻结引用。当我们需要反应性数据时，我们可以为用户重新赋值。

导出默认值{ data :()=({ users 3360[]})，async created(){ const users=wait axios . get('/API/users ')；this . user=object . freeze(用户)；}，methods:{//更改值不会触发视图响应this.users[0]=newValue//更改引用仍会触发视图响应this.users=newArray } }3删除多余的样式

随着项目越来越大，粗心的编写自然会产生一些多余的css。小项目也可以。一旦项目变大，冗余的css就会越来越多，导致包越来越大，从而影响项目性能。因此，有必要在正式环境中去掉这些冗余的css。在这里，我们推荐一个purgecss库，它支持CLI、JavascriptApi、Webpack等方式。通过这个图书馆，我们可以很容易地使用它。

我做了一个测试，在线演示

h1你好香草！/h1 div我们使用Parcela捆绑此沙盒，您可以在此处找到关于Parcela的更多信息/a ./div body { font-family : sans-serif；} a { color: red} ul { Li { list-style : none；} }从“Purgecss”导入Purgecss；const Purgecss=new Purgecss({ content :[' * */*)。html']，css: ['**/*。CSS ']})；const purgecss result=purgecss . purge()；最终purgecssResult结果如下。可以看到多余的A和ul标签的样式都没有了

4个作用域插槽

利用好作用域槽可以做一些有趣的事情，比如定义一个基本的布局组件A，只负责布局，不考虑数据逻辑，然后定义另一个组件B负责数据处理。布局组件A需要数据时，会去B获取。假设有一天我们的布局改变了，我们只需要修改组件A而不是组件B，这样就可以充分重用组件B的数据处理逻辑，我之前写过一个关于这个的实际案例，可以点击这里查看。

这里涉及的最重要的一点是，父组件需要获取子组件中的数据。过去，使用插槽范围，自从vue 2.6.0以来，已经提供了支持插槽和插槽范围特性的更好的API替代方案。例如，让我们指定一个名为当前用户的组件：

span slot的父组件{ { user }。lastname}}/slot/span引用了current-user的组件，但想用名字替换姓氏(外国人名字的第一个字是名字，最后一个字是姓氏):

当前用户{{user。firstname}}/current-user不会生效，因为用户对象是子组件的数据，在父组件中我们是取不到的，所以此时可以通过v-slot来实现。

首先，在子组件中，将用户绑定为插槽元素的特征：

在跨度槽v-bind:之后，用户='用户' {user。lastname}}/slot/span，我们可以为v-slot带来一个值来定义我们提供的slot道具的名称：

current-user template v-slot 3360 default=' slot props ' { slot props。user . first name } }/template/current-user也有缩写语法。您可以查看独占默认插槽的缩写语法。最后，我们参考以下方法：

与之前的槽作用域代码相比，当前用户v-slot='槽道具' {槽道具。user.firstname}}/current-user更清晰更容易理解。

5属性事件交付

写过高级组件的童鞋，可能会遇到加工属性向下转移的情况。如果属性很多，需要一个一个转移，非常不友好，费时。是否有一次性转账(如{.这是什么？答案是v-bind和v-on。比如有一个基本组件BaseList，它只有基本的列表显示功能，现在我们要在这个基础上增加排序功能，此时我们可以创建一个高阶组件SortList。

！-sort list-template baselist v-bind=' $ props ' v-on=' $ listeners '！-.-/BaseList/template script从“”导入BaseList。/BaseList '；//包括从“”导入baselistmixin的基本属性定义。/baselistmixin '；//封装排序导入排序自的逻辑。/sort . js '；导出默认{ props: BaseListMixin.props，components: { BaseList } }/script可以看到传递属性和事件的便利性，而无需逐个传递它们

6个功能组件

功能组件是无状态的，无法实例化，没有内部的生命周期处理方法，非常轻量级，所以渲染性能很高，特别适合只依靠外部数据传输改变的组件。

行文如下：

1.在模板标签中标记功能

2.只接受道具价值

3.不需要脚本标签

！-app . vue-template div id=' app ' List : items='[' wonder wonder '，' iron man ']' : item-click=' item=(clicked=item)'/pclich hero : { { clicked } }/p/div/templatescript import List from '。/List '；导出默认{name: 'App '，data: ()=({ clicked: '' })，组件{ List } }/脚本！- List.vue功能组件-模板功能divp v-for=' item in props . items ' @ click=' props . item click(item)；{{ item }}/p/div/template7监控组件的生命周期

例如，有一个父组件父组件和一个子组件子组件。如果父组件监听装载的子组件，它将执行一些逻辑处理。传统的写法可能如下：

//parent . vuechild @ mounted=' dosoming '///child . vue mount(){ this。$emit('已安装')；}这里提供了一个非常简单的方法。子组件不需要任何处理，只需要在父组件引用它们时通过@hook进行监听。代码重写如下：

child @ hook : mounted=' do something '/当然，它不仅可以监视已挂载的，还可以监视其他生命周期事件，如创建和更新。是不是特别方便~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。