setup方法与script_setup及ref响应式

setup方法与script_setup

在Vue3.1版本的时候，提供了setup方法；而在Vue3.2版本的时候，提供了script_setup属性。那么setup属性比setup方法对于操作组合式API来说会更加的简易。


<template>
  <div>
    <h2>setup方法</h2>
    {{ count }}
  </div>
</template>

// Vue3.1
<script>
export default {
  setup () {
    let count = 0;
    return {
      count
    }
  }
}
</script>

// Vue3.2
<script setup>
let count = 0;
</script>

setup方法是需要把数据进行return后，才可以在template标签中进行使用，而setup属性方式定义好后就可以直接在template标签中进行使用。

ref响应式

下面来学习一下，如何在组合式API中来完成数据的响应式操作，通过的就是ref()方法，需要从vue模块中引入这个方法后才可以使用。

<script setup>
import { ref } from 'vue';
let count = ref(0);   // count -> { value: 0 }
//count += 1;   //✖
count.value += 1;   // ✔
</scirpt>

count数据的修改，需要通过count.value的方式，因为vue底层对响应式数据的监控必须是对象的形式，所以我们的count返回的并不是一个基本类型，而是一个对象类型，所以需要通过count.value进行后续的操作，那么这种使用方式可能会添加我们的心智负担，还好可以通过Volar插件可以自动完成.value的生成，大大提升了使用方式。

这是由于JS对基本数据类型和引用数据类型操作行为不同导致的。JS中基本数据类型的链式复制是复制值，相互之间的修改互不影响，因此无法监听变化。而引用数据类型复制的是引用(地址相同)，数据的修改会相互影响，因此可以监听变化。

那么现在count就具备了响应式变化，从而完成视图的更新操作。

那么ref()方法还可以关联原生DOM，通过标签的ref属性结合到一起，也可以关联到组件上。

<template>
  <div>
    <h2 ref="elem">setup属性方式</h2>
  </div>
</template>
<script setup>
import { ref } from 'vue';
let elem = ref();
setTimeout(()=>{
  console.log( elem.value );   //拿到对应的原生DOM元素
}, 1000)
</script>

事件方法_计算属性 reactive_toRefs

事件方法与计算属性

下面看一下在组合式API中是如何实现事件方法和计算属性的。

<template>
  <div>
    <button @click="handleChange">点击</button>
    {{ count }}, {{ doubleCount }}
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
let count = ref(0);
let doubleCount = computed(()=> count.value * 2)
let handleChange = () => {
  count.value += 1;
};
</script>

事件方法直接就定义成一个函数，计算属性需要引入computed方法，使用起来是非常简单的。

reactive与toRefs

reactive()方法是组合式API中另一种定义响应式数据的实现方式，它是对象的响应式副本。

<template>
  <div>
    <h2>reactive</h2>
    {{ state.count }}
  </div>
</template>

<script setup>
import { reactiv} from 'vue';
let state = reactive({
  count: 0,
  message: 'hi vue'
})
state.count += 1;
</script>

reactive()方法返回的本身就是一个state对象，那么在修改的时候就不需要.value操作了，直接可以通过state.count的方式进行数据的改变，从而影响到视图的变化。

ref()和reactive()这两种方式都是可以使用的，一般ref()方法针对基本类型的响应式处理，而reactive()针对对象类型的响应式处理，当然还可以通过toRefs()方法把reactive的代码转换成ref形式。

<template>
  <div>
    <h2>reactive</h2>
    {{ state.count }}, {{ count }}
  </div>
</template>

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

let state = reactive({
  count: 0
})
let { count } = toRefs(state);   //  let count = ref(0)
setTimeout(() => {
  //state.count += 1;
  count.value += 1;
}, 1000)

</script>

也可以使用toRef进行转换：

//let { count } = toRefs(state); // let count = ref(0)
let count = toRef(state, 'count');

转换后state.count和count.value的值修改会影响对方，对方也会同步修改。

Vue3笔记(八)：CompositionAPI的setup、ref、方法、计算属性、reactive、toRefs及toRef

setup方法与script_setup及ref响应式