Vue3 学习记录

安装

使用 Vite 搭建官网

• 全局安装

yarn create vite-app / npm init vite-app

• 创建项目目录

create-vite-app <project-name> / cva <project-name>

Vue2 和 Vue3区别

1. 90%的写法一致
2. Vue3的 Template支持多个根标签,Vue2不支持
3. Vue3是 createApp() ,Vue2是 new Vue()
4. createApp(组件)，new Vue({template, render})

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。

import {ref} from 'vue'

const value = ref<boolean>(false)
return {value}

setup(compoents ApI)

使用 setup 函数时，它将接受两个参数：

1. props
2. context

export default{
  /*
  props 父组件传过来的属性
  context当前实例
  */
    setup(props,context){
  
    //this.$emit('xxx')
    context.emit('xxxx')
  }
}

还可以这样使用

<script setup>
import { ref } from 'vue'
let count = ref(1)
function add(){
  count.value++
}
</script>

v-model

• 新的v-model代替了以前的v-model和.sync

<switch :value='x' @update:value="x=$event"/>
<switch v-model:value="y"/>

Vue3 属性绑定

1. 默认所有属性都绑定到根元素
2. 使用 inheritAttrs: false 可以取消默认绑定

<script lang="ts">
export default {
    inheritAttrs:false
}  
</script>

3. 使用 $attrs 或者 context.attrs 获取所有属性
4. 使用 v-bind="$attrs" 批量绑定属性
5. 使用 const {size, level, ...xxx} = context.attrs 将属性分开

Props vs attrs

• props 要先声明才能取值，attrs 不用先声明
• props 不包含事件，attrs 包含
• props 没有声明的属性，会跑到 attrs 里
• props 支持 string 以外的类型，attrs 只有 string 类型

Teleport

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件。

<template>
  <Teleport to="body">
    <div></div>
  </Teleport>
  // 告诉 Vue “Teleport 这个 HTML 到该‘body’标签”
</template>  

用 JS 获取插槽内容

const defaults = context.slots.default()