vue3 学习笔记

模板指令

同一个组件上可以使用多个v-model绑定

移除了2.0的syn修饰符

<!-- vue2.0 的写法 -->
<ChildComponent :title.sync="pageTitle" />

<!-- vue3.0 的写法 -->
<ChildComponent
  v-model:title="pageTitle"
  v-model:content="pageContent"
/>

<template v-for> 的 key 可以设置在template 标签上 不一定要设置在其子节点上

v-if总是优先于 v-for生效

<!-- Vue 2.x -->
<template v-for="item in list">
  <div :key="'heading-' + item.id">姓名:222</div>
  <span :key="'content-' + item.id">年龄：19</span>
</template>

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div>姓名:222</div>
  <span>姓名:222</span>
</template>

v-bind的合并行为

在 2.x 中，如果一个元素同时定义了 v-bind="object" 和一个相同的独立 attribute，那么这个独立 attribute 总是会覆盖 object 中的绑定。

而在 3.x 中 绑定的声明顺序将决定它们如何被合并 以最后出现的为主

<div id="red" v-bind="{id :"blue" }"></div>

<!-- Vue 2.x -->
<div id="red"></div>

<!-- Vue 3.x -->
<div id="blue"></div>

移除了v-on的 .native 修饰符  新增了emits 选项 允许子组件定义真正会被触发的事件

<!-- Vue 2.x -->
<my-componet v-on:close.native="handleNativeEvent" />


<!-- Vue 3.x -->
<my-componet v-on:close="handleNativeEvent" />

<script>
export default {
  emits: ['close']
}
</script>

v-for中的ref不再注册 ref数组

在 Vue 2 中，在 v-for 中使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。

在 Vue 3 中，此类用法将不再自动创建 $ref 数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)：

<div v-for="item in list" :ref="setItemRef"></div>

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}