vue 的使用技巧是什么? web 前端学习难度怎么样? Vue 是一套用于构建用户界面的渐进式框架, 是前端工程师必须要掌握的知识点. 在学完 html 和 CSS 样式以及 JS 基础知识后, 很多人会反应 Vue 学习难度大, 下面就给大家讲解几个有用的 Vue 使用技巧.
1, 状态分享
随着组件的细化, 你会遇到多组件状态共享的情况, Vue 可以解决这类问题, 但如果应用不够大, 为避免代码繁琐冗余, 最好不要使用它. 今天我们介绍的是
vue.js 2.6 新增加的 Observable API, 通过使用这个 API 我们可以应对一些简单的跨组件数据状态共享的情况.
首先我们将在组件外创建一个 store, 然后在 App.vue 组件里面使用 store.JS
提供的 store 和 mutation 方法, 同理其它组件也可以这样使用, 从而实现多个组件共享数据状态.
2, 去除多余的样式
随着项目越来越大, 书写的不注意, 不自然的就会产生一些多余的 CSS. 一旦项目大了以后, 多余的 CSS 会越来越多, 导致包越来越大, 从而影响项目运行性能, 所以有必要在正式环境去除掉这些多余的 CSS. 你可以借助 purgecss, 它支持
CLI,JavascriptApi,Webpack 等多种方式使用, 通过这个库, 我们可以很容易的去除掉多余的 CSS.
3, 长列表性能优化
Vue 会通过 object.defineProperty 对数据进行劫持, 来实现视图响应数据的变化, 然而有些时候我们的组件就是纯粹的数据展示, 不会有任何改变, 我们就不需要
Vue 来劫持我们的数据. 在大量数据展示的情况下, 这能够明显的减少组件初始化的时间, 那如何禁止 Vue 劫持我们的数据呢? 你可以通过 object.freeze 方法来冻结一个对象, 一旦被冻结的对象就再也不能被修改.
需要说明的是, 这里只是冻结 users 的值, 引用不会被冻结, 当我们需要 reactive 数据的时候, 我们可以重新给 users 赋值.
4, 函数式组件
函数式组件, 即无状态, 无法实例化, 内部没有任何生命周期处理方法, 非常轻量, 因而渲染性能高, 特别适合用来只依赖外部数据传递而变化的组件.
写法如下:
1) 在 template 标签里面标明 functional ;
2) 只接受 props 值;
3) 不需要 script 标签.
当然, 关于 Vue 的使用技巧还有很多, 比如监听组件的生命周期, 属性事件传递, 作用域插槽等. 如果你想快递进入前端行列, 选择专业的学习是很好的方式!
这里推荐一下我的前端学习交流扣 qun:784783012 , 里面都是学习前端的, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴. 2019 最新技术, 从企业招聘人才需求 到怎么学习前端开发, 和学习什么内容都有免费系统分享. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
点击: 加入
来源: http://www.jianshu.com/p/7c80ca3f76e9