07组合式

组合式原始模式

<template>
  <h1>{{ hello }}</h1>
  <h1>{{ count }}</h1>
  <h1>{{ user.age }}</h1>
  <button @click="user.age++">点击累加</button>
  <button @click="test">点击</button>
</template>
 
<script>
import { reactive } from 'vue';
 
export default {
  setup() {
    let hello = '你好';
    let count = 0;
 
    //响应式数据(这里变了页面也跟着变)，利用reactive
    let user = reactive({
      age: 20
    })
 
    function test() {
      console.log(hello, user.age)
    }
 
    // 通过return暴露数据
    return {
      hello,
      count,
      user,
      test
    }
  }
}
</script>

组合式正式版

<template>
  <h1>{{ hello }}</h1>
  <h1>{{ count }}</h1>
  <h1>{{ user.age }}</h1>
  <button @click="user.age++">点击累加</button>
  <button @click="test">点击</button>
</template>
 
<script setup>
	import { reactive } from 'vue';
	
	let hello = '你好';
	let count = 0;
	
	//响应式数据(这里变了页面也跟着变)，利用reactive
	let user = reactive({
	  age: 20
	})
	
	function test() {
	  console.log(hello, user.age)
	}
</script>