5个Vue开发小技巧

vue

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。

下面我们来看一些vue开发小技巧：

一、状态共享

使用Vue进行开发时，随着项目的复杂化，组件个数也逐渐增加，此时我们就面临着一个问题——多组件状态共享。也许有人说这不是啥问题，Vuex就可以解决啊。

是的，Vuex可以解决多组件状态共享的问题，但是如果此时我们的项目没有那么大那么复杂，还要使用Vuex来解决这个问题吗？答案是否定的，因为这会导致代码繁琐冗余。

那该怎么办？其实我们还可以通过vue.js2.6版本新增的Observable API来解决这个问题。

示例1：Observable实现多组件状态共享

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

b) 在 App.vue里面引入这个 store.js，使用引入的数据和方法。

二、长列表性能优化

Vue会通过劫持我们的数据，进而实现视图响应数据的变化。但有时候我们的数据不需要发生变化，只是纯粹的数据展示，此时Vue再进行数据劫持会大大增加组件初始化时间。此时我们可以使用object.freeze方法来阻止vue劫持数据，进而减少组件初始化时间。

示例2：object.freeze方法冻结users值

注意：object.freeze方法冻结的只是users的值，其引用并未被冻结。

三、作用域插槽

所谓的作用域插槽，就是父组件在调用子组件时给子组件传输一个插槽，且该插槽必须放在template标签里边，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。

那作用域插槽有什么用处呢？

比如项目中有一个A组件只负责布局不管数据逻辑，另一个B组件负责数据处理，A组件需要数据的时候就去B组件中取。那当开发过程中我们的布局发生变化时，我们只需要修改A组件即可，而不需要修改B组件，这样就能充分复用B组件的数据逻辑处理。

那了解了作用域插槽的用处，接下来我们通过一个简单的小例子给大家讲解作用域插槽的使用方式。

示例3：使用slot、slot-scope实现作用域插槽

a) 创建一个user.vue组件，将user数据绑定在<slot>元素上

b) 在父组件中引用 user组件，展示user数据的firstName数据，此时给 v-slot带一个值来定义我们提供的插槽 prop 的名字：

四、属性事件传递

学过react的同学应该都知道react中的{…this.props}可以一次性传递属性。那在vue中有没有这个功能呢？当属性较多时，不需要我们一个个去传递？答案就是vue中的v-bind和v-on。

示例4：v-bind&v-on实现属性事件传递

BaseList组件只有基础的列表展示功能，此时需要为其增加排序功能。

a) 创建一个高阶组件SortList

五、函数式组件

函数式组件是一种stateless和instanceless的组件，它内部没有生命周期处理方式，因而非常轻量，渲染性极高，当需要创建的组件只需要根据外部数据的变化而变化时，就可以将其创建为函数式组件。

写法如下：

l 在 template标签里面标明 functional

l 只接受 props值

l 不需要 script标签

示例5：创建函数

本文完~