✊不积跬步,无以至千里;不积小流,无以成江海
文章略长,基本把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主要有五种属性,其中方便记忆,按照颜色分为这几大类,也会根据颜色的方式描述不同的属性。
其中,
红色代表入门属性,几句话能够讲清楚。
黄色代表稍高级属性,有些复杂。
绿色代表容易属性,按字面意思理解即可。
蓝色代表不重要属性,简单了解即可。
紫色代表需要特殊理解的属性。
灰色代表非常不常用的属性。
入门属性
入门属性有九个。有,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混淆)。
javascript
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 属性的语法如下:
javascript
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 的语法如下:
javascript
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 的定义如下:
css
directives: {
[directiveName]: {
// 指令的定义
}
};
其中:
directiveName
是 directives 的名称。{...}
是 directives 的定义。
directives 的定义可以包含以下内容:
bind
:指令绑定时触发的钩子函数。update
:指令更新时触发的钩子函数。componentUpdated
:指令所在的组件更新时触发的钩子函数。
bind
钩子函数是在指令绑定时触发的,通常用于初始化指令的状态。
update
钩子函数是在指令更新时触发的,通常用于更新指令的状态。
componentUpdated
钩子函数是在指令所在的组件更新时触发的,通常用于更新指令的状态。
以下是自定义 directives 的一个示例:
javascript
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 的语法如下:
javascript
// 定义 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
方法的语法如下:
javascript
extends(options) {
// 子组件的定义
};
其中:
options
是父组件的选项。
子组件的选项将会继承父组件的选项。例如,如果父组件有 data()
属性,那么子组件也会有 data()
属性。
extends
方法可以用于以下场景:
- 重用父组件的代码。
- 扩展父组件的功能。
provide 和 inject
名字翻译为提供和注入。Vue 中的 provide
和 inject
是用于组件之间通信的两个方法。
provide
方法用于在父组件中提供一个值,子组件可以通过 inject
方法注入该值。
provide
方法的语法如下:
javascript
provide(key, value) {
// ...
};
其中:
key
是提供值的标识符。value
是提供的值。
inject
方法的语法如下:
javascript
inject(key, [defaultValue]) {
// ...
};
其中:
key
是需要注入的值的标识符。defaultValue
是默认值。
inject
方法会返回一个 Promise 对象,该对象的 resolve 方法会返回注入的值。
provide
和 inject
可以用于以下场景:
- 将数据或函数从父组件传递给子组件。
- 将第三方库的功能注入到子组件中。
例如,可以创建一个名为 BaseComponent
的父组件,该组件提供一个 name
属性:
javascript
export default {
name: 'BaseComponent',
provide() {
return {
name: 'Vue'
};
}
};
然后,创建一个名为 MyComponent
的子组件,该组件注入 name
属性:
javascript
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 可以使用以下语法:
arduino
<template>
</template>
template 可以包含以下元素:
- HTML 元素:用于定义组件的视图结构。
- Vue 语法:用于绑定数据。
Vue 语法可以用于在 template 中绑定数据。常用的 Vue 语法包括:
v-bind
:用于绑定元素的属性或样式。v-model
:用于表单双向绑定。v-for
:用于循环渲染元素。v-if
:用于条件渲染元素。
filter
Vue 中的 filter 是用于在模板中对数据进行格式化或转换的特殊指令。filter 可以用来:
- 格式化日期和时间。
- 转换数字。
- 过滤字符串。
- 执行其他格式化或转换操作。
filter 的语法如下:
ini
<element v-bind:value="data | filter:value">
其中:
element
是元素。data
是数据。value
是 filter 的名称。
filter 的值可以是字符串或函数。如果是字符串,则表示 filter 的名称。如果是函数,则表示 filter 的实现。
除了内置 filter 之外,还可以自定义 filter。自定义 filter 的定义如下:
css
filters: {
[filterName]: function(value) {
// filter 的实现
return value;
}
};
其中:
filterName
是 filter 的名称。function()
是 filter 的实现。
自定义 filter 可以根据具体的需求进行设计。