Merge remote-tracking branch 'vue3-学习仓库/dev' into dev

# Conflicts:
#	.idea/workspace.xml
#	README.md
#	src/components/Person.vue

.idea/workspace.xml

@@ -4,43 +4,21 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="新项目">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="computed 计算属性，">
-      <change afterPath="$PROJECT_DIR$/vue3_01_hello/src/components/Person.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/vue3_01_hello/src/App.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/components/HelloWorld.vue" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/components/TheWelcome.vue" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/components/WelcomeItem.vue" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/components/icons/IconCommunity.vue" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/components/icons/IconDocumentation.vue" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/components/icons/IconEcosystem.vue" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/components/icons/IconSupport.vue" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/src/components/icons/IconTooling.vue" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/vue3_01_hello/vite.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/vue3_01_hello/vite.config.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
-  <component name="FileTemplateManagerImpl">
-    <option name="RECENT_TEMPLATES">
-      <list>
-        <option value="Vue Composition API Component" />
-      </list>
-    </option>
-  </component>
   <component name="Git.Settings">
-    <option name="RECENT_BRANCH_BY_REPOSITORY">
-      <map>
-        <entry key="$PROJECT_DIR$" value="master" />
-      </map>
-    </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
+  <component name="ProjectColorInfo">{
-  "associatedIndex": 3
+  &quot;associatedIndex&quot;: 3
-}]]></component>
+}</component>
   <component name="ProjectId" id="2wOjf2pz32CUW5I0w9ht0hb3zbS" />
   <component name="ProjectLevelVcsManager" settingsEditedManually="true">
     <ConfirmationsSetting value="2" id="Add" />
@@ -49,26 +27,21 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
+  <component name="PropertiesComponent">{
-  "keyToString": {
+  &quot;keyToString&quot;: {
-    "RunOnceActivity.ShowReadmeOnStart": "true",
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    "RunOnceActivity.git.unshallow": "true",
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    "git-widget-placeholder": "dev",
+    &quot;git-widget-placeholder&quot;: &quot;dev&quot;,
-    "node.js.detected.package.eslint": "true",
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    "node.js.detected.package.tslint": "true",
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    "node.js.selected.package.eslint": "(autodetect)",
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    "node.js.selected.package.tslint": "(autodetect)",
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    "nodejs_package_manager_path": "npm",
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    "settings.editor.selected.configurable": "preferences.keymap",
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.keymap&quot;,
-    "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/vue3_01_hello/node_modules/typescript/lib",
+    &quot;ts.external.directory.path&quot;: &quot;/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib&quot;,
-    "vue.rearranger.settings.migration": "true"
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
-  },
-  "keyToStringList": {
-    "vue.recent.templates": [
-      "Vue Composition API Component"
-    ]
   }
-}]]></component>
+}</component>
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
@@ -84,17 +57,98 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1745919613888</updated>
-      <workItem from="1745919615396" duration="2730000" />
+      <workItem from="1745919615396" duration="326000" />
+      <workItem from="1746189663982" duration="2970000" />
     </task>
-    <task id="LOCAL-00001" summary="新项目">
+    <task id="LOCAL-00001" summary="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue">
       <option name="closed" value="true" />
-      <created>1745920284467</created>
+      <created>1745928378301</created>
       <option name="number" value="00001" />
       <option name="presentableId" value="LOCAL-00001" />
       <option name="project" value="LOCAL" />
-      <updated>1745920284467</updated>
+      <updated>1745928378301</updated>
     </task>
-    <option name="localTasksCounter" value="2" />
+    <task id="LOCAL-00002" summary="setup 的新写法">
+      <option name="closed" value="true" />
+      <created>1745930176285</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1745930176285</updated>
+    </task>
+    <task id="LOCAL-00003" summary="ref 的简单实用">
+      <option name="closed" value="true" />
+      <created>1745930547660</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1745930547660</updated>
+    </task>
+    <task id="LOCAL-00004" summary="ref 变量 和 reaction 对象的使用">
+      <option name="closed" value="true" />
+      <created>1745931199936</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1745931199936</updated>
+    </task>
+    <task id="LOCAL-00005" summary="reaction 对象的使用 v-for">
+      <option name="closed" value="true" />
+      <created>1745932029058</created>
+      <option name="number" value="00005" />
+      <option name="presentableId" value="LOCAL-00005" />
+      <option name="project" value="LOCAL" />
+      <updated>1745932029058</updated>
+    </task>
+    <task id="LOCAL-00006" summary="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
+      <option name="closed" value="true" />
+      <created>1745934177134</created>
+      <option name="number" value="00006" />
+      <option name="presentableId" value="LOCAL-00006" />
+      <option name="project" value="LOCAL" />
+      <updated>1745934177134</updated>
+    </task>
+    <task id="LOCAL-00007" summary="ref、修改对象传入更新数据问题">
+      <option name="closed" value="true" />
+      <created>1745934687739</created>
+      <option name="number" value="00007" />
+      <option name="presentableId" value="LOCAL-00007" />
+      <option name="project" value="LOCAL" />
+      <updated>1745934687740</updated>
+    </task>
+    <task id="LOCAL-00008" summary="defineProps，实现简单的父传子">
+      <option name="closed" value="true" />
+      <created>1746189895108</created>
+      <option name="number" value="00008" />
+      <option name="presentableId" value="LOCAL-00008" />
+      <option name="project" value="LOCAL" />
+      <updated>1746189895108</updated>
+    </task>
+    <task id="LOCAL-00009" summary="使用 toRefs 让数据变为响应式的">
+      <option name="closed" value="true" />
+      <created>1746190968763</created>
+      <option name="number" value="00009" />
+      <option name="presentableId" value="LOCAL-00009" />
+      <option name="project" value="LOCAL" />
+      <updated>1746190968763</updated>
+    </task>
+    <task id="LOCAL-00010" summary="使用 toRef 一次只能取一次数据">
+      <option name="closed" value="true" />
+      <created>1746191210625</created>
+      <option name="number" value="00010" />
+      <option name="presentableId" value="LOCAL-00010" />
+      <option name="project" value="LOCAL" />
+      <updated>1746191210625</updated>
+    </task>
+    <task id="LOCAL-00011" summary="computed 计算属性，">
+      <option name="closed" value="true" />
+      <created>1746192333201</created>
+      <option name="number" value="00011" />
+      <option name="presentableId" value="LOCAL-00011" />
+      <option name="project" value="LOCAL" />
+      <updated>1746192333201</updated>
+    </task>
+    <option name="localTasksCounter" value="12" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -105,26 +159,25 @@
       <map>
         <entry key="MAIN">
           <value>
