Vue 实例及构造选项 options_vue两个表的option要怎么写-CSDN博客

本文链接：https://blog.csdn.net/Marker__/article/details/105425507

1、Vue 实例

const vm = new Vue( options )；这句话表示创建一个 Vue 的实例 vm，类似 jQuery 的封装思想，vm 对象内封装了对视图的所有操作，比如：数据的读写、事件的绑定、Dom 更新等（但是没有 Ajax，因为 Vue 主要是视图层的操作，不涵盖网络层）。

如图所示，vm 对象中封装了图中的蓝色区域对象，该对象的所有操作都可以通过 vm 实例的 API 来操作。vm 的构造函数是 Vue，按照 ES6 的说法，vm 所属的类是 Vue，options 是 new Vue 的参数，一般称之为选项或构造选项。

2、构造选项 options

options 是创建 vue 实例时的参数，具体可以查看选项官方文档，options 内含五大类属性：

数据：data、props、propsData、computed、methods、watch
DOM：el、template、render、renderError
生命周期钩子：beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、activated/deactivated、beforeDestroy/destroyed、errorCaptured
资源：directives、filters、components
组合：parent、mixins、extends、provide、inject

红色代表基础重要属性，黄色代表高级重要属性，紫色代表特殊的重要属性，其余的到官网做一些了解即可。

3、options 基础重要属性

import Demo1 from './demo.vue'    //第一种使用组件的方式 - .vue，文件名最好小写，组件名最好大写
Vue.component('Demo2',{           //第二种使用组件的方式 - Vue.component，可接收的参数和vue实例的一样，data、methods等
  template: `<div>demo2</div>`
})
new Vue({
  el:'#app',    //挂载点，等价于$mount('#app')
  data:{        //或是函数的形式：data:function(){ return {num:0} }
    num: 0
  },
  methods:{},  //内定义事件处理函数 or 普通函数
  components:{ Demo1: Demo1 },   //引用外部组件.vue 文件，内部的组件不用引入。改属性支持直接写组件内容template等属性
  template: `<div> <Demo1/> <Demo2/> </div>`,    //使用组件占位符引用组件
  props:['message','fun']    //外部属性/方法，传入后可在当前vue实例/组件内使用：(this.)message，@click="fun"
})

el 属性 - 挂载点：页面渲染会以 el 属性上的元素作为挂载点进行内容替换，与 $mount 有替换关系，二者选其一。
补充：new Vue({ el：'#app' }) 等价于 new Vue({}).$mount('#app')、挂在基本上和 append() 概念差不多。
data 属性 - 内部数据：内部数据支持对象和函数，优先用函数。data：{ num：0 } 或者 data：function(){return { num：0 }}
解释：vue 官方文档说明，如果是在 .vue 文件中的 data 只能使用函数。vue 组件其实是一个对象，它会被作为参数传递给 h 函数，相当于 new Vue( 组件对象 )，渲染一次不会有任何问题，但是如果组件复用，需要渲染两次或多次，则多次 new Vue( 组件对象 ) 的组件对象中的 data 是同一个对象，这样就会导致一个 data 数据同时被两个组件使用，如果其中一个组件将 data 改变了，则另一个组件中的 data 必然收到影响。
使用 data 函数是为了组件的复用，new Vue(组件对象) 操作时，如果发现 data 是函数，则会先执行类似这样的操作：组件对象._data = 组件对象.data()；使得每份组件都可以有一份 data 的拷贝，防止不同组件修改数据时被相互覆盖，如果 data 是对象话，对象会在这个组件的所有实例中共享，这样导致数据被多个组件使用，会相互影响。
methods 属性 - 方法：内部定义事件处理函数或者是普通函数。
说明：页面每次变化都会执行写在 template 或 html 中的 {{ function() }}（ function 定义在 methods 属性中）。
components 属性 - 组件：使用 Vue 组件，注意大小写
组件可以是两种形式，一种是外部引入 .vue 文件，需要引入，在 components 属性中注册，并在模板中填写占位符。第二种可以是通过 Vue.component 直接声明，不需要在 components 属性中注册即可使用。组件名最好大写！
四个钩子 - 生命周期：可以通过 debugger 的方式检测。具体可参看这篇博客：➡ Vue 实例的生命周期图解
created()：表示实例出现在内存中，但是没有被渲染到页面中。
mounted()：实例已经被渲染到页面中。
updated()：实例更新了，比如点击按钮，页面数字 + 1 操作，可以拿到更新后的数据。
destroyed()：实例消亡了，从页面中消失了。可结合 v-if 控制当前模块在页面中是否显示，消失就触发 destoryed()。
props 属性- 外部属性：
在组件占位符上以赋值的形式向子组件传值，如：<Demo message = 'hello'/>，如果需要给子组件传递当前组件的变量的话，则需要：<Demo v-bind:message = 'this.data'/>，其中 v-bind 可以省略，只留下：，如果加上 v-bind：则引号 "" 内的都以 JavaScript 的代码进行处理。
基于上述理论，如下两种形式是相同的：<Demo :message=" '0' "> or <Demo message="0">，都是传递字符串 0。
除了传递属性，还可以传递方法给子组件。在子组件中，props 以数组的形式接收外部传递进来的属性/方法，当然也可以是以对象的形式，这样的话就可以设置传值类型和 default 默认值。