vue3

12.vue3/project1/src/App.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
     <Demo1></Demo1>
+    <hr><hr><hr>
+    <Demo2></Demo2>
+    <hr><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>

12.vue3/project1/src/components/Demo1.vue

@@ -10,7 +10,7 @@
 import {ref} from 'vue';
 // ref定义基本数据类型
 let name1 = ref("图图");
-console.log(name1.value)
+console.log(name1)
 function changeName() {
     name1.value = '哪吒'
 }

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="demo1">
+    <p>我叫{{ obj.name }},今年{{ obj.age }}岁</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script setup>
+// setup 中不允许使用this
+import {reactive} from 'vue';
+// reactive定义引用数据类型
+let obj = reactive({
+  name: '喜羊羊',
+  age: 3
+})
+function changeName() {
+  obj.name = '懒羊羊'
+}
+function changePerson() {
+  // obj = {name:'1',age:10}
+  Object.assign(obj, {name:'1',age:10})
+}
+console.log(obj,'reactive')
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="demo1">
+    <p>我叫{{ obj.name }},今年{{ obj.age }}岁</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script setup>
+// setup 中不允许使用this
+import {ref} from 'vue';
+// ref定义引用数据类型
+let obj = ref({
+  name: '喜羊羊',
+  age: 3
+})
+console.log(obj,'ref')
+function changeName() {
+  obj.value.name = '懒羊羊'
+}
+function changePerson() {
+  obj.value = {name:'12',age:10}
+  // Object.assign(obj.value, {name:'1',age:10})
+}
+console.log(obj)
+</script>
+
+<style>
+
+</style>