vue3

20.vue3/project1/src/App.vue

@@ -7,12 +7,16 @@
     <hr>
     <hr>
     <Demo2></Demo2>
+    <hr>
+    <hr>
+    <Demo3></Demo3>
   </div>
 </template>
 
 <script setup>
 import Demo1 from './components/Demo1.vue'
 import Demo2 from './components/Demo2.vue'
+import Demo3 from './components/Demo3.vue'
 </script>
 
 <style lang="scss" scoped>

20.vue3/project1/src/components/Demo2.vue

@@ -4,15 +4,25 @@
     <hr />
     <h1>Demo2</h1>
     <h3>我叫{{ name }}</h3>
+    <button @click="changeName">修改名字</button>
   </div>
 </template>
 <script setup>
+import { ref } from 'vue';
 /**
  * setup函数返回对象上的内容 可以直接在模版使用
  * setup中this指向undefined 不能在setup中使用this
  */
-let name = "图图";
-console.log(this)
+// ref定义基本数据类型
+// ref定义的变量是一个对象 通过.value访问和修改值
+let name = ref("图图");
+console.log(name);
+// console.log(this)
+function changeName() {
+    // name = '孙悟空';
+    // name.value
+    name.value = '孙悟空';
+}
 </script>
 
 <!-- <script>

20.vue3/project1/src/components/Demo3.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <hr />
+    <hr />
+    <h1>Demo3</h1>
+    <h2>我叫{{ obj.name }},今年{{ obj.age }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script setup>
+import {reactive} from "vue" 
+let obj = reactive({
+    name:'图图',
+    age:18
+})
+console.log(obj,'obj');
+function changeName() {
+    obj.name = '孙悟空';
+}
+function changePerson() {
+    // obj.name = '孙悟空';
+    // obj.age = 20;
+    Object.assign(obj,{
+        name:'孙悟空',
+        age:20
+    })
+    // obj = {
+    //     name:'猪八戒',
+    //     age:28
+    // }
+    // console.log(obj,'obj1')
+}
+</script>
+
+<style lang="scss" scoped>
+</style>