导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

算法

UI、组件库

Node

业务技能

针对性攻坚

公共类

基础设施

AI

准备工作

升级脚手架

npm i @vue/cli -g

vue create 项目名称

composition api （组合API）概念

• 组合API
• 框架层面的
• 把 api 拆分成一个个 hook（钩子） → 最后组合起来形成 → Vue3.0 Composition API 框架设计模式

import { watch, ref, toRef, onMounted, computed } from 'vue';
// 在 setup 中使用 composition api

存在意义

setup 的存在，就是为了能够在其中使用 Composition API

🔥 调用时机

props 初始化完毕之后，beforeCreate 之前被调用

基本使用

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    return {
      count: 0
    }
  },
}
</script>

返回值

• return 一个对象，对象中的属性会被合并到 render 函数的上下文中供 template 使用
• return 一个 render 函数，可以渲染模板

render function

• 可以把 template 删掉，在 setup 中直接 return 一个函数渲染模板

<script>

import { ref, h } from 'vue';

export default {
  name: 'App',
  setup() {
    const count = ref(0);
    return () => h('h1', [count.value]);
  }
}
</script>

render JSX

<script>
  export default {
    name: 'App',
    setup() {
      return () => <div>123</div>;
    }
  }
</script>

参数

• props 接收的属性
  • 不要在 setup 中解构 props ，会导致 props 被解构的值丧失响应式
    • ❌ setup({ title })
    • ❌ const { title } = props
• context 上下文选项列表
  • attrs
  • slots
  • emit
  • expose
• 为什么不把 props 和 context 合并在一起当一个参数
  • props 使用比 attrs、emit 更频繁
  • 可以更好的为 props 做类型推断（TS）

props

父组件 App.vue

<template>
  <div>
    <Test :title="title" />
  </div>
</template>

<script>

import { ref, h } from 'vue';
import Test from '@/components/Test';

export default {
  name: 'App',
  setup() {
    const title = ref('Lance');
    setTimeout(() => {
      title.value = 'Lance233';
    }, 1000);
    return {
      title
    };
  },
  components: {
    Test
  }
}
</script>

子组件 Test.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script>
import { watch, watchEffect } from 'vue';
export default {
  name: 'Test',
  props: {
    title: String
  },
  setup(props) {
    console.log(props); // Proxy { title: 'Lance' }
    watchEffect(() => {
      console.log('title:', props.title); // 初始化Lance和变化后Lance233都能监听到
    });
    
    watch(() => {
      return props.title; // 要监听的值
    }, (newVal) => {
      console.log('new Title:', newVal); // 只会监听变化后的值
    });
  }
}
</script>

使用一个对象绑定多个 prop

如果你想要将一个对象的所有属性都当作 props 传入，你可以使用没有参数的v-bind，即只使用 v-bind 而非 :prop-name。例如，这里有一个 post 对象：

const post = {
  id: 1,
  title: 'My Journey with Vue'
}

以及下面的模板：

<BlogPost v-bind="post" />

而这实际上等价于：

<BlogPost :id="post.id" :title="post.title" />

context

• 区别于 props ，可以被解构
  • setup(props, { attrs, slots })
  • const { attrs, slots } = context
• 包含选项列表
  • attrs
  • slots
  • emit
  • expose

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  name: 'Test',
  props: {
    title: String
  },
  setup(props, context) {
    console.log(context);
  }
}
</script>

attrs