✊不积跬步，无以至千里；不积小流，无以成江海

文章略长，基本把vue构造选项的所有内容都融合在一篇文章中了。

vue中的一些基本概念

就像用jquary选择一个元素，你得到的会是元素吗？并不是，得到的是一个实例（对象）。
Vue也是一样，选择vue元素得到的也是一个vue对象。这个对象封装了所有对div的操作。

重要公式：
对象._proto = 其构造函数.prototype

一般的vue的使用方法，这样可以构造一个vue的实例：
new Vue(对象)

然而实际上：
const vm = new Vue(option)

new vue会根据你给出的option，得到一个对象，这个对象我们命名为vm，这个对象封装的，就是我们定义的dom操作（比如：事件读写，内容绑定etc）以及其内部所有的对象。

那么根据上面的公式，则vm._proto = Vue.prototype

然后思考一下这个公式的内存图，那么就会得到一堆问题：

vm内部有哪些东西？
Vue内部有哪些东西？
Vue中的prototype指向的地址又有哪些东西？
上面指向的地址，中的._proto又指向哪个地址？

加上上面new Vue(对象)中的option，

option都有哪些组成部分？

凑成了五个问题，这五个问题构成了Vue世界中基本概念的核心五问。

在这篇笔记中，我们先解决第一个问题，option。也就是vue的构造选项。

option里面有什么

option主要有五种属性，其中方便记忆，按照颜色分为这几大类，也会根据颜色的方式描述不同的属性。

Vue学习笔记-vue2构造选项
其中，

红色代表入门属性，几句话能够讲清楚。

黄色代表稍高级属性，有些复杂。

绿色代表容易属性，按字面意思理解即可。

蓝色代表不重要属性，简单了解即可。

紫色代表需要特殊理解的属性。

灰色代表非常不常用的属性。

入门属性

入门属性有九个。有，el、data、methods、components、四个钩子、props。

el

el表示挂载点。是指组件绑定的 DOM 元素。el 属性必须在组件实例化时指定，它可以是 DOM 元素的 ID、选择器或 jQuery 对象。

public的HTML文件div id指定的名称必须与el挂载的文件保持一致。
html文件中写的内容基本没机会看见，因为el挂载内容的优先级更高。
与.$mount('')等价

data

data表示内部数据。优先使用函数。

为什么优先使用函数？

假设一个场景，当你调用new Vue（data）两次，因为data是内部数据，将一个内部数据传给一个组件两次，由于这两个组件用的是同一个data，那么如果一个组件更改了这个data，那么另一组件的data也变了。利用函数则可以避免这个问题，这样每次调用的实际值都是函数return的值。

methods

methods表示事件处理函数（记得操作要写在method里面），或者普通调用函数（在模版中主动调用函数）。

components

components表示vue组件，注意大小写（尽量首字母大写避免和html混淆）。

import 名字 from '名字.vue'

comonents(){
    名字：对应的值
},

templete:
    <名字>

可以理解为componets就像是给一个实例（对象）取了一个名字。

如果我直接new Vue，那么产生的就是一个实例；如果我使用的是【vue.components】 or 【名字.vue 这个文件】，我们就把这个叫做组件。

四个钩子

created，mounted，updated，destroyed四个；产生，挂载，更新，消亡。字面意思理解即可。

其中destroyed指的是从页面中消失，但消失的东西一样可以再create回来。

=> destroy之后再create出现在内存中的东西，和destroy之前不一样，是全新的。

props

props表示外部数据。也叫属性。

记得message=”n”传入的是字符串。:message=”n”传入的才是this.n数据。

如果想让message中传入可以随着改变的数值，只能传this.n哦。message直接传的是死的字符串。

如果想传的是函数，:fn=”add”传入的就是this.add函数。

进阶属性

进阶属性有七个。分别为：computed，watch，directives，mixins，extends，provide，inject。

computed

Vue 中的 computed 属性是基于数据响应式机制的特殊属性。computed 属性的值是根据其他数据属性计算得到的，当这些数据属性发生变化时，computed 属性的值也会相应地更新。

