vue 知识点

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：341

- 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
- 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
- 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。
- 不要在选项 property 或回调上使用箭头函数。例如： > created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
- 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。
- Mustache 语法(双大括号) 不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令。
- 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
- 从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数。表达式求得的值将会作为最终的参数来使用。
```
<a v-bind:[attributeName]="url"> ... </a>
```

- 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
```
<a v-bind:[someAttr]="value"> ... </a>
```

- 对于任何复杂逻辑，你都应当使用`计算属性`，可以像绑定普通 property 一样在模板中绑定计算属性。当`数据属性`发生改变时，所有依赖`计算属性`的绑定也会更新。
```
var vm = new Vue({
	el: '#example',
	data: { message: 'Hello' },
	computed: { // 计算属性的 getter
		reversedMessage: function () { // `this` 指向 vm 实例
			return this.message.split('').reverse().join('')
		}
	}
})
```

- 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
- 当你有一些数据需要随着其它数据变动而变动时，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
- 当需要在数据变化时执行异步或开销较大的操作时，`侦听器`是最有用的。
- 为`class`属性绑定一个返回对象的计算属性。这是一个常用且强大的模式：
```
<div v-bind:class="classObject"></div>
data: { isActive: true, error: null },
computed: {
	classObject: function () {
		return {
			active: this.isActive && !this.error,
			'text-danger': this.error && this.error.type === 'fatal'
		}
	}
}
```

- 当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
- 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
- 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
- 不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
- 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 - Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。
- 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
- 每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
- 在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
- 要使父级提供的插槽内容访问子元素属性，可以添加一个 `<slot>` 元素并将其作为一个`attribute` 绑定
```

<ul>
	<li v-for="( item, index ) in items">
		<slot :item="item" :index="index" :another-attribute="anotherAttribute"></slot>
	</li>
</ul>

<todo-list>
	<template v-slot:default="slotProps">
		<i class="fas fa-check"></i>
		<span class="green">{{ slotProps.item }}</span>
	</template>
</todo-list>
```

- 默认情况下，provide/inject 绑定并不是响应式的。我们可以通过传递一个 ref property 或 reactive 对象给 provide 来改变这种行为。
- 应该避免对响应式的对象进行解构，并始终以 attrs.x 或 slots.x 的方式引用。
- 一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。
- 当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中。同样的规则也适用于事件监听器。当有一个具有 change 事件的 HTML 元素将作为 date-picker 的根元素时，这可能会有帮助。
- 通过将 inheritAttrs 选项设置为 false，你可以访问组件的 $attrs property，该 property 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等)。 例如，如果需要将所有非 prop attribute 应用于 input 元素而不是根 div 元素，则可以使用 v-bind 缩写来完成。
```
app.component('date-picker', {
	inheritAttrs: false,
	template: `
		<div class="date-picker">
			<input type="datetime-local" v-bind="$attrs" />
		</div>
	`
})

<date-picker data-status="activated"></date-picker>

<div class="date-picker">
	<input type="datetime-local" data-status="activated" />
</div>
```

- 和非 prop 的 attribute 类似，当在组件中使用时，自定义指令总是会被应用在组件的根节点上。和 attribute 不同，指令不会通过 v-bind="$attrs" 被传入另一个元素。

标签：

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：全栈开发前后端项目初始化

vue 知识点

随便看看

留言