vue3.0组合api

组合API

解决数据和业务逻辑分离的问题

Composition API和Option API混用

setup函数

setup函数是组合API的入口函数，在组合API中定义的变量/方法，要想在外界使用，必须return{xxx,xxx}。 setup 选项应该是一个接受props和context的函数

setup注意点

• 1、由于在执行setup函数时，还没有执行created,此时无法使用data和methods;
• 2、由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有this；
• 3、setup函数只能是同步的，不能是异步的；

ref函数

ref函数只能监听简单类型的变化，不能监听复杂类型的变化（对象/数组）——》reactive({})

• 本质：给ref函数传递一个值:ref(18)，相当于reactive({value:18})

const counter = ref(0)
console.log(counter) // { value: 0 }
console.log(counter.value) // 0

• Ref展开 当 ref 作为渲染上下文 (从 setup() 中返回的对象) 上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value：

reactive({})

reactive是vue3中提供的实现响应式数据的方法；在vue2中，响应式数据通过defineProperty实现，vue3中，是通过ES6的proxy实现的；

• 参数必须是对象/数组，否则数据更改时，无法实现响应式，界面无法及时更新；

<template>
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'
  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

• isRef\isReactive方法判断数据是否是ref类型或者reactive类型

isRef(xxx);
isReactive(xxxx)

toRefs

解构props对象

const { name } = toRefs(props);
// 因为是包装对象，所以读取的时候要用.value
console.log('name :>> ', name.value);

toRef

针对一个 key 进行包装

const name = toRef(props,'name');
console.log('name :>> ', name.value);

toRaw

从reactive或ref中得到原始数据,做一些不想被监听的事情（提升性能）

let obj = {
      name: 'lnj',
      age: 18,
}
let state = reactive(obj)
let obj2 = toRaw(state)
console.log(obj === obj2) //true

递归监听

默认情况下，通过ref或者reactive都是递归监听；递归监听将使每一层都被包装成一个Proxy

非递归监听

除了第一层之外其它层没有被包装成Proxy;

只有在数据量偏大的情况下，才使用非递归监听shallowRef、shallowReactive；

• shallowRef创建数据，vue监听的是.value的变化；
• shallowReactive

Vue 3.0 中文文档：v3.cn.vuejs.org/ www.bilibili.com/video/BV14k…

Vue3项目创建

创建 Vue3 的三种方式

• Vue-Cli
• Webpack
• Vite

使用vite创建项目

• 安装 Vite

npm install -g create-vite-app
yarn add create-vite-app

• 利用 Vite 创建 Vue3 项目

create-vite-app projectName
cd projectName
npm install
npm run dev

vue3.0起步

创建一个应用实例

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
import store from './store/index'
const  app = createApp(App)
// 通过use 将 路由插件安装到 app 中
app.use(router)
app.use(store)
app.mount('#app')

// createApp(App).mount('#app')

v3.cn.vuejs.org/guide/insta…

vue3 全局注册

• provide/inject

const demo= () => {
    console.log('i am demo')
}
app.provide('demoFun',demo)

//使用
import {inject} from 'vue'
const test = inject('demoFun');

test()//调用

• globalProperties

//main.js
app.config.globalProperties.$query = 2
app.config.globalProperties.http = () => {
    console.log('i am http')
}

//使用
import {reactive,getCurrentInstance  } from 'vue'
const {proxy} = getCurrentInstance();
proxy.http()