computed 属性的语法如下：

computed: {
  computedProperty(...dependencies) {
    // 计算属性值
    return computedValue;
  }
};

其中：

computedProperty 是 computed 属性的名称。
...dependencies 是 computed 属性依赖的数据属性。

computed 属性的值是通过 computedProperty() 方法计算得到的。computedProperty() 方法的参数是 computed 属性依赖的数据属性。

computed 属性可以用于以下场景：

计算数据属性的衍生值。
对数据属性进行格式化或转换。
对数据属性进行验证。

computed 属性可以提高组件的性能，因为它可以避免在模板中多次计算相同的值。

以下是一些关于 computed 属性的注意事项：

computed 属性的值是响应式的，因此当 dependencies 中的属性发生变化时，computed 属性的值也会相应地更新。
computed 属性的值是惰性求值的，也就是说，只有当 computed 属性被访问时，才会计算 computed 属性的值。

watch

Vue 中的 watch 是用于监听数据属性变化的功能。当数据属性发生变化时，watch 会触发回调函数，回调函数可以用于更新视图或执行其他操作。

watch 的语法如下：

watch(prop, callback, [options]) {
  // 回调函数
};

其中：

prop 是被监听的数据属性。
callback 是回调函数。
options 是 watch 选项。

watch 可以用于以下场景：

在数据属性发生变化时更新视图。
在数据属性发生变化时执行其他操作，例如发送请求或触发事件。

watch 可以提高组件的性能，因为它可以避免在模板中多次监听相同的数据属性。

computed 和 watch的区别

解释定义：

Computed就是计算属性的意思，watch就是监听的意思。

各自描述：

Computed是用来计算出一个值的，这个值调用的时候不需要加括号。而且它会根据依赖自动缓存，如果依赖不变，这个值也不会变。

Watch有两个选项，第一个是immediate，表示在第一次渲染的时候是否要执行这个函数。第二个叫做deep，意思是我们监听这个对象的时候是否要监听这个对象里面的属性。watch的属性就是如果某个属性变化了我就去执行对应的函数。

directives

directives包含一些内置指令，比如v-if\v-for\v-show 等等。

directives 可以用来：

修改元素的属性或样式。
监听元素的事件。
添加额外的功能。

例如，以下代码使用 v-on directives 监听元素的 click 事件：

<button v-on:click="handleClick">点击</button>

当用户点击按钮时，handleClick() 函数会被触发。

Vue 内置了许多 directives，例如：

v-model：用于表单双向绑定。
v-on：用于监听元素的事件。
v-bind：用于绑定元素的属性或样式。
v-for：用于循环渲染元素。
v-if：用于条件渲染元素。

但vue支持自己创造一些指令。比如v-x，点击一个指令就会出现一个x。

自定义 directives 的定义如下：

directives: {
  [directiveName]: {
    // 指令的定义
  }
};

其中：

directiveName 是 directives 的名称。
{...} 是 directives 的定义。

directives 的定义可以包含以下内容：

bind：指令绑定时触发的钩子函数。
update：指令更新时触发的钩子函数。
componentUpdated：指令所在的组件更新时触发的钩子函数。

bind 钩子函数是在指令绑定时触发的，通常用于初始化指令的状态。

update 钩子函数是在指令更新时触发的，通常用于更新指令的状态。

componentUpdated 钩子函数是在指令所在的组件更新时触发的，通常用于更新指令的状态。

以下是自定义 directives 的一个示例：

directives: {
  // 自定义 directives，用于将元素的背景颜色设置为红色
  red: {
    bind(el, binding, vnode) {
      el.style.backgroundColor = 'red';
    }
  }
};

//调用时的语法
<element v-red></element>

//效果：
在第一个示例中，`v-red` 指令会将元素的背景颜色设置为红色。

mixins

名字翻译为混入，实际上就是复制。mixins 可以包含任何组件选项，包括 data、methods、computed、watch、directives 等。

mixins 的语法如下：

// 定义 mixin
export default {
  // 数据属性
  name: 'BaseMixin',
  // 方法
  handleClick() {
    // ...
  },
  // 计算属性
  fullName() {
    // ...
  },
  // watch
  watch(prop) {
    // ...
  }
};

