vue mianjs 引用css_7个有用的Vue开发技巧
来源 | https://juejin.im/post/5ce3b519f265da1bb31c0d5f
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)">+1button><button @click="setCount(count-1)">-1button>div>template><script>import { store, mutations } from "./store";export default {name: "App",computed: { count() {return store.count; } },methods: {setCount: mutations.setCount }};script><style>
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(https://link.juejin.im/?target=https%3A%2F%2Fcodesandbox.io%2Fs%2Fzkq258ly4)
<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">herea>.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
标签的样式都没了
4 、作用域插槽
利用好作用域插槽可以做一些很有意思的事情,比如定义一个基础布局组件A,只负责布局,不管数据逻辑,然后另外定义一个组件B负责数据处理,布局组件A需要数据的时候就去B里面去取。假设,某一天我们的布局变了,我们只需要去修改组件A就行,而不用去修改组件B,从而就能充分复用组件B的数据处理逻辑,关于这块我之前写过一篇实际案例,可以点击这里查看。这里涉及到的一个最重要的点就是父组件要去获取子组件里面的数据,之前是利用slot-scope
,自vue 2.6.0起,提供了更好的支持 slot
和 slot-scope
特性的 API 替代方案。比如,我们定一个名为current-user
的组件:
{{ user.lastName }}
父组件引用current-user
的组件,但想用名替代姓(老外名字第一个单词是名,后一个单词是姓):
<current-user> {{ user.firstName }}current-user>
这种方式不会生效,因为user
对象是子组件的数据,在父组件里面我们获取不到,这个时候我们就可以通过v-slot
来实现。
首先在子组件里面,将user
作为一个元素的特性绑定上去:
<span><slot v-bind:user="user"> {{ user.lastName }}slot>span>
之后,我们就可以在父组件引用的时候,给v-slot
带一个值来定义我们提供的插槽 prop 的名字:
{{ slotProps.user.firstName }}
这种方式还有缩写语法,可以查看独占默认插槽的缩写语法,最终我们引用的方式如下:
{{ slotProps.user.firstName }}
相比之前slot-scope
代码更清晰,更好理解。
5、 属性事件传递
写过高阶组件的童鞋可能都会碰到过将加工过的属性向下传递的情况,如果碰到属性较多时,需要一个个去传递,非常不友好并且费时,有没有一次性传递的呢(比如react里面的{...this.props}
)?答案就是v-bind
和v-on
。举个例子,假如有一个基础组件BaseList
,只有基础的列表展示功能,现在我们想在这基础上增加排序功能,这个时候我们就可以创建一个高阶组件。
SortList。import BaseList from "./BaseList";// 包含了基础的属性定义import BaseListMixin from "./BaseListMixin";// 封装了排序的逻辑 import sort from "./sort.js";export default {props: BaseListMixin.props,components: { BaseList } };
可以看到传递属性和事件的方便性,而不用一个个去传递
6 、函数式组件
函数式组件,即无状态,无法实例化,内部没有任何生命周期处理方法,非常轻量,因而渲染性能高,特别适合用来只依赖外部数据传递而变化的组件。
写法如下:
在
template
标签里面标明functional
只接受
props
值不需要
script
标签
:items="['Wonderwoman', 'Ironman']"
:item-click="item => (clicked = item)"
/>
Clicked hero: {{ clicked }}
import List from "./List";export default {name: "App",data: () => ({ clicked: "" }),components: { List }};
{{ item }}
7 、监听组件的生命周期
比如有父组件Parent
和子组件Child
,如果父组件监听到子组件挂载mounted
就做一些逻辑处理,常规的写法可能如下:
// Parent.vue// Child.vuemounted() {this.$emit("mounted");}
这里提供一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过@hook
来监听即可,代码重写如下:
:mounted="doSomething"/>
当然这里不仅仅是可以监听mounted
,其它的生命周期事件,例如:created
,updated
等都可以,是不是特别方便~
vue mianjs 引用css_7个有用的Vue开发技巧相关推荐
- vue 项目引用static目录资源_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合 前端代码 KwgcFooter.vue 页面底部 KwgcHeader.vue 页面头部 KwgcLogin.vue 用户名: 密码: 登录 登录验证情况: kwgcHeader.vue 这 ...
- vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项
在web开发中,我们得使用到js(es6).css.html等技术,需要对资源文件管理,例如图片,同时还需要对性能.热加载等进行处理:这些功能都是可以在webpack中进行配置管理的,下面具体介绍说明 ...
- vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
- vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离 一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
- vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法 通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
- Vue 中引用第三方js总结
vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库 基础示例 1.把下载好的 ...
- vue嵌入html文件,vue如何引用独立的html模板文件?
刚接触vue,现在在写一个项目,想独立出html模板文件. 看教程,template都是用+拼的字符串,感觉好糟糕. 之后查到vue可以从html文件里根据id读取标签中的内容,并以此作为模板. ht ...
- Vue全家桶 - 电商后台管理系统项目开发实录(详)
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤 码云相关操作 2. ...
- 吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】
前言 之前使用过 Vue 开发后台.中台项目,也做过移动端 H5,弄过一点小的前端架构.每做一个项目都会收获了不一样的经验和理解.下面我把这些点点滴滴的经验总结下来,做一个系列的文章分享和阶段性的总结 ...
最新文章
- OnsenUI 前端框架(三)
- org.springframework.beans.factory.BeanCreationException:
- python3.6.1安装教程-在Linux上安装Python3.6.1
- 【基带传输】基于matlab的简易无线基带传输系统的仿真
- 科大讯飞副总裁刘鹏:人机交互的未来是人人交互?
- jvm的架构模型:基于栈式的架构和基于寄存器架构的特点
- [转]vb socket通信(TCP/UDP)一对一、多对一
- JavaWeb学习总结(十二):Session
- moment 24小时与12小时区别
- loadrunner——关联
- 四级网络工程师试题一
- php 处理raw数据,PHP用HTTP_RAW_POST_DATA来接收post过来的数据
- mui架构app-终章(我是怎样决定放弃mui)
- 我的回忆和有趣的故事 by李维(台湾)
- 分享!基于新浪API生成短链接的15个最佳平台
- 培养孩子讲故事的心得
- 游戏厂商利好消息:吃鸡人气下滑严重 新一轮瓜分游戏用户盘子来啦
- 【百度地图API】JS版本的常见问题
- 你不知道的雍正八年版《连平州志》
- 浅谈BIM技术在“智慧工地”建设中的应用
热门文章
- 为hadoop集群安装mapreduce
- thinkphp5 图片压缩旋转_有非常多的图片,该怎么制作PPT?
- python编程例子-几个Python小案例,爱上Python编程!
- 从零开始学习python编程-如何从零开始学python?
- python最适合做什么-python适合做什么开发_python未来发展怎么样
- python发音翻译-python实现在线翻译
- 学python要多久-python入门要学多久
- 语音识别揭秘,它与人工智能是什么关系?
- 一种多功能语音识别技术和音乐播放器相结合的方法
- makefile obj文件路径_makefile中包含的文件的路径