Vue组件的结构应该是什么?应该按什么顺序添加功能?

时间:2019-05-25 05:40:25

标签: vue.js vuejs2 vue-component

Vue组件是否有系统的结构?应该以哪种顺序来计算,方法,组件,安装的手表等?

3 个答案:

答案 0 :(得分:2)

更新 对于component,我最喜欢将script标签放在html标签之前。就像我们通常用来玩js的想法一样,我总是在页面中向下移动感到发痒。否则,请根据自己的喜好进行布局

根据Vue官方风格指南-

组件/实例选项的顺序应一致。

这是我们建议组件选项的默认顺序。它们分为几类,因此您将知道在哪里可以从插件添加新属性。

侧面效果(在组件外部触发效果)

el

全球意识(需要组件以外的知识)

name
parent

组件类型(更改组件的类型)

functional

模板修饰符(更改模板的编译方式)

delimiters
comments

模板依赖项(模板中使用的资产)

components
directives
filters

组成(将属性合并到选项中)

extends
mixins

接口(组件的接口)

inheritAttrs
model
props/propsData

本地状态(本地反应特性)

data
computed

事件(响应事件触发的回调)

watch
Lifecycle Events (in the order they are called)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

非反应性属性(实例属性独立于反应性系统)

methods

渲染(组件输出的声明性描述)

template/render
renderError

要获取style-guide中推荐的Vue的更多信息,请点击此处vue-style-guide

答案 1 :(得分:2)

实际上可以在JavaScript中维护对象键的顺序,但这是ES5规范的isn't guaranteed,Vue支持。因此,不应期望该框架将依赖于定义组件属性的顺序。

组件功能 可以保持一致性,就像其他答案所解释的一样,但是不应该。这纯粹是风格问题。

答案 2 :(得分:1)

不,没有。 100%个人喜好。我喜欢从数据,方法开始,通常以生命周期方法结束。这与通常在文档中放置它的方式类似,并且看起来很方便,因为数据和方法发生了很大的变化,而生命周期方法变化不大。但是,没有理由在框架中这样做。去你的游戏。