Vue实例的配置参数options

梦里梦外; 2023-06-17 06:59 5阅读 0赞

# 配置参数 #

实例化一个Vue对象，参数是一个选项对象，下面将会对其中包含的选项做些简单的说明。

new Vue({ 
      options
    })

在Vue实例中可以通过`this.$options`查看实例的配置项  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

### 数据相关选项 ###

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data</td> 
   <td>声明需要响应式绑定的数据对象</td> 
  </tr> 
  <tr> 
   <td>props</td> 
   <td>接收来自父组件的数据</td> 
  </tr> 
  <tr> 
   <td>propsData</td> 
   <td>创建实例时手动传递props，方便测试props</td> 
  </tr> 
  <tr> 
   <td>computed</td> 
   <td>用于声明计算属性</td> 
  </tr> 
  <tr> 
   <td>methods</td> 
   <td>用于定义Vue实例的方法</td> 
  </tr> 
  <tr> 
   <td>watch</td> 
   <td>侦听属性，监控 Vue 实例上的数据变动，并调用其回调函数</td> 
  </tr> 
 </tbody> 
</table>

### DOM相关选项 ###

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>el</td> 
   <td>声明Vue根组件的挂载点（根组件特有）</td> 
  </tr> 
  <tr> 
   <td>template</td> 
   <td>用于挂载元素的字符串模板</td> 
  </tr> 
  <tr> 
   <td>render</td> 
   <td>渲染函数，用于创建虚拟DOM，是字符串模板的替代方案</td> 
  </tr> 
  <tr> 
   <td>renderError</td> 
   <td>仅用于开发环境，在render()出现错误时，提供另外的渲染输出</td> 
  </tr> 
 </tbody> 
</table>

### 生命周期钩子相关选项 ###

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>发生在Vue实例初始化之后，data observer和event/watcher事件被配置之前</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>发生在Vue实例初始化以及data observer和event/watcher事件被配置之后</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>挂载开始之前被调用，此时render()首次被调用</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>el被新建的vm.$el替换，并挂载到实例上之后调用</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>数据更改导致虚拟DOM重新渲染和打补丁之后被调用</td> 
  </tr> 
  <tr> 
   <td>activated</td> 
   <td>keep-alive组件激活时调用</td> 
  </tr> 
  <tr> 
   <td>deactivated</td> 
   <td>keep-alive组件停用时调用</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>实例销毁之前调用，Vue实例依然可用</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>Vue实例销毁后调用，事件监听和子实例全部被移除，释放系统资源</td> 
  </tr> 
 </tbody> 
</table>

### 资源相关选项 ###

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>directives</td> 
   <td>配置局部注册的自定义指令</td> 
  </tr> 
  <tr> 
   <td>filters</td> 
   <td>过滤器,针对一些数据进行筛选、过滤、格式化等相关的处理，过滤器是一个带有参数和返回值的方法 ,只能用在{ {}}和v-bind里面。</td> 
  </tr> 
  <tr> 
   <td>components</td> 
   <td>配置局部注册组件</td> 
  </tr> 
 </tbody> 
</table>

### 组合选项 ###

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>parent</td> 
   <td>指定当前实例的父实例，子实例用this.$parent访问父实例，父实例通过$children数组访问子实例</td> 
  </tr> 
  <tr> 
   <td>mixins</td> 
   <td>将属性混入Vue实例对象，并在Vue自身实例对象的属性被调用之前得到执行(组件的多继承)</td> 
  </tr> 
  <tr> 
   <td>extends</td> 
   <td>用于声明继承另一个组件，从而无需使用Vue.extend，便于扩展单文件组件(组件的单继承)</td> 
  </tr> 
  <tr> 
   <td>provide&amp;inject</td> 
   <td>2个属性需要一起使用，用来向所有子组件注入依赖</td> 
  </tr> 
 </tbody> 
</table>

### 其它选项 ###

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>允许组件递归调用自身，便于调试时显示更加友好的警告信息</td> 
  </tr> 
  <tr> 
   <td>delimiters</td> 
   <td>改变模板字符串的风格，默认为{ {}}</td> 
  </tr> 
  <tr> 
   <td>functional</td> 
   <td>让组件无状态(没有data)和无实例(没有this上下文)</td> 
  </tr> 
  <tr> 
   <td>model</td> 
   <td>允许自定义组件使用v-model时定制prop和event</td> 
  </tr> 
  <tr> 
   <td>inheritAttrs</td> 
   <td>默认情况下，父作用域的非props属性绑定会应用在子组件的根元素上。当编写嵌套有其它组件或元素的组件时，可以将该属性设置为false关闭这些默认行为</td> 
  </tr> 
  <tr> 
   <td>comments</td> 
   <td>设为true时会保留并且渲染模板中的HTML注释</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/4fbb35c0adba431ba277141ceedd32ad.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70