Vue 笔记 08

介绍

1. 创建Vue3工程的两种方式

1. 使用vue-cli：创建方法同Vue2是相同的，但要注意vue-cli的版本要在4.5.0以上
2. 使用vite：

   优势：
   	1. 开发环境中，无需打包操作，可快速的冷启动
   	2. 轻量快速的热重载（HMR）
   	3. 真正的按需编译，不再等待整个应用编译完成
   使用：
   	1. npm init vite-app vue3_test_vite
   	2. cd vue3_test_vite
   	3. npm install
   	4. npm run dev
   

2. 目录结构分析

main.js 中的变化

// 引入的是一个名为createApp的工厂函数
import {
    createApp } from "vue";
import App from "./App.vue";

// 创建应用实例对象--app(类似于之前Vue2中的vm，但app比vm更轻)
const app = createApp(App);
console.log("-----dudu-----", app);
// 挂载
app.mount("#app");
// 卸载
setTimeout(() => {
   
  app.unmount("#app");
}, 2000);

App.main的变化

// 定义组件的函数，参数是一个配置对象
import {
    defineComponent } from 'vue';
export default defineComponent({
   
  name: 'App',
  components: {
   
    HelloWorld
  }
});

其余的与Vue2基本一致，但Vue3组件中的模板结构可以没有根标签

常用 Composition API

1. setup

Vue3中一个新的配置项，值为一个函数
组件中所用到的：数据、方法等等都要配置在setup中
两种返回值：
    1. 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用
    2. 若返回一个渲染函数，则可以自定义渲染内容
注意点
    1. 尽量不要与Vue2中的配置混用
        - Vue2配置的内容可以访问到setup中的属性和方法
        - 但是setup中访问不到Vue2中配置的内容
        - 如果配置出现了重名，setup配置优先
    2. setup不能是一个async函数，因为函数的返回值不再是return的对象，而是promise对象，模板看不到return对象中的属性    

<template>
  <div>
    <h1>个人信息</h1>
    <h2>姓名：{
  { name }}</h2>
    <h2>年龄：{
  { age }}</h2>
    <button @click="sayHello">打招呼</button>
  </div>
</template>

<script>
import {
      h } from "vue";
export default {
     
  name: "App",
  components: {
     },
  // 此处暂时不考虑响应式的问题
  setup() {
     
    let name = "LMY";
    let age = 25;
    function sayHello() {
     
      alert(`你好，我是${
       name}，我今年${
       age}岁了`);
    }
    return {
      name, age, sayHello };
    
    // 返回一个渲染函数，此时不解析模板中的内容，将函数返回的内容添加到组件中
    // return () => h("h1", "dudu");
  },
};
</script>

setup执行的时机：在beforeCreate之前执行一次，this是undefined

beforeCreate() {
   
  console.log("---beforeCreate---", this);
},
setup() {
   
  console.log("---setup---", this);
}

setup的参数之一props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

<demo msg="Hello" dudu="Vue3"></demo>

export default {
   
  name: "Demo",
  props: ["msg", "dudu"],
  setup(props) {
   
    console.log(props); // Proxy {msg: 'Hello', dudu: 'Vue3'}
  },
};

setup的参数之二context：上下文对象

---

attrs属性：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs

export default {
   
  name: "Demo",
  props: ["msg"],
  setup(props, context) {
   
    console.log(context.attrs); // Proxy {dudu: 'Vue3', __vInternal: 1}
  },
};

---

slots属性：收到的插槽内容，相当于this.$slots

<demo>
  <!-- 使用v-slot命令才能在子组件的上下文参数中接收到 -->
  <template v-slot:dudu>
    <div>大河之剑天上来</div>
  </template>
</demo>

export default {
   
  name: "Demo",
  setup(props, context) {
   
    console.log(context.slots); // Proxy {_: 1, __vInternal: 1, dudu: ƒ}
  },
}