vue3 文档总结 - 基础部分

应用 && 组件实例

每一个 Vue 应用都是通过 createApp 函数创建一个新的应用实例开始的

const app = Vue.createApp({
    /* 选项 */ })

防抖和节流

Vue 内部没有做防抖和节流，但可以使用 Lodash 等库来实现

计算属性的 setter

计算属性默认只有 setter,不过在需要时你也可以提供一个 setter

computed: {
   
  fullName: {
   
    // getter
    get() {
   
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
   
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }

条件渲染

当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级，v-for 与 v-if 不可以同时出现在 v-for 中

    <ul>
      <li v-for="item in list" :key="item.key" v-if="item.value">
        {
   {
    item.value }}
      </li>
    </ul>

1. v-show 代替 v-if

   <ul>
      <li v-for="item in list" :key="item.key" v-show="item.value">
        {
   {
    item.value }}
      </li>
    </ul>

2. 可以用计算属性重新输出一个数组来代替原数组

   <ul>
      <li v-for="item in lister" :key="item && item.key">
        {
   {
    item && item.value }}
      </li>
    </ul>

    setup() {
   
      const list = reactive([
        {
    key: 1, value: false