Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get(“/api/users”);
this.users = Object.freeze(users);
},
methods:{
// 改变值不会触发视图响应this.data.users[0] = newValue
// 改变引用依然会触发视图响应this.data.users = newArray
}
};
复制代码
3.去除多余的样式
随着项目越来越大,书写的不注意,不自然的就会产生一些多余的css,小项目还好,一旦项目大了以后,多余的css会越来越多,导致包越来越大,从而影响项目运行性能,所以有必要在正式环境去除掉这些多余的css,这里推荐一个库purgecss,支持CLI、JavascriptApi、Webpack等多种方式使用,通过这个库,我们可以很容易的去除掉多余的css。
Hello Vanilla!
We use Parcel to bundle this sandbox, you can find more info about Parcel
<ahref=“https://parceljs.org"target=”_blank"rel=“noopener noreferrer”>here.
body {
font-family: sans-serif;
}
a {
color: red;
}
ul {
li {
list-style: none;
}
}
import Purgecss from"purgecss";
const purgecss = new Purgecss({
content: [“**/*.html”],
css: [“**/*.css”]
});
const purgecssResult = purgecss.purge();
复制代码
最终产生的purgecssResult结果如下,就可以看到多余的a和ul标签的样式都没了
4.函数式组件
函数式组件,即无状态,无法实例化,内部没有任何生命周期处理方法,非常轻量,因而渲染性能高,特别适合用来只依赖外部数据传递而变化的组件。
写法如下:
在template标签里面标明functional 只接受props值 不需要script标签
<List:items=“[‘Wonderwoman’, ‘Ironman’]” :item-click=“item => (clicked = item)”
/>
Clicked hero: {{ clicked }}
{{ item }}
复制代码
5.监听组件的生命周期
比如有父组件Parent和子组件Child,如果父组件监听到子组件挂载mounted就做一些逻辑处理,常规的写法可能如下:
// Parent.vue
<Child @mounted=“doSomething”/>
// Child.vue
mounted() {
this.$emit(“mounted”);
}
复制代码
这里提供一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过@hook来监听即可,代码重写如下:
<Child @hook:mounted=“doSomething”/>
<Child @hook:updated=“doSomething”/>
复制代码
当然这里不仅仅是可以监听mounted,其它的生命周期事件,例如:created,updated等都可以,是不是特别方便~
再比如平时的绑定卸载事件:
window.addEventListener(‘resize’,this.handleResize)
this.$on(‘hook:destroyed’,() => {
window.removeventListener(‘resize’,this.handleResize)
Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他