本文共 2812 字,大约阅读时间需要 9 分钟。
Vuex
当然可以解决这类问题,不过就像 Vuex
官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是vue.js 2.6新增加的 Observable API ,通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。 store
,然后在 App.vue
组件里面使用store.js提供的 store
和 mutation
方法,同理其它组件也可以这样使用,从而实现多个组件共享数据状态。 store
和一个 mutations
,分别用来指向数据和处理方法。 然后在App.vue
里面引入这个store.js,在组件里面使用引入的数据和方法
count:{
{count}}
我们应该都知道vue
会通过object.defineProperty
对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要vue
来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止vue
劫持我们的数据呢?可以通过object.freeze
方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。
另外需要说明的是,这里只是冻结了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 } };
随着项目越来越大,书写的不注意,不自然的就会产生一些多余的css,小项目还好,一旦项目大了以后,多余的css会越来越多,导致包越来越大,从而影响项目运行性能,所以有必要在正式环境去除掉这些多余的css,这里推荐一个库purgecss,支持CLI、JavascriptApi、Webpack等多种方式使用,通过这个库,我们可以很容易的去除掉多余的css。
我做了一个测试,在线DEMO(https://link.juejin.im/?target=https%3A%2F%2Fcodesandbox.io%2Fs%2Fzkq258ly4)
body { font-family: sans-serif; } a { color: red; } ul { li { list-style: none; } }
最终产生的purgecssResult
结果如下,可以看到多余的a
和ul
标签的样式都没了
slot-scope
,自vue 2.6.0起,提供了更好的支持 slot
和 slot-scope
特性的 API 替代方案。 current-user
的组件: 父组件引用current-user
的组件,但想用名替代姓(老外名字第一个单词是名,后一个单词是姓):
{ { user.firstName }}
这种方式不会生效,因为user
对象是子组件的数据,在父组件里面我们获取不到,这个时候我们就可以通过v-slot
来实现。
首先在子组件里面,将user
作为一个<slot>
元素的特性绑定上去:
{ { user.lastName }}
之后,我们就可以在父组件引用的时候,给v-slot
带一个值来定义我们提供的插槽 prop 的名字:
这种方式还有缩写语法,可以查看独占默认插槽的缩写语法,最终我们引用的方式如下:
相比之前slot-scope
代码更清晰,更好理解。
{...this.props}
)? 答案就是 v-bind
和 v-on
。 BaseList
,只有基础的列表展示功能,现在我们想在这基础上增加排序功能,这个时候我们就可以创建一个高阶组件。 SortList。
可以看到传递属性和事件的方便性,而不用一个个去传递
函数式组件,即无状态,无法实例化,内部没有任何生命周期处理方法,非常轻量,因而渲染性能高,特别适合用来只依赖外部数据传递而变化的组件。
写法如下:
在template
标签里面标明functional
只接受props
值
不需要script
标签
Clicked hero: {
{ clicked }}
比如有父组件Parent
和子组件Child
,如果父组件监听到子组件挂载mounted
就做一些逻辑处理,常规的写法可能如下:
这里提供一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过@hook
来监听即可,代码重写如下:
当然这里不仅仅是可以监听mounted
,其它的生命周期事件,例如:created
,updated
等都可以,是不是特别方便~
转载地址:http://ikfpi.baihongyu.com/