Vue 3 的使用

使用 Vite 搭建官网

1. 全局安装 create-vite-app

yarn global add create-vite-app //@1.18.0
// 或者 
npm i -g create-vite-app

2. 创建项目目录

cva 项目名

3. 引入 Vue Router 4

yarn add vue-router@4.0.0-beta.3

4. 初始化 vue-router

• 新建 history 对象
• 新建 router 对象
• 引入 TypeScript
• app.use(router)
• 添加
• 添加

import {createRouter, createWebHashHistory} from 'vue-router';
const history = createWebHashHistory()
 const router = createRouter({
  history: history,
  routes:[
    {path: '/', component: Home},]
})

Vue3 内部数据和外部数据的使用

内部数据自己使用

<template>
  <button @click="toggle" :class="{checked}">
    <span></span>
  </button>
</template>

setup() {
    const checked = ref(true);
    const toggle = () => {
      checked.value = !checked.value;
    };
    return {checked: checked, toggle};
  }
};

传进来外部数据使用

父组件

<template>
  <div>
     <Switch :value="y" @input="y = $event"/>
     //可以简写为：<Switch v-model:value="y" />
  </div>
</template>

setup(){
    const y = ref(true)
    return {y}
  }

子组件(Switch)：

  <button @click="toggle" :class="{checked:value}">
    <span></span>
  </button>

 props: {
    value: Boolean
  },
  setup(props, context) {
    const toggle = () => {
      context.emit('input', !props.value);
    };
    return {toggle};
  }

Vue 2 和 Vue 3 的区别

90% 的写法完全一致，除了以下几点：

• Vue 3 的 Template 支持多个根标签，Vue 2 不支持
• Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
• createApp(组件)，new Vue({template, render})
• 新 v-model 代替以前的 v-model 和 .sync
• 新增 context.emit，与 this.$emit 作用相同

Vue 3 属性绑定

1. 默认所有属性都绑定到根元素
2. 使用 inheritAttrs: false 可以取消默认绑定
3. 使用 $attrs 或者 context.attrs 获取所有属性
4. 使用 v-bind="$attrs" 批量绑定属性
5. 使用 const {size, level, ...xxx} = context.attrs 将属性分开。例如： 父组件:

  <div>
    <Button>你好</Button>
    <Button @click="onClick"
      @focus="onClick"
      @mouseover="onClick"
      size="big"
    >你好</Button>
  </div>

setup(){
    const onClick = ()=>{
      console.log('hi')
    }
    return {onClick}
  }

子组件（Button）:

<div :size="size">
    <button v-bind="rest">
      <slot />
    </button>
  </div>

inheritAttrs: false,
  props: {
  size: big
  },
  setup(props, context) {
    const { size, ...rest } = context.attrs;
    return { size, rest };
  },