// 使用 mixin
export default {
  mixins: [BaseMixin],
  // ...
};

在示例中，定义了一个名为 BaseMixin 的 mixin。BaseMixin 包含一个数据属性 name、一个方法 handleClick()、一个计算属性 fullName() 和一个 watch watch()。

mixins 可以用于以下场景：

将通用功能抽取到 mixin 中，以便在多个组件中重复使用。
将第三方库的功能注入到组件中。
将复杂的功能分解到多个 mixin 中，以便提高代码的复用性和可维护性。

extends

名字翻译为继承，实际上还是复制。Vue 中的 extends 方法用于将一个组件继承自另一个组件。被继承的组件称为父组件，继承的组件称为子组件。

extends 方法的语法如下：

extends(options) {
  // 子组件的定义
};

其中：

options 是父组件的选项。

子组件的选项将会继承父组件的选项。例如，如果父组件有 data() 属性，那么子组件也会有 data() 属性。

extends 方法可以用于以下场景：

重用父组件的代码。
扩展父组件的功能。

provide 和 inject

名字翻译为提供和注入。Vue 中的 provide 和 inject 是用于组件之间通信的两个方法。

provide 方法用于在父组件中提供一个值，子组件可以通过 inject 方法注入该值。

provide 方法的语法如下：

provide(key, value) {
  // ...
};

其中：

key 是提供值的标识符。
value 是提供的值。

inject 方法的语法如下：

inject(key, [defaultValue]) {
  // ...
};

其中：

key 是需要注入的值的标识符。
defaultValue 是默认值。

inject 方法会返回一个 Promise 对象，该对象的 resolve 方法会返回注入的值。

provide 和 inject 可以用于以下场景：

将数据或函数从父组件传递给子组件。
将第三方库的功能注入到子组件中。

例如，可以创建一个名为 BaseComponent 的父组件，该组件提供一个 name 属性：

export default {
  name: 'BaseComponent',
  provide() {
    return {
      name: 'Vue'
    };
  }
};

然后，创建一个名为 MyComponent 的子组件，该组件注入 name 属性：

export default {
  name: 'MyComponent',
  inject: ['name'],
  mounted() {
    // 子组件可以使用 name 属性
    console.log(this.name); // Vue
  }
};

在上述代码中，MyComponent 组件注入了 name 属性。因此，MyComponent 组件可以使用 name 属性。

特殊属性

特殊属性有两个，templete和filter。是非常常见的属性。其实对于他们两个的了解已经融合在上面的几个属性中了。但这里还是稍作一些介绍。

templete

Vue 中的 template 是用于描述组件 UI 的 HTML 代码。template 可以使用以下语法：

<template>
  </template>

template 可以包含以下元素：

HTML 元素：用于定义组件的视图结构。
Vue 语法：用于绑定数据。

Vue 语法可以用于在 template 中绑定数据。常用的 Vue 语法包括：

v-bind：用于绑定元素的属性或样式。
v-model：用于表单双向绑定。
v-for：用于循环渲染元素。
v-if：用于条件渲染元素。

filter

Vue 中的 filter 是用于在模板中对数据进行格式化或转换的特殊指令。filter 可以用来：

格式化日期和时间。
转换数字。
过滤字符串。
执行其他格式化或转换操作。

filter 的语法如下：

<element v-bind:value="data | filter:value">

其中：

element 是元素。
data 是数据。
value 是 filter 的名称。

filter 的值可以是字符串或函数。如果是字符串，则表示 filter 的名称。如果是函数，则表示 filter 的实现。

除了内置 filter 之外，还可以自定义 filter。自定义 filter 的定义如下：

filters: {
  [filterName]: function(value) {
    // filter 的实现
    return value;
  }
};

其中：

filterName 是 filter 的名称。
function() 是 filter 的实现。

自定义 filter 可以根据具体的需求进行设计。

原文链接：https://juejin.cn/post/7321587195328249882 作者：李文旺

Vue学习笔记-vue2构造选项