开讲之前我先简单的自我介绍一下,本人自喻:flitrue,工作三年有余,在一家不知名的互联网企业担任前端架构师之职。
技术选型问题
近几年前端发展快速,很多同学抱怨学不动了,要回家喂猪。面对前端技术海量的“轮子”,我们犯了“选择困难症”,到底选择哪个技术学习?在实际项目中如何选择技术栈?
对于喜欢不断学习的同学,各种技术都想尝试一下,希望在实际的项目中使用。但是往往举步维艰,还没开始就扼杀在摇篮里了。如果我们每个项目都要选择不同都技术栈,可能我们的同事要疯掉,每个人会的东西不一样,学习能力也不一样,很难在实际中实施。而且,如果我们的项目每个的技术栈都不一样,老板都会疯掉吧,每次招人都需要问到各个技术会不会,有没有用过。发布都项目总得有人去维护,所以这样会提高很多成本,老板不疯才怪。
所以我们在实际开发中,还是要保持一致性。
约束一致性
我相信每个公司都会有一套开发规范,要求每个技术人掌握。具体分为如下两种:
技术选型
对于vue项目开发,很多项目都采用vue全家桶(vue + vue-router + vuex + axios …)。创建vue项目最简单的方式就是使用vue-cli
脚手架,约定好采用哪些特性(Babel
、TypeScript
、CSS Pre-processors
、Linter
等)。
代码规范
在开发中,首先我们要保证项目目录结构的清晰。然后我们还要保证文件夹和文件名命名规范,比如:src/components/Common/
公共组件的命名首字母要大写,里面的组件命名统一采用大驼峰命名。
// 项目目录
.
├── README.md
├── babel.config.js # babel配置文件
├── package.json # 依赖配置文件
├── dist # 打包后的项目目录
├── public # 公共资源
│ ├── favicon.ico
│ └── index.html
└── src # 源代码
├── App.vue # 项目入口文件
├── assets # 静态资源
│ ├── images/
│ └── json/
├── components # vue组件库
│ ├── Common # 公共组件
│ └── HelloWorld.vue
├── configs # 配置项
├── less # css预处理文件
├── libs # 工具库
├── main.js # 程序入口文件
├── router.js # 路由配置
├── store.js # 状态管理器
└── views # 业务页面模块
└── Home.vue
除此之外,我们最好约定单个vue组件结构顺序,<template>
要位于最上面一层,<script>
放在中间位置,<style>
放在最后。如果你还想规范一点,可以约定<script>
内的选项和钩子函数书写顺序。
<template>
...
</template>
<script>
export default {
name: "",
props: {},
data() {
return {}
},
components: {},
watch: {},
computed: {},
methods: {}
...
}
</script>
<style lang="less" scoped>
...
</style>
当然了,如果我们还想更加严格的规范,我推荐采用eslint
进行约束。
如何优化性能
我们都知道浏览器有自动垃圾回收机制(GC),GC采用标记清除
原理,但是我们最好是手动清除占用的内存资源。
<script>
export default {
name: "",
props: {},
data() {
return {
penson: {
name: "flitrue"
age: 18,
sex: "man",
getRealAge() {
return this.age + 10;
}
}
}
},
beforeDestroy() {
this.person = null;
}
}
</script>
如果我们需要学习高级的性能优化,需要掌握vue源码和浏览器运行机制,所以最终我们还是要学习底层知识,才能彻底掌握性能如何优化。
双向绑定原理
vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。但是Object.defineProperty()
不能监听数组中数据的变动。如果还不知道Object.defineProperty()
方法的使用,可以查看mdn的详细介绍。
vue利用Object.defineProperty()
把内部解耦为三部分:
Observer
: 递归的监听对象上的所有属性,当属性改变时触发对应的Watcher
Watcher
:当对象的数据值修改时,执行相应的回调函数,更新模板内容
dep
:链接Observer
和Watcher
,每一个Observer
对应一个dep
,内部维护一个数组,保存与该Observer
相关的Watcher
最后
最后,我留下两个问题供大家思考。
data
选项怎么不是一个对象,而是一个返回对象的方法?- vue中是如何实现监听数组的变化?
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)