7个有用的Vue开发技巧

1 状态共享

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

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

首先创建一个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" 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结果如下,可以看到多余的aul标签的样式都没了

4 作用域插槽

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

这里涉及到的一个最重要的点就是父组件要去获取子组件里面的数据,之前是利用slot-scope,自vue 2.6.0起,提供了更好的支持 slotslot-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-bindv-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,其它的生命周期事件,例如:createdupdated等都可以,是不是特别方便~

参考链接:

  • vueTips
  • vuePost

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536445.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kewail-邮件短信接口的基础教程

短信接口接入流程开始接入手机短信接口接入操作流程&#xff1a;申请短信签名 → 申请短信模板 → 生成AccessKey → 下载DEMO/攒写接口调用文档 → 免费测试发送 → 购买发信量正式使用。一、申请短信签名接入API接口&#xff0c;通过1069通道发送验证码等短信&#xff0c;必须…

传百度无人车计划分拆,百度回复:不实信息,目前未有分拆计划

据《财经》报道&#xff0c;百度无人车项目正在筹备分拆(spin off)当中&#xff0c;且正在寻找外部投资机构融资。一位接近百度无人车项目人士对《财经》表明&#xff0c;分拆就是时间问题。对于无人车项目分拆一事&#xff0c;百度对 36 氪表示&#xff0c;媒体报道不实。目前…

又见回文

又见回文 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description “回文串”是一个正读和反读都一样的字符串&#xff0c;比如“level”或者“noon”等等就是回文串。现在呢&#xff0c;就是让你判断输入的字符串是否是回文串。 Inpu…

Fighting_小银考呀考不过四级【递推】

Fighting_小银考呀考不过四级 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description 四级考试已经过去好几个星期了&#xff0c;但是小银还是对自己的英语水平担心不已。 小银打算好好学习英语&#xff0c;争取下次四级考试和小学弟小…

从xml中返回的对象,和new 返回的对象时不同的。

public BigDecimal getTax() {return tax null ? BigDecimal.ZERO : tax;} 这是自定义的一个类 对null 做出了处理。 但是如果是直接从xml 查询返回的该对象&#xff0c; tax() 字段还是会产生null <resultMap id"twoToNine" type"" ><result …

三国佚事——巴蜀之危【递推】

三国佚事——巴蜀之危 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description 话说天下大势&#xff0c;分久必合&#xff0c;合久必分。。。却道那魏蜀吴三国鼎力之时&#xff0c;多少英雄豪杰以热血谱写那千古之绝唱。古人诚不我欺…

HTTP Authentication(HTTP认证)(转)

HTTP协议规范中有两种认证方式&#xff0c;一种是Basic认证&#xff0c;另外一种是Digest认证&#xff0c;这两种方式都属于无状态认证方式&#xff0c;所谓无状态即服务端都不会在会话中记录相关信息&#xff0c;客户端每次访问都需要将用户名和密码放置报文一同发送给服务端&…

们--加强斐波那契【递推】

们--加强斐波那契 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description 对于斐波那契数列想必各位已经见过了。这里给出一个加强版。 F[i] i (i < 3); F[i] F[i-1] F[i-2] F[i-3](i > 4); Input 多组输入。每组输入一…

inux CentOS 7 修改内核启动默认顺序

2019独角兽企业重金招聘Python工程师标准>>> inux CentOS 7 修改内核启动默认顺序 2018年12月07日 09:53:32 XueShengke 阅读数&#xff1a;781 转载于&#xff1a;21运维 Linux CentOS 7.X 如何修改内核启动默认顺序 我们知道&#xff0c;centos 6.x是通过/etc/gr…

快速掌握ajax!

ajax是什么&#xff1f;ajax——asynchronous JavaScript and xml&#xff1a;异步的js和xml它能使用js访问服务器&#xff0c;而且是异步访问服务器给客户端的响应一般是整个页面&#xff0c;一个html完整页面&#xff01;但在ajax中因为是局部刷新&#xff0c;那么服务器就不…

锁底层之内存屏障与原语指令

Java内存模型1&#xff0e;工作内存和主内存Java内存模型规定所有的变量都存储在主内存中&#xff08;JVM内存的一部分&#xff09;&#xff0c;每个线程有自己独立的工作内存&#xff0c;它保存了被该线程使用的变量的主内存复制。线程对这些变量的操作都在自己的工作内存中进…

微信点击链接,用默认浏览器中打开指定网址链接!

2019独角兽企业重金招聘Python工程师标准>>> 最近有客户咨询&#xff0c;自己的链接在微信种推广&#xff0c;经常会被无缘无故封杀&#xff0c;有没有一种功能&#xff0c;用户在微信中点击我们推广的链接&#xff0c;可以自动强制跳转到手机默认浏览器中打开指定的…

elasticsearch存储空间不足导致索引只读,不能创建

问题描述 1.添加数据时&#xff0c;报错&#xff0c;原因是&#xff0c;一旦在存储超过95&#xff05;的磁盘中的节点上分配了一个或多个分片的任何索引&#xff0c; 该索引将被强制进入只读模式 ClusterBlockException[blocked by: [FORBIDDEN/12/index read-only / allow del…

java版spring cloud+spring boot 社交电子商务平台:服务消费(基础)

使用LoadBalancerClientSpring cloud b2b2c电子商务社交平台源码请加企鹅求求&#xff1a;一零三八七七四六二六。在Spring Cloud Commons中提供了大量的与服务治理相关的抽象接口&#xff0c;包括DiscoveryClient、这里我们即将介绍的LoadBalancerClient等。对于这些接口的定义…

Monthly Expense【二分】

B - Monthly Expense POJ - 3273 Farmer John is an astounding accounting wizard and has realized he might run out of money to run the farm. He has already calculated and recorded the exact amount of money (1 ≤ moneyi ≤ 10,000) that he will need to spend …

关于HTTP协议,一篇就够了

原文地址&#xff1a;https://www.cnblogs.com/ranyonsue/p/5984001.html HTTP简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写,是用于从万维网&#xff08;WWW:World Wide Web &#xff09;服务器传输超文本到本地浏览器的传送协议…

Oracle关联查询-数据类型不一致问题 ORA-01722: 无效数字

一、存在表A和表B&#xff0c;都包含字段user_no&#xff0c;但数据类型不一致&#xff0c;如下&#xff1a; create table A ( user_id varchar2(20), user_no number(12,0), xxx ); create table B ( user_name varchar2(60), user_no varchar2(20), xxx ); 二、现有某项业务…

1096: 字符逆序

1096: 字符逆序 Time Limit: 1 Sec Memory Limit: 64 MB Submit: 2017 Solved: 1059 [Submit][Status][Web Board] Description 将一个字符串str的内容颠倒过来&#xff0c;并输出。str的长度不超过100个字符。 Input 输入包括一行。 第一行输入的字符串。 Output 输出…

Ajax_Apache访问资源文件的权限配置、资源存放路径配置、配置虚拟主机、动态网站静态网站区别...

1、配置资源的访问权限 修改配置文件&#xff1a;httpd.conf 文件 改完之后要重启 2、切换资源默认存放目录www 修改配置文件httpd.conf 文件中的存放目录 3、Apache是否能够同时支持多个站点 Apache能否支持通过不同的域名访问不同的站点 可以 做法&#xff1a;配置虚拟主机…

Public Sale【博弈】

Public Sale Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 10573 Accepted Submission(s): 6257 Problem Description 虽然不想&#xff0c;但是现实总归是现实&#xff0c;Lele始终没有逃过退学的命运&am…