1. 利用vite创建vue3项目

npm init vite-app projectName
安装依赖运行项目：

cd projectName
npm install
npm run dev
复制代码

2. Vue3 练习代码

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <br />
  <input type="text" v-model="msg" />
  <button @click="updateMsg">改变msg</button>
  <br />
  {{ msg }}
  <br />
  <p @click="change">{{ flag }}</p>
  <hr />
  <button @click="updateName">修改姓名</button> *
  <button @click="delAge">删除年龄</button> *
  <button @click="addSchool">新增学校</button>
  <p>姓名：{{ obj.name }}</p>
  <p>年龄：{{ obj.age }}</p>
  <p>学校：{{ obj.school }}</p>
  <hr />
  <p>父子组件传值，点击子改父</p>
  <comp-b :str="str" @changezi="changezi"></comp-b>
  <hr />
  <p>计算属性和侦听器</p>
  <p @click="changeStr1">{{ str1 }}</p>
  <p>{{ str3 }}</p>
  <hr />
  <p>组件通信</p>
  <comp-a></comp-a>
</template>

<script>
import CompB from "./components/CompB.vue";
import CompA from "./components/CompA.vue";
import { ref, reactive, computed, watch, provide } from "vue";
export default {
  name: "App",
  components: {
    CompB,
    CompA,
  },
  // setup函数执行的顺序比beforeCreate要早
  setup: function () {
    // ref 响应式
    // 基本数据类型使用ref （Undefined、Null、Boolean、Number、String、Symbol）

    let msg = ref("hello,sun");
    let flag = ref(true);
    function updateMsg() {
      // 修改ref的数据需要.value
      msg.value = "我修改了msg";
    }
    function change() {
      flag.value = !flag.value;
    }
    // 引用数据类型使用reactive（Object、Array、Date 、RegExp、Function ）
    let obj = reactive({
      name: "张三",
      age: 30,
    });
    // 组件通信 provide(数据名，数据值)
    provide("info", obj);

    // 对引用数据类型进行监听
    watch(obj, (newV) => {
      console.log("新值：" + JSON.stringify(newV));
    });

    // 监听对象某一属性，需要用箭头函数的形式如：() => obj.name
    watch(
      () => obj.name,
      (newV, oldV) => {
        console.log("新值：" + newV);
        console.log("旧值：" + oldV);
      }
    );

    function updateName() {
      obj.name = "李斯";
    }
    function delAge() {
      delete obj.age;
    }
    function addSchool() {
      obj.school = "北大";
    }

    // 父子传值，子改父
    let str = ref("knock,knock");
    function changezi(val) {
      str.value = val;
    }

    // 计算属性
    let str1 = ref("落花时节");
    let str2 = ref("又逢君");
    let str3 = computed(() => {
      return str1.value + str2.value;
    });
    function changeStr1() {
      str1.value = "花开河畔";
    }
    //  使用watch 监听基本数据类型.{immediate:true}一进入页面就监听
    watch(
      str1,
      (newV, oldV) => {
        console.log("新值：" + newV);
        console.log("旧值：" + oldV);
      },
      { immediate: true }
    );
    return {
      str1,
      str2,
      str3,
      msg,
      flag,
      obj,
      str,
      updateMsg,
      change,
      updateName,
      delAge,
      addSchool,
      changezi,
      changeStr1,
    };
  },
};
</script>
复制代码

组件A

<template>
  <h2>{{ mes }}</h2>
</template>

<script>
import { inject } from "vue";
export default {
  setup() {
    const mes = inject("info");
    return {
      mes,
    };
  },
};
</script>
复制代码

组件B

<template>
  <!-- vue3支持多个根元素 -->
  <h1 @click="changeZ">{{ str }}</h1>
</template>

<script>
export default {
  name: "CompB",
  props: ["str"],
  //   ★setup里this 指向vue实例
  setup(props, { emit }) {
    //  在setup中使用props的数据，要借助方法的第一个参数
    console.log(props.str);
    // 在setup中子改父需要借助方法的第二个参数
    function changeZ() {
      emit("changezi", "open the door");
    }
    return {
      changeZ,
    };
  },
};
</script>