Vue3的setup及常用Composition API和新组件

cheney_ci
504 阅读5分钟

入口函数

vue3与vue2相比，不再使用构造函数创建实例对象，且实例对象app比vm更轻。

// main.js

// 引入createApp工厂函数 
import {createApp} from 'vue'
import App from './App.vue'

// 创建应用实例对象app
const app = createApp(App)

// 挂载
app.mount('#app')

setup

setup是vue3的一个新配置项，组件中所用到的数据、方法都得配置在setup中。

setup的返回值

  1. 返回一个对象：对象中的属性和方法在模板中均可以直接使用
  2. 返回一个渲染函数：可以自定义渲染内容
<template>
    <h1>name:{{name}}</h1>
    <h1>age:{{age}}</h1>
    <button @click="sayHello"></button>
</template>

// 如果要返回渲染函数需要引入h函数
import {h} from 'vue'
export default{
    name: 'App',
    // data(){...},
    // methods: {}
    setup(){
        let name = 'zhangsan'
        let age = 18
        
        function sayHello(){
            alert(`我是${name}，我${age}岁了`)
        }
        
        // 返回对象
        return {
            name,
            age,
            sayHello
        }
        
        // 返回渲染函数
        return () => { return h('h1', 'zhangsan') }
    }
}

setup的参数

setup接受props、context两个参数

  1. props：是一个对象，包含组件外部传递过来且组件内部声明接收了的属性
  2. context：上下文对象
  • attrs：对象，包含组件外部传递过来但组件内部没有用props声明接受的属性，相当于this.$attrs
  • slots：收到的插槽内容，相当于this.$slots
  • emit：分发自定义事件的函数，相当于this.$emit

注意点

  1. 尽量不要与vue2的配置混用：vue2配置可以访问到setup中的属性和方法，但在setup中不能访问到；如果vue2配置属性和setup的属性重名，优先显示setup
  2. setup不能是一个async函数，因为返回值是被promise包裹的对象，此时模板拿不到里面的属性
  3. setup在beforeCreate之前执行，且this为undefined

常用Composition API

自定义hook函数

hook本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2中的mixin；它可以复用代码，让setup更简洁。

image.png

import usePoint from '../hooks/usePoint.js
export default {
    setup(){
        let point = usePoint()
        return {point}
    }
}

toRef和toRefs

toRef用于创建一个ref对象，其value值指向另一个对象中的某个属性，可以将响应式对象中的某个属性单独提供给外部使用。

<p>姓名:{{ name }}</p>

// ...
setup(){
    let person = {
        name: 'zs',
        age: 18,
        job: {
           j1: {
               salary: 20
           }
        }
    }
    // const name = toRef(person, 'name')
    return {
        name: toRef(person, 'name'),
        salary: toRef(person.job.j1, 'salary')
        // toRef是引用，内部通过get读取到person属性
        // ref是复制，当name在外部被修改时，person的name并不会被改变
        // name: ref(person.name)
    }
}

toRefs与toRef功能一致，但可以批量创建多个ref对象

return {
    ...toRefs(person)
}

其他Composition API

shallowReactive和shallowRef

shallowReactive只处理对象最外层属性的响应式（浅响应式）。
应用场景：如果有一个对象数据结构比较深，但变化时只是最外层属性改变。

const person = shallowReactive({ // 只会响应name和age属性
    name: 'zs,
    age: 18,
    job:{
        j1:{
            salary:20
        }
    }
})

shallowRef只处理基本数据类型的响应式，不进行对象的响应式处理。
应用场景：如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换。

<h1>{{ x.y }}</h1>
<button @click="x={y:888}">替换</button>
<button @click="x.y++">x.y++</button> // 不生效

//...
const x = shallowRef({
    y: 0
})

readonly和shallowReadonly

readonly和shallowReadonly可以让一个响应式数据变为只读的，前者为深只读，后者为浅只读（里层属性可修改）。
应用场景：不希望数据被修改。

