vue 是一套用于构建用户界面的渐进式 JavaScript 框架. 与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用. Vue 的核心库只关注视图层, 方便与第三方库或既有项目整合.
下面我们来看一些 vue 开发小技巧:
一, 状态共享
使用 Vue 进行开发时, 随着项目的复杂化, 组件个数也逐渐增加, 此时我们就面临着一个问题 -- 多组件状态共享. 也许有人说这不是啥问题, Vuex 就可以解决啊.
是的, Vuex 可以解决多组件状态共享的问题, 但是如果此时我们的项目没有那么大那么复杂, 还要使用 Vuex 来解决这个问题吗? 答案是否定的, 因为这会导致代码繁琐冗余.
那该怎么办? 其实我们还可以通过 vue.js2.6 版本新增的 Observable API 来解决这个问题.
示例 1:Observable 实现多组件状态共享
a) 创建一个 store.JS, 包含一个 store 和一个 mutations, 分别用来指向数据和处理方法.
b) 在 App.vue 里面引入这个 store.JS, 使用引入的数据和方法.
二, 长列表性能优化
Vue 会通过劫持我们的数据, 进而实现视图响应数据的变化. 但有时候我们的数据不需要发生变化, 只是纯粹的数据展示, 此时 Vue 再进行数据劫持会大大增加组件初始化时间. 此时我们可以使用 object.freeze 方法来阻止 vue 劫持数据, 进而减少组件初始化时间.
示例 2:object.freeze 方法冻结 users 值
注意: object.freeze 方法冻结的只是 users 的值, 其引用并未被冻结.
三, 作用域插槽
所谓的作用域插槽, 就是父组件在调用子组件时给子组件传输一个插槽, 且该插槽必须放在 template 标签里边, 同时声明从子组件接收的数据放在一个自定义属性内, 并定义该数据的渲染方式.
那作用域插槽有什么用处呢?
比如项目中有一个 A 组件只负责布局不管数据逻辑, 另一个 B 组件负责数据处理, A 组件需要数据的时候就去 B 组件中取. 那当开发过程中我们的布局发生变化时, 我们只需要修改 A 组件即可, 而不需要修改 B 组件, 这样就能充分复用 B 组件的数据逻辑处理.
那了解了作用域插槽的用处, 接下来我们通过一个简单的小例子给大家讲解作用域插槽的使用方式.
示例 3: 使用 slot,slot-scope 实现作用域插槽
a) 创建一个 user.vue 组件, 将 user 数据绑定在 < slot > 元素上
b) 在父组件中引用 user 组件, 展示 user 数据的 firstName 数据, 此时给 v-slot 带一个值来定义我们提供的插槽 prop 的名字:
四, 属性事件传递
学过 react 的同学应该都知道 react 中的 {...this.props} 可以一次性传递属性. 那在 vue 中有没有这个功能呢? 当属性较多时, 不需要我们一个个去传递? 答案就是 vue 中的 v-bind 和 v-on.
示例 4:v-bind&v-on 实现属性事件传递
BaseList 组件只有基础的列表展示功能, 此时需要为其增加排序功能.
a) 创建一个高阶组件 SortList
五, 函数式组件
函数式组件是一种 stateless 和 instanceless 的组件, 它内部没有生命周期处理方式, 因而非常轻量, 渲染性极高, 当需要创建的组件只需要根据外部数据的变化而变化时, 就可以将其创建为函数式组件.
写法如下:
l 在 template 标签里面标明 functional
l 只接受 props 值
l 不需要 script 标签
示例 5: 创建函数
更多 vue 知识请关注 html 中文网 vue.JS 教程 https://www.html.cn/web/vue-js/ 栏目.
来源: http://www.css88.com/web/vue-js/15597.html