<template>
? <p>{{userName}}</p>
? <button @click='change()'>change</button>
</template>

<script>
? //引入定義響應(yīng)式數(shù)據(jù)的函數(shù)
? import {reactive} from 'vue';
? import {ref} from "@vue/reactivity"; //!!!!!注意，這里有個(gè)坑，ref必須是引用自vue，而非@vue/reactivity
? export default {
? name: 'App',
? //為Vue3的新特性提供統(tǒng)一入口，代碼都會(huì)在這個(gè)函數(shù)中添加
? //在beforecreated之前進(jìn)行，因此無法訪問this，亦即無法訪問data和method
? setup(){
? ? //定義響應(yīng)式數(shù)據(jù)：數(shù)據(jù)變化，模板中渲染會(huì)自動(dòng)刷新
? ? // const obj=reactive({
? ? // ? userName:'jack',
? ? // });
? ? //只定義一個(gè)變量,可以使用ref將變量定義為響應(yīng)式
? ? let userName=ref('jack')
? ? console.log(userName);
? ? const change=()=> {
? ? ? userName.value='rose' ? ? //注意修改的是ref對(duì)象的value屬性，但是在template中使用的時(shí)候不需要再加value
? ? ? console.log(userName);
? ? }

? ? return {userName,change}
? },
}
</script>

import {ref} from "@vue/reactivity"

import {ref} from "vue"

<template>
  <h1>{{ title }}</h1>
</template>
 
<script>
  export default {
    data() {
      return {
        title: "Hello, Vue!"
      };
    }
  };
</script>

<template>
  <h1>{{ title }}</h1>
  <h2>{{ data.author }}</h2>
  <button @click=""changeTitle>修改title</button>
</template>
 
<script>
  import { ref, reactive, toRefs } from "vue";
  export default {
    setup() {
      const title = ref("Hello, Vue 3!");
      // 修改
      function changeTitle(){
        title.value == "Hello, Vue3!"
      }
 
      const data = reactive({
        author: "青年碼農(nóng)",
        age: "18"
      });
 
      return { title, data, changeTitle };
    }
  };
</script>

const title = ref("Hello, Vue 3!");

title.value?=?"Hello,?Vue3!"

const data = ref({
    author: "青年碼農(nóng)",
    age: "18"
});

data.value.author?=?"nmgwap";

const data = reactive({
    author: "青年碼農(nóng)",
    age: "18"
});

data.author?=?"nmgwap"