person = readonly(person)
person = shallowReadonly(person) // 可修改salary

return {
    ...toRefs(person)
}

toRaw和markRaw

toRaw可以将一个由reactive生成的响应式对象转为普通对象。
应用场景：用于读取响应式转化后的普通对象，对该普通对象的所有操作都不会引起页面更新（数据会被修改）。

let obj = reactive({
    name:'奔驰',
    price: 20
})

function objRaw(){
    let obj1 = toRow(obj)
    console.log(obj) // Proxy {name:'奔驰', price: 20}
    console.log(obj1) // {name:'奔驰', price: 20}
}

markRaw标记一个对象，使其永远不会成为响应式对象。
应用场景：

  1. 有些值不应被设为响应式，如复杂的第三方类库
  2. 当渲染具有不可变数据源的大列表时，跳过响应式转化可以提高性能
let person  = reactive({
    name: 'zs',
    age:20
})
let car = {name: '奥迪', price: 100}
person.car = markRaw(car) // 把car先变成不可响应的数据，然后再放到响应式数据中

customRef

customRef可以创建一个自定义ref，并对其依赖的数据源进行跟踪及更新触发。它接收track和trigger函数，用于追踪依赖源和更新触发页面。

<input type="text" v-model="keyWord">
<h3>{{ keyword }}</h3>

// ...
import {customRef} from 'vue'
export default {
    setup () {
        function myRef (value, delay) {
            return customRef((track, trigger)=>{
                return {
                    // 从myRef容器中读取数据
                    get () {
                        track() // 追踪最新value
                        return value // 首先是myRef接收的value
                    },
                    // 在myRef容器中修改数据
                    set (newValue) {
                        cleatTimeout(timer) // 防抖
                        timer = setTimeou(()=>{
                            value = newValue
                            trigger() // 提醒vue数据变化，页面需要重新解析渲染
                        }, delay)
                    }
                }
            })
        }
    }
    // let keyWord - ref('Hello') 使用vue提供的ref
    let keyWord = myRef('Hello', 1000) // 使用自定义ref
    return {keyWord}
}
  1. 页面初始化时，keyWord的值为Hello
  2. 当输入框修改keyWord的值时，set会调用trigger()触发页面重新解析渲染
  3. v-model和插值语法会向get读取keyWord的值
  4. 此时get会调用track()追踪keyWord的最新值并渲染到页面上

provide和inject

两者结合可以实现祖与后代组件间通信，父组件通过provide提供数据，后代组件通过inject接收数据。

// 父组件
import {provide} from 'vue'
provide('car', car) // provide('数据名', 数据) 

// 后代组件
import {inject} from 'vue'
const car = inject('car')
return {car}

响应式数据的判断

  1. isRef检查一个值是否为ref对象
  2. isReactive检查一个对象是否是由reactive创建的响应式代理
  3. isReadonly检查一个对象是否是由readonly创建的只读代理
  4. isProxy检查一个对象是否是由reactive或者readonly创建的代理

一些新组件

Teleport

Teleport可以将一个组件结构移动到指定位置的技术。

// 移动位置可以是html、body或其他结构
<teleport to="body>
</teleport>

image.png

image.png
上图teleport将div移动到指定位置body中。

Suspense

Suspense可以在页面加载异步组件时渲染一些额外内容，让应用有更好的用户体验。

// defineAsyncComponent引入异步组件
import {definAsyncComponent} from 'vue'
const Child = definAsyncComponent(()=>import('./components/Child.vue)

//使用Suspense包裹异步组件
<Suspense>
    // default用于展示真正内容
    <template v-slot:default>
        <Child></Child>
    </template>
    // fallback用于显示加载时的内容
    <template v-slot:fallback>
        <h3>稍等一会，加载中</h3>
    </template>
</Suspense>

image.png

image.png

avatar
文章
阅读
粉丝