vue3定义数据

<template>

template>
<script lang='ts'>
// 可以编写ts代码
// defineComponent函数，目的是可以定义一个组件，内部可以传入一个配置对象
import { defineComponent } from 'vue';
// 暴露出一个定义好的组件
export default defineComponent({
   name: '',
   setup(){//组合API中第一个要使用的函数
 } 
});
script>
<style>
style>

vue2--vue3数据的响应式

vue2:

<template>
<h2>{{num}}h2>
<button @click="num++">+button>
template>
<script lang='ts'>
import { defineComponent,ref } from 'vue';
export default defineComponent({
    name:'setUp',
   data(){
       return{
           num:1
       }
   }
});
script>
<style>
style>

vue3:

<template>
<h2>{{num2}}h2>
<button @click="num2++">+button>
template>
<script lang='ts'>
import { defineComponent,ref } from 'vue';
import childSetup from './setup2.vue'
export default defineComponent({
    name:'setUp',
   // vue3实现方式
   setup(){
       // ref是一个函数，定义一个响应式数据，返回一个ref属性
       // 一般定义一个基本数据类型
       const num2 = ref(8) // 一般定义基本数据类型，需要在上面import引入ref
       // num2++ 报错是因为ref返回的是一个ref对象，他的指在value字段上，但在html中直接用变量就行。不用.value
       // const num2 = 8  // 这样定义的数据不是响应式的
       return {
           num2
       }
   }
});
script>
<style>
style>

vue3用的ref来实现基本数据类型的响应式，而多个属性或对象，要用reactive,同样也要在import里引入reactive

<template>
<h2>{{user.name}}h2>
<h2>{{user.age}}h2>
<button @click="updata">更新button>
template>
<script lang='ts'>
import { defineComponent,reactive } from 'vue';
export default defineComponent({
   name: '',
   setup(){
       // 定义多个对象时，要用reactive函数
       // 定义多个对象的响应式
       // 返回的是一个proxy代理对象
       const obj = {
           name:'小亮',
           age:32
       }
       const user = reactive(obj)
       // user是代理对象，obj是实际对象
       function updata(){
           // 两种方式只有第一种才会页面数据更新，是响应式结果
           user.name = '我就是雷公'
           //obj.name='我就是雷公'
       }
       // 总结：
       // 如果操作代理对象，实际对象也会发生变化，且页面数据也会进行更新
       return {
           user,
           updata
       }
   }
});
script>