实用的Vue开发技巧


Posted in Javascript onMay 30, 2019

1 状态共享

随着组件的细化,就会遇到多组件状态共享的情况,Vuex当然可以解决这类问题,不过就像Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是vue.js 2.6新增加的Observable API ,通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。

如下这个例子,我们将在组件外创建一个store,然后在App.vue组件里面使用store.js提供的store和mutation方法,同理其它组件也可以这样使用,从而实现多个组件共享数据状态。

首先创建一个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,在组件里面使用引入的数据和方法

<template>
<div id="app">
<img width="25%" src="./assets/logo.png">
<p>count:{{count}}</p>
<button @click="setCount(count+1)">+1</button>
<button @click="setCount(count-1)">-1</button>
</div>
</template>
<script>
import { store, mutations } from "./store";
export default {
name: "App",
computed: {
count() {
return store.count;
}
},
methods: {
setCount: mutations.setCount
}
};
</script>
<style>

你可以点击在线DEMO查看最终效果

2 长列表性能优化

我们应该都知道vue会通过object.defineProperty对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要vue来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止vue劫持我们的数据呢?可以通过object.freeze方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。

export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
};

另外需要说明的是,这里只是冻结了users的值,引用不会被冻结,当我们需要reactive数据的时候,我们可以重新给users赋值。

export default {
data: () => ({
users: []
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
},
methods:{
// 改变值不会触发视图响应
this.users[0] = newValue
// 改变引用依然会触发视图响应
this.users = newArray
}
};

3 去除多余的样式

随着项目越来越大,书写的不注意,不自然的就会产生一些多余的css,小项目还好,一旦项目大了以后,多余的css会越来越多,导致包越来越大,从而影响项目运行性能,所以有必要在正式环境去除掉这些多余的css,这里推荐一个库purgecss,支持CLI、JavascriptApi、Webpack等多种方式使用,通过这个库,我们可以很容易的去除掉多余的css。

我做了一个测试,在线DEMO

<h1>Hello Vanilla!</h1>
<div>
We use Parcel to bundle this sandbox, you can find more info about Parcel
<a href="https://parceljs.org" rel="external nofollow" target="_blank" rel="noopener noreferrer">here</a>.
</div>
body {
font-family: sans-serif;
}
a {
color: red;
}
ul {
li {
list-style: none;
}
}
import Purgecss from "purgecss";
const purgecss = new Purgecss({
content: ["**/*.html"],
css: ["**/*.css"]
});
const purgecssResult = purgecss.purge();

最终产生的purgecssResult结果如下,可以看到多余的a和ul标签的样式都没了

实用的Vue开发技巧

4 作用域插槽

利用好作用域插槽可以做一些很有意思的事情,比如定义一个基础布局组件A,只负责布局,不管数据逻辑,然后另外定义一个组件B负责数据处理,布局组件A需要数据的时候就去B里面去取。假设,某一天我们的布局变了,我们只需要去修改组件A就行,而不用去修改组件B,从而就能充分复用组件B的数据处理逻辑,关于这块我之前写过一篇实际案例,可以点击这里查看。

这里涉及到的一个最重要的点就是父组件要去获取子组件里面的数据,之前是利用slot-scope,自vue 2.6.0起,提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。
比如,我们定一个名为current-user的组件:

<span>
<slot>{{ user.lastName }}</slot>
</span>

父组件引用current-user的组件,但想用名替代姓(老外名字第一个单词是名,后一个单词是姓):

<current-user>
{{ user.firstName }}
</current-user>

这种方式不会生效,因为user对象是子组件的数据,在父组件里面我们获取不到,这个时候我们就可以通过v-slot
来实现。

首先在子组件里面,将user作为一个<slot>元素的特性绑定上去:

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

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

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

这种方式还有缩写语法,可以查看独占默认插槽的缩写语法,最终我们引用的方式如下:

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

相比之前slot-scope代码更清晰,更好理解。

5 属性事件传递

写过高阶组件的童鞋可能都会碰到过将加工过的属性向下传递的情况,如果碰到属性较多时,需要一个个去传递,非常不友好并且费时,有没有一次性传递的呢(比如react里面的{...this.props})?答案就是v-bind和v-on。
举个例子,假如有一个基础组件BaseList,只有基础的列表展示功能,现在我们想在这基础上增加排序功能,这个时候我们就可以创建一个高阶组件SortList。

<!-- SortList -->
<template>
<BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList>
</template>
<script>
import BaseList from "./BaseList";
// 包含了基础的属性定义
import BaseListMixin from "./BaseListMixin";
// 封装了排序的逻辑
import sort from "./sort.js";
export default {
props: BaseListMixin.props,
components: {
BaseList
}
};
</script>

可以看到传递属性和事件的方便性,而不用一个个去传递

6 函数式组件

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

写法如下:

1.在template标签里面标明functional

2.只接受props值

3.不需要script标签

<!-- App.vue -->
<template>
<div id="app">
<List
:items="['Wonderwoman', 'Ironman']"
:item-click="item => (clicked = item)"
/>
<p>Clicked hero: {{ clicked }}</p>
</div>
</template>
<script>
import List from "./List";
export default {
name: "App",
data: () => ({ clicked: "" }),
components: { List }
};
</script>
<!-- List.vue 函数式组件 -->
<template functional>
<div>
<p v-for="item in props.items" @click="props.itemClick(item);">
{{ item }}
</p>
</div>
</template>

7 监听组件的生命周期

比如有父组件Parent和子组件Child,如果父组件监听到子组件挂载mounted就做一些逻辑处理,常规的写法可能如下:

// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
this.$emit("mounted");
}

这里提供一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过@hook来监听即可,代码重写如下:

<Child @hook:mounted="doSomething"/>

当然这里不仅仅是可以监听mounted,其它的生命周期事件,例如:created,updated等都可以,是不是特别方便~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
安装vue-cli的简易过程
May 22 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
vue-router的两种模式的区别
May 30 #Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 #Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 #Javascript
全面分析JavaScript 继承
May 30 #Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 #Javascript
vue组件三大核心概念图文详解
May 30 #Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 #Javascript
You might like
php类
2006/11/27 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
js之onload事件的一点使用心得
2013/08/14 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
护理毕业生自我鉴定
2014/02/11 职场文书
作弊检讨书
2015/01/27 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python