vue3实战-完全掌握ref、reactive

知道大家使用 Vue3 的时候有没有这样的疑惑,“ref、rective 都能创建一个响应式对象,我该如何选择?”,“为什么响应式对象解构之后就失去了响应式?应该如何处理?” 今天咱们就来全面盘点一下 ref、reactive,相信看完你一定会有不一样的收获,一起学起来吧!

reactive()

基本用法

在 Vue3 中我们可以使用 reactive() 创建一个响应式对象或数组:

import { reactive } from 'vue'

const state = reactive({ count: 0 })

这个响应式对象其实就是一个 Proxy, Vue 会在这个 Proxy 的属性被访问时收集副作用,属性被修改时触发副作用。

要在组件模板中使用响应式状态,需要在 setup() 函数中定义并返回。

<script>
import { reactive } from 'vue'

export default {  setup() {    const state = reactive({ count: 0 })    return {      state    }  }}
script>

<template>
  <div>{{ state.count }}div>
template>

当然,也可以使用

你可能感兴趣的:(vue.js)