-            <State>
+            <State />
-              <option name="FILTERS">
-                <map>
-                  <entry key="branch">
-                    <value>
-                      <list>
-                        <option value="dev" />
-                      </list>
-                    </value>
-                  </entry>
-                </map>
-              </option>
-            </State>
           </value>
         </entry>
       </map>
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="新项目" />
+    <MESSAGE value="Vue2 &amp; Vue3 中data 与setup 数据的调用情况" />
-    <option name="LAST_COMMIT_MESSAGE" value="新项目" />
+    <MESSAGE value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue" />
+    <MESSAGE value="setup 的新写法" />
+    <MESSAGE value="ref 的简单实用" />
+    <MESSAGE value="ref 变量 和 reaction 对象的使用" />
+    <MESSAGE value="reaction 对象的使用 v-for" />
+    <MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
+    <MESSAGE value="ref、修改对象传入更新数据问题" />
+    <MESSAGE value="defineProps，实现简单的父传子" />
+    <MESSAGE value="使用 toRefs 让数据变为响应式的" />
+    <MESSAGE value="使用 toRef 一次只能取一次数据" />
+    <MESSAGE value="computed 计算属性，" />
+    <option name="LAST_COMMIT_MESSAGE" value="computed 计算属性，" />
   </component>
 </project>

README.md

@@ -1,33 +1,2 @@
-# vue3_01_hello
+# vue3 学习库
-
+111
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-pnpm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-pnpm dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-pnpm build
-```

src/App.vue

@@ -3,12 +3,8 @@ import Person from "@/components/Person.vue";
 </script>
 
 <template>
-  <header>
-
-  </header>
-
   <main>
-<Person />
+    <Person/>
   </main>
 </template>
 

src/assets/base.css

@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/assets/main.css

@@ -1,35 +1,9 @@
-@import './base.css';
+/*@import './base.css';*/
-
+*,
-#app {
+*::before,
-  max-width: 1280px;
+*::after {
-  margin: 0 auto;
+  box-sizing: border-box;
-  padding: 2rem;
+  margin: 0;
+  padding: 0;
   font-weight: normal;
 }
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

src/components/Person.vue

@@ -1,50 +1,48 @@
-<script  lang="ts">
+<script setup lang="ts">
-  export default {
+import {ref,computed} from "vue";
-    name:'Person',
-    data(){
-      return{
-        name:'张三',
-        age:18,
-        tel: '13700009999'
-      }
-    },
-    methods:{
-      //展示电话
-      showTel(){
-        alert(this.tel)
-      },
-      //修改电话
-      setTel(){
-        this.tel = '137888888888'
-      },
-      //修改年龄
-      setAge(){
-        this.age += 1;
-      }
-
-    }
 
+let firstName = ref('zhang')
+let listName =ref('san')
 
+// 计算属性有缓存
+let myName = computed({
+  //return firstName.value + listName.value
+  get(){
+    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + listName.value
+  },
+  set(setName){
+    const [val1 = '',val2 = ''] = setName.split('-')
+    firstName.value = val1
+    listName.value = val2
   }
+})
+
+function changeName(){
+  myName.value = 'li-si'
+}
+
 </script>
 
 <template>
-  <main class="setBox">
+  <main class="person">
-    <h1>姓名:{{name}}</h1>
+    姓：<input type="text" v-model:="firstName">
-    <h1>年龄:{{age}}</h1>
+    名：<input type="text" v-model:="listName">
-    <button @click="showTel">电话:{{name}}</button>
-    <button @click="setAge">年龄+1</button>
-    <button @click="setTel">电话修改</button>
   </main>
+  <h1>姓名：{{myName}}</h1>
+
+  <button @click="changeName">改名</button>
 </template>
 
 <style scoped>
-.setBox {
+button {
-  width: 100%;
+  margin: 0 1rem;
-  background-color: palegreen;
-  border-radius: 1.5rem;
-  padding: 3rem;
 }
+.person {
+  font-size: 2rem;
+  line-height: 2rem;
+  input{
+    height: 2rem;
 
-
+  }
+}
 </style>

vite.config.ts

@@ -8,7 +8,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 export default defineConfig({
   plugins: [
     vue(),
-    //vueDevTools(),
+    vueDevTools(),
   ],
   resolve: {
     alias: {