vue3笔记（乱七芭蕉更新中）

vue3笔记（乱七芭蕉）

阅读指南
参考官方文档

一、关于vue3

二、关于指令

v-for(列表渲染)

用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<ul id="array-rendering" class="demo">
  <li v-for="(item,index) in items" :key="item.message">
    {
  {index+1}}-{
  { item.message }}
  </li>
</ul>

Vue.createApp({
   
  data() {
   
    return {
   
      items: [{
    message: 'Foo' }, {
    message: 'Bar' }]
    }
  }
}).mount('#array-rendering')
//结果为
//·1-Foo
//·2-Bar

问题:不推荐在同一元素上v-if和v-for一起用

实质是v-for优先执行，会创建对应的dom节点，如果v-if为false，会删除这个dom节点；这样创建后再删除，会造成页面卡顿。

三、关于组件

组件理解

组件可以扩展html元素,封装可重复利用的代码,到时候直接引用,提高代码利用率,节省时间.

组件的划分通常分成两个方式：
(1) 【设计上】视觉和交互上是一个完整的组件。
(2) 【实现上】写代码的时候，可重复的内容即可视为一个组件。

组件的封装

个人认为，一个称职的组件，是以下形式的：

表 4-2 怎样才算一个称职的组件

能力描述	Vue 中对应属性
组件内维护自身的数据和状态	data
组件内维护自身的事件	methods
通过提供配置的方式，来控制展示，或者控制执行逻辑	props
通过一定的方式（事件触发/监听、API 提供），提供与外界（如父组件）通信的方式	$emit、$on、ref

笼统地概括下，就是我们尽量需要把组件进行隔离，拥有独立的个体空间，同时保持与外界适当的联系。

组件注册

组件命名:

1. 短横线分隔(kebab-case)命名。当使用 kebab-case 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，如<my-component></my-component>。
2. 使用大驼峰(PascalCase)。当使用 PascalCase 定义一个组件时，既可以使用 PascalCase 也可以使用 kebab-case 来引用，像<my-component></my-component>和<MyComponent></MyComponent>。

1.全局注册

通过vue.creatapp({})注册,可以任意使用次数不限制.

// 创建一个Vue 应用
const app = Vue.createApp({
   })

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
   
  data() {
   
    return {
   
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {
    { count }} times.
    </button>`
})

2.局部注册

在模块系统中局部注册

如果使用了babel和webpack的模块系统,一般可以创建一个component母驴,将每个组件防止在各自的文件夹中.

然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

局部注册可通过在实例中的components选项进行配置：

// 获取组件
import MyButton from "../components/my-button";

new Vue({
   
  components: {
    MyButton }
});

组件间通信

1.prop数据传递

prop命名:

这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component("my-component", {
   
  // 在 JavaScript 中是 camelCase 的小驼峰
  props: ["myMessage"],
  template: "<p>{
   { myMessage }}</p>"
});

<!-- 在 HTML 中是 kebab-case 的 -->
<my-component my-message="test"></my-component>

Prop 类型

props高级选项	作用	说明
type	会检查该 prop 是否是给定的类型，否则抛出警告	可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组
default	为该 prop 指定一个默认值	如果该 prop 没有被传入，则换做用这个值，对象或数组的默认值必须从一个工厂函数返回
required	定义该 prop 是否是必填项，默认为false	在非生产环境中，如果这个值为true且该prop没有被传入的，则一个控制台警告将会被抛出
validator	自定义验证函数会将该 prop 的值作为唯一的参数代入	在非生产环境下，如果该函数返回一个false的值 (也就是验证失败)，一个控制台警告将会被抛出

Vue.component("my-component", {
   
  // 简单的数组
  props: ["propA", "propB", "propC", "propD", "propE", "propF"],
  // 高级配置
  props: {
   
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
   
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
   
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
   
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {