Vue3 学习

声明响应式状态​

ref()​

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

 

import { ref } from 'vue' const count = ref(0)

 

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) //

 

　

要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们：

import { ref } from 'vue'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}

 

reactive()

​

还有另一种声明响应式状态的方式，即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：

reactive() 将深层地转换对象：当访问嵌套对象时，它们也会被 reactive() 包装。当 ref 的值是一个对象时，ref() 也会在内部调用它

 

toRefs()

... 三个点是扩展运算符

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

<template>
  <div>
    {{ id }}---{{ name }}
  </div>
  <button @click="change('aaa')">click</button>
</template>

<script>
import { reactive,toRefs } from 'vue';

export default {
  //setup函数将响应式数据对象return供template使用
  setup(props, context) {
    const state = reactive({
      id: 1,
      name: "程序员"
    })

    const change = (param) => {
      state.id += 1;
      console.log(param);
      console.log(state.id);
    }
    console.log(state);
    console.log(toRefs(state));
    return {
      ...toRefs(state),//...扩展运算符
      change
    }
  }
}