一些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：创建函数

以上就是一些Vue开发小技巧的详细内容

一些Vue开发小技巧，让你开发更便捷相关推荐

java编码技巧_编码小技巧让java编程更便捷
经过一段时间的编码,程序员们或多或少会形成自己的编码习惯,好的习惯能帮助自己写出更好的代码,方便程序的维护.抱着侥幸心理,对"可能会出错"的代码没有做"防错性程序设计&q ...
日常安排php,PHP日常开发小技巧
PHP日常开发小技巧导语:PHP语言中,如果你懂得一些开发技巧,那么对你学PHP,会有很大的帮助.下面的是百分网小编为大家整理的PHP日常开发小技巧,希望对你能有所帮助. PHP批量取得checkb ...
Silverlight 游戏开发小技巧：动感小菜单2
Silverlight 游戏开发小技巧:动感小菜单2 动感小菜单其实是想模仿Apple的菜单按钮设计制作,但是画虎不成反类犬,看起来有点别扭,昨天各位园友提了这方面的建议,感觉太硬如果加入动画可能更好 ...
Silve“.NET研究”rlight 游戏开发小技巧：传说中的透视跑马灯
昨夜元宵佳节,各种灯会热闹非凡,伴随烟火灿烂好不热闹,可惜一点也没看着T_T,那就写一个跑马灯吧,可是跑马灯并不稀奇,各位高手们已经写过而且都各有特点,所以,写也要写点有特色的才好,游戏中经常能看到一 ...
一起谈.NET技术，Silverlight 游戏开发小技巧：动感小菜单
网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单, ...
Silverlight 游戏开发小技巧：轨迹跟随效果
Silverlight 游戏开发小技巧:轨迹跟随效果我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使 ...
Delphi三层开发小技巧:TClientDataSet的Delta妙用
Delphi三层开发小技巧:TClientDataSet的Delta妙用 Delphi做三层开发时,很多人都会在客户端放一个TClientDataSet,中间层远程数据模块就对应放一个TDataSet ...
极客技术专题【009期】：web技术开发小技巧
为什么80%的码农都做不了架构师?>>> 日期:2013-8-26 来源:GBin1.com 技术专题:Seajs介绍 (分享人:choaklin) 专题演讲稿:SeaJS的 ...
idea 设置jdk_IDEA开发小技巧～jdk问题
IDEA开发小技巧: objc[3248]: Class JavaLaunchHelper is implemented in both /Library/Java/JavaVirtualMachin ...

一些Vue开发小技巧，让你开发更便捷

一些Vue开发小技巧，让你开发更便捷相关推荐

最新文章

热门文章