vue的备忘录

发表于 更新于 分类于 Waline： 本文字数： 444
vue容易混淆的知识点笔记

本篇内容：

1. key 是 Vue 保留的一个特殊属性名称,用于给 v-for 渲染的元素或组件设置一个唯一的标识。用法如下

1
2
3
4
5
6
1.将对象的字段赋给唯一id
 <li v-for="item in items" :key="item.id">{{ item.name }}</li>
# 2.从对象中取出属性名作为唯一id
# 这里利用v-for 来遍历一个对象的所有属性。
# 遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
 <li v-for="(value, key, index) in items" :key="key">{{ value }}</li>

第二点中：这里的 :key 是一个通过 v-bind 绑定的特殊 attribute。

(value, key, index)则是在 v-for 中使用对象里所提到的对象属性名。

2.v-if v-for优先级的问题可以用嵌套标签解决

3.计算属性失效的情况下：例如在多层嵌套的 v-for 循环中：定义方法解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

计算属性缓存VS方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

若需要动态更新，只能添加watch触发

还看到一种解决办法是 this.$forceUpdate()

vue修改对象的属性值后页面不重新渲染

4.内联事件处理器中访问原生 DOM 事件。可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数

1
2
3
4
5
6
7
8
9
<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

5.修饰符

Vue修饰符的总结归纳（Vue2和Vue3通用）

使用时要注意修饰符顺序。mark下。

6.选择器选项

在Vue中,当使用 v-model在一个 <select>元素上创建双向绑定时,被选中的 <option>的 value attribute的值将会被assigned(赋值)给 v-model所绑定的数据属性。

1
2
3
4
<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">选项</option>
</select>

7.生命周期

最常用的是 mounted、updated 和 unmounted。

vue生命周期