Vue3语法

中文网地址

https://v3.cn.vuejs.org/

生命周期

beforeCreate。

created。

beforeMount。

mounted。

beforeUpdate。

updated。

beforeUnmount。

unmounted。

计算属性

可以有get和set。

组件语法

Use class-style component syntax

$parent $refs

子操作父可以用this.$parent。

父操作子可以用：this.$refs.子组件ref.数据=

插槽

v-slot替换为#，如： #default 匿名插槽，#header="{解构数据}"，具名插槽。

Provide Inject

父组件使用Provide传值，子组件使用Inject接收（子组件不限层级）。

父组件：

  provide() {
    return {
      ProductList: this.ProductList,
      Count: 1000,
    };
  },

子组件：

 inject: ["ProductList", "Count"],

**注：**这种方式只是单向数据流。双向数据流请使用Composition API中的方式。

新增组件

Fragment(片断)

不用根节点了。

Teleport(瞬移)

能将内容插入到指定位置。

  <Teleport to="body">
    <div>这是Teleport里的内容</div>
  </Teleport>

Suspense(不确定的)

异步组件加载未完成之前可以使用内容替代显示。

 <Suspense>
    <!-- 默认插槽 组件加载的地方-->
    <template #default>
      <One v-model="age" v-model:age="oneAge"></One>
    </template>
    <!-- fallback是组件加载完成之前的地方 -->
    <template #fallback>
      <h1>One组件正在加载中</h1>
    </template>
  </Suspense>

async setup(props, context) {
    const admin = inject<any>("admin1");
    
    await new Promise((res) => {
      setTimeout(() => {
        context.emit("update:age", 123123123);
        context.emit("update:modelValue", (props.modelValue ?? 0) + 1);
        res(null);
      }, 3000);
    });

    return {
      admin,
    };
  },

Composition API

• setup执行的时机
  • 在beforeCreate之前执行(一次), 此时组件对象还没有创建
  • this是undefined, 不能通过this来访问data/computed/methods / props
  • 其实所有的composition API相关回调函数中也都不可以
• setup的返回值
  • 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
  • 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
  • 返回对象中的方法会与methods中的方法合并成功组件对象的方法
  • 如果有重名, setup优先
  • 注意:
  • 一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
  • setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据，除了异步组件。
• setup的参数
  • setup(props, context) / setup(props, {attrs, slots, emit})
  • props: 包含props配置声明且传入了的所有属性的对象
  • attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
  • slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
  • emit: 用来分发自定义事件的函数, 相当于 this.$emit

ref

let age = ref(20);
age.value = 30;	//修改方式

可以将基本类型变为响应式数据，修改值得需要使用 对象.value = 。

provide inject

provide可以配合ref向子组件传递响应式数据。

子组件可以使用inject接收。

父组件：

let age = ref(20);
provide("age", age);

子组件：

const age = inject("age");

reactive

定义响应式对象。

    const admin = reactive({
      username: "admin",
      role: "Admin",
      password: "admin",
    });

toRefs

解构响应式对象。

toRef

克隆一个对象的属性，两者还能保持关联，能互相修改。

生命周期

setup的生命优先。除了beforeCreate和created都支持。

computed

有set和get函数。

   // reactive相关
    const admin = reactive({
      username: "admin",
      role: "Admin",
      password: "admin",
    });

    // computed相关
    const formatAdmin = computed({
      get() {
        return `admin的完整信息是：账号：${admin.username}，密码：${admin.password}，角色：${admin.role}`;
      },
      set(value) {
        admin.username = "computed修改username：" + value;
      },
    });

    setTimeout(() => {
      formatAdmin.value = "SuperAdmin";
    }, 3000);

watch

watch(
      user,
      (newvalue, oldvalue) => {
        console.log(`user的变化：`, newvalue, oldvalue);
      },
      {
        immediate: true,
        deep: true,
      }
    );

​ immediate: true, //无论有变化，加载后立即执行

​ deep: true, //深度监听

watchEffect

    watchEffect(() => {
      console.log(`user有变化：`, user);
      // console.log(`age有变化：${age.value}`);
    });

只要effect里的对象有变化就能监听到。

nextTick

一个异步方法，用来获取更新后的dom元素的内容。

useStore

从vuex里导入。

 const store = useStore();	//这是一个函数

refs

const h = ref<HTMLElement>();

v-model

vue3已经将.sync和v-model整合在了一起，废弃了.sync。

父组件：

<One v-model:value="age"></One>

子组件：

setup(props, context) {
    setTimeout(() => {
      context.emit("update:value", (props.value ?? 0) + 1);
    }, 3000);

    const admin = inject<any>("admin1");
    return {
      admin,
    };
  },
  props: {
    value: Number,
  },

router

配置规则

{
    path: '/about/:id(\\d+)/:name?',
    name: 'About',
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

可以使用正则限制路由传参，?是可以不传此参。

props:true：表示路由参数的数据可以放置在页面中的props中。

 setup(props, context) {
    const route = useRoute();
    console.log(route.params.id, route.params.name);

    //{ id:"1",name:'admin' }

    // console.log(route);
  },
  props: ["id", "name"],

/ ‘…/views/About.vue’)
}

可以使用正则限制路由传参，?是可以不传此参。

props:true：表示路由参数的数据可以放置在页面中的props中。

```js
 setup(props, context) {
    const route = useRoute();
    console.log(route.params.id, route.params.name);

    //{ id:"1",name:'admin' }

    // console.log(route);
  },
  props: ["id", "name"],