首页 体育世界正文

四川人事,7个有用的Vue开发技巧,清蒸多宝鱼

1 状况同享

跟着组件的细化,就会遇到多组件状况同享的状况,Vuex当然能够处理这类问题,不过就像Vuex官方文档所说的,假如运用不够大,为防止代码繁琐冗余,最好不要运用它,今日咱们介绍的是vue.js 2.6新添加的Observable API ,经过运用这个api咱们能够应对一些简略的跨组件数据状况同享的状况。

如下这个比方,咱们将在组件外创立一个store,然后爱之奇观在App.vue组件里边运用store.js供给的store和mu吴印爱tation办法,同理其它组件也能够这样运用,然后完成多个组件同享数据状况。

首要创立一个store.js,包括一个store和一个mutations,别离用来指向数据和处理办法。

import Vue from "vue";
export const store = Vue.observ最强妖猴体系able({ cou320926nt: 0 });
export const muta残妾tions = {
setCount(count) 抿组词{
store.count = count;
}
};

然后在App.vue里边引进这个store.js,在组件里边运用引进的数据和办法



import { store, mutations } from "./store";
export default {
name: "App",
computed: {
count() {
return store.count;
}
},
methods: {
setCount: mutations.setCount
}
};




2 长列表功用优化

咱们应该都知道v翔嫂ue会经过object.defineProperty对数据进行绑架,来完成视图呼应数据的改动,但是有些时分咱们的组件便是朴实的数据展现,不会有任何改动,咱们就不需求vconverageue来绑架咱们的数据,在很多数据展现的状况下,这能够很明显的削减组件初始化的时刻,那怎样制止vue绑架咱们的数据呢676mk?能够经过object.freeze办法来冻住一个目标,一旦被冻住的目标就再也不能被修正了。

export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios四川人事,7个有用的Vue开发技巧,清蒸多宝鱼.get("/api/users");
this.users = Object.freeze(us四川人事,7个有用的Vue开发技巧,清蒸多宝鱼ers);
}
};

别的需求阐明的是,这儿仅仅冻住了users的值,引证不会被冻住,当咱们需求reactive数据的时分,咱们能够从头给users赋值。

export default {
data: () => ({
users: []
}),
asyn倚天后传之明教复仇c 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、Javascript郑伽姬Api、Webpack等多种办法运用,经过这个库,咱们能够很简略的去除去剩余的css。

Hello Vanilla!



We use Parcel to bundle this sandbox, you can find more info about Parcel
here.

仿制代码
body {
font-fa频组词mily: sans-serif;
}
a {
color: red;
}
ul {
li {
list-style: none;
}
}

import Purgecss from "purgecss";
const purgecss = new Purgecss({
content: ["**/*.html"],
css: ["**/*.cs四川人事,7个有用的Vue开发技巧,清蒸多宝鱼s"]
});
const purgecssResult = purgecss.purge();

终究发生的purbbin众乐博gecssResult成果如下,能够看到剩余的a和ul标签的款式都没了

4 效果域插槽

使用好效果域插槽能够做一些很有意思的工作,比方界说一个根底布局组件A,只担任布局,不论数据逻辑,然后别的界说一个组件B担任数四川人事,7个有用的Vue开发技巧,清蒸多宝鱼据处理,布局组件A需求数据的时分就去B杨一木里边去取。假定,某一天咱们的布局变了,咱们只需求去修正组件A就行,而不必去修正组件B,然后就能充沛复用组件B的数据处理逻辑。

这儿涉及到的一个最重要的点便是父组件要去获取子组件里边的数据,之前是使用slot-scope,自vue 2.6.0起,供给了更好的支撑 slot 和 slot-scope 特性的 API 代替计划。

比方,咱们定一个名为current-user的组件:


{{ user.lastName }}


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


{{ user.firstN四川人事,7个有用的Vue开发技巧,清蒸多宝鱼ame }}


这种办法不会收效,由于user目标是子组件的数据,在父组件里边咱们获取不到,这个时分咱们就能够经过v-slot 来完成。

首要在子组件里边,将user作为一个元素的特性绑定上去:



{{ user.lastName }}



之后,咱们就能够在父组件引证的时分,给v-slot带一个值来界说咱们供给的插槽 prop 的姓名:





这种办法还有缩写语法,能够检查独占默许插槽的缩写语法,终究咱们引证的办法如下:


{{ slotProps.user.firstName }}


比较之前slot-scope代码更明晰,更好了解。

5 特点事情传递

写过高阶组件的童鞋或许都会碰到过将加工过的特点向下传递的状况,假如碰到特点较多时,需求一个个去传递,十分不友好而且费时,有没有一次性传递的呢(比方react里边的{...this.props})?答案便是v-bind和v-on。

举个例新抚网子,假如有一四川人事,7个有用的Vue开发技巧,清蒸多宝鱼个根底组件BaseList,只要根底的列表展现功用,现在咱们想在这根底上添加排序功用,这个时分咱们就能够创立一个高阶组件SortList。




import BaseList f看逼rom "./BaseList";
// 包括了根底的属艺术人生导演溺水性界说
import BaseListMixin from "./BaseListMixin";
// 封装了排序的逻辑
import sort from "./sort.js";
export default {
props: BaseListMixin.props,
components: {
BaseList四川人事,7个有用的Vue开发技巧,清蒸多宝鱼
}
};



能够看到传递特点和事情的便利性,而不必一个个去传递

6 函数式组件

函数式组件,即无状况,无法实例化,内部没有任何生命周期处理办法,十分轻量,因此烘托功用高,特别合适用来只依靠外部数据传递而改动的组件。

写法如下:

  1. 在template标签里边标明functional
  2. 只承受props值
  3. 不需求script标签



import List from "./List";
export default {
name: 明格斯迪格斯怎样打"App",
data: () => ({ clicked: "" }),
components: { List }
};






7 监听组件的生命周期

比方有父组件Parent和子组件Child,假如父组件监听到子组件挂载mounted就做一些逻辑处理,惯例的写法或许如下:

// Parent.vue

// Child.vue
mounted() {
this.$emit("mounted");
}

这儿供给一种特别简略的办法,子组件不需求任何处理,只需求在父组件引证的时分经过@hook来监听即可,代码重写如下:



当然这儿不仅仅是能够监听mounted,其它的生命周期事情,例如:created,updated等都能够,是不是特别便利~

作者:skinner

链接:https://juejin.im/post/5ce3b519f265da1bb31c0d5f

来历:掘金

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。