乐趣区

关于vue3:vue3值得注意的点

jiezi

创立实例通过 createApp 的形式 

<div id="counter">
  Counter: {{counter}}
</div>
const Counter = {data() {
    return {counter: 0}
  }
}

Vue.createApp(Counter).mount('#counter')

全局办法变更

组件的 v -model

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接管抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

v-model 参数

若须要更改 model 名称，而不是更改组件内的 model 选项，那么当初咱们能够将一个 argument 传递给 model：

<ChildComponent v-model:title="pageTitle" />

<!-- 简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-model 修饰符

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，当初 3.x 还反对自定义修饰符：
增加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在上面的示例中，咱们创立了一个组件，其中蕴含默认为空对象的 modelModifiers prop。
请留神，当组件的 created 生命周期钩子触发时，modelModifiers prop 蕴含 capitalize，其值为 true——因为它被设置在 v-model 绑定 v-model.capitalize=”bar”。

<my-component v-model.capitalize="bar"></my-component>
app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {default: () => ({})
    }
  },
  template: `
    <input type="text" 
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
  `,
  created() {console.log(this.modelModifiers) // {capitalize: true}
  }
})

组合式 api

能够把一部分共用逻辑和数据写在一块来复用，比方本人我的项目中常常用的 search 办法加载列表就能够抽出来了 

//app.vue
<template>
  <button @click="search"></button>
</template>
<script>
import {getData} from "./api"
import getSearchMethod from "./util.js"
export default {setup(){//context 是一个一般的 JavaScript 对象，它裸露三个组件的 property：attrs,emit,slots
    var param = {
      page:1,
      size:10
    } 
    return  getSearchMethod(param,getData);
  }
}
</script>
//api.js
export const  getData = function(){
  return Promise.resolve({list:['a','b'],
    total:2
  })
}
//util.js
import {toRefs} from 'vue'
export const getSearchMethod = function(param,api){param = toRefs(param);
  var total = toRefs(0);
  var tableData = toRefs([]);
  var search = toRefs(function(){api(param.value).then(res=>{
      total.value = res.total;
      tableData.value = res.list;
    })
  })
  return {param,total,tableData,search}
}

Teleport

将容器放到指定父容器下, 咱们能够将它们嵌套在另一个外部，以构建一个组成应用程序 UI 的树。

<body>
  <div style="position: relative;">
    <h3>Tooltips with Vue 3 Teleport</h3>
    <div>
      <modal-button></modal-button>
    </div>
  </div>
</body>
app.component('modal-button', {
  template: `
    <button @click="modalOpen = true">
        Open full screen modal! (With teleport!)
    </button>

    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! 
          (My parent is "body")
          <button @click="modalOpen = false">
            Close
          </button>
        </div>
      </div>
    </teleport>
  `,
  data() {
    return {modalOpen: false}
  }
})

片段

在 Vue 3 中，组件当初正式反对多根节点组件，即片段 

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

v-for 的 key 能够间接写在 template 上了

v-if 的优先级比 v -for 高了

$on，$off 和 $once 实例办法已被移除，利用实例不再实现事件触发接口

filter 移除

<template> 没有非凡指令的标记 (v-if/else-if/else、v-for 或 v-slot) 当初被视为一般元素，并将生成原生的 <template> 元素，而不是渲染其外部内容。

在 Vue 2.x 中，利用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板 / 渲染选项，则最终编译为模板)。Vue 3.x 当初应用利用容器的 innerHTML，这意味着容器自身不再被视为模板的一部分。

destroyed

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
移除 $destroy 实例办法

退出移动版