11.Vue中的响应式编程

我们在前面的组件中，属性data中的数据都是响应式的，其实内部就是通过ref()函数和reactive（）函数操作的

1.ref的使用

对于一些简单类型的数据，如数字，字符串，布尔值，我们希望也变成响应式的对象，我们就可以使用ref函数

import {ref} from "vue";
const v = ref(10)

数据修改，通过value操作

import {ref, reactive} from "vue";
const v = ref(10)
v.value = 100

 

2.reactive的使用

对于复杂类型的数据，如对象，数组就可以使用reactive将其变成响应式对象

import {ref, reactive} from "vue";
const v = ref(10)
const p = reactive({
  name:'kunmzhao',
  age:18
})

数据的修改

import {ref, reactive} from "vue";
const p = reactive({
  name:'kunmzhao',
  age:18
})
p.name = 'Victor'

 

3.setup函数

setup是在组件被创建之前执行，组件中的数据  方法都放在setup中  注意：在生命周期方面，它是在 beforeCreate 钩子之前调用的。在 setup 中你应该避免使用 this，因为它不会找到组件实例

如果 setup 返回一个对象，则该对象的属性将合并到组件模板的渲染上下文中

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // 暴露到template中
      return {
        count,
        object
      }
    }
  }
</script>

 

4. script setup

script setup是 Vue3 的一个新语法糖，相比于普通的语法，简化了组合式API必须return的写法，拥有更好的运行时性能。

<script lang="ts" setup>
    import assembly from '../components/HelloWorld'
</script>

<template>
  <div>
    <span>{{ v }}</span>
  </div>

</template>

<style>
</style>
<script setup>

import {ref} from "vue";

const v = ref(10)


</script>