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

2025-05-02 21:32:18 +08:00 · 2025-05-02 21:32:12 +08:00 · 2025-05-02 21:32:07 +08:00 · 2025-05-02 21:32:02 +08:00 · 2025-05-02 21:31:12 +08:00 · 2025-05-02 21:25:32 +08:00
8 changed files with 165 additions and 262 deletions
--- a/.idea/workspace.xml
+++ b/.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="新项目">
-      <change afterPath="$PROJECT_DIR$/vue3_01_hello/src/components/Person.vue" afterDir="false" />
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="computed 计算属性，">
      <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$/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" />
+      <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" 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[{
-  "associatedIndex": 3
-}]]></component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 3
+}</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[{
-  "keyToString": {
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "RunOnceActivity.git.unshallow": "true",
-    "git-widget-placeholder": "dev",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "settings.editor.selected.configurable": "preferences.keymap",
-    "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/vue3_01_hello/node_modules/typescript/lib",
-    "vue.rearranger.settings.migration": "true"
-  },
-  "keyToStringList": {
-    "vue.recent.templates": [
-      "Vue Composition API Component"
-    ]
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;dev&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.keymap&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
  }
-}]]></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>
-              <option name="FILTERS">
-                <map>
-                  <entry key="branch">
-                    <value>
-                      <list>
-                        <option value="dev" />
-                      </list>
-                    </value>
-                  </entry>
-                </map>
-              </option>
-            </State>
+            <State />
          </value>
        </entry>
      </map>
    </option>
  </component>
  <component name="VcsManagerConfiguration">
-    <MESSAGE value="新项目" />
-    <option name="LAST_COMMIT_MESSAGE" value="新项目" />
+    <MESSAGE value="Vue2 &amp; Vue3 中data 与setup 数据的调用情况" />
+    <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>
--- a/README.md
+++ b/README.md
@ -1,33 +1,2 @@
-# vue3_01_hello
-
-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
-```
+# vue3 学习库
+111
--- a/src/App.vue
+++ b/src/App.vue
@ -3,12 +3,8 @@ import Person from "@/components/Person.vue";
 </script>

 <template>
-  <header>
-
-  </header>
-
  <main>
-<Person />
+    <Person/>
  </main>
 </template>

--- a/src/assets/base.css
+++ b/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;
-}
--- a/src/assets/logo.svg
+++ b/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>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -1,35 +1,9 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+/*@import './base.css';*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  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;
-  }
-}
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@ -1,50 +1,48 @@
-<script  lang="ts">
-  export default {
-    name:'Person',
-    data(){
-      return{
-        name:'张三',
-        age:18,
-        tel: '13700009999'
-      }
-    },
-    methods:{
-      //展示电话
-      showTel(){
-        alert(this.tel)
-      },
-      //修改电话
-      setTel(){
-        this.tel = '137888888888'
-      },
-      //修改年龄
-      setAge(){
-        this.age += 1;
-      }
-
-    }
+<script setup lang="ts">
+import {ref,computed} from "vue";

+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">
-    <h1>姓名:{{name}}</h1>
-    <h1>年龄:{{age}}</h1>
-    <button @click="showTel">电话:{{name}}</button>
-    <button @click="setAge">年龄+1</button>
-    <button @click="setTel">电话修改</button>
+  <main class="person">
+    姓：<input type="text" v-model:="firstName">
+    名：<input type="text" v-model:="listName">
  </main>
+  <h1>姓名：{{myName}}</h1>
+
+  <button @click="changeName">改名</button>
 </template>

 <style scoped>
-.setBox {
-  width: 100%;
-  background-color: palegreen;
-  border-radius: 1.5rem;
-  padding: 3rem;
+button {
+  margin: 0 1rem;
 }
+.person {
+  font-size: 2rem;
+  line-height: 2rem;
+  input{
+    height: 2rem;

-
+  }
+}
 </style>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -8,7 +8,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 export default defineConfig({
  plugins: [
    vue(),
-    //vueDevTools(),
+    vueDevTools(),
  ],
  resolve: {
    alias: {
Author	SHA1	Message	Date
云上贵猪	83c3cff7a5	Merge remote-tracking branch 'vue3-学习仓库/dev' into dev	2025-05-02 21:32:18 +08:00
云上贵猪	2382ac66c8	Merge remote-tracking branch 'vue3-学习仓库/dev' into dev	2025-05-02 21:32:12 +08:00
云上贵猪	37b6769d0f	Merge remote-tracking branch 'vue3-学习仓库/dev' into dev	2025-05-02 21:32:07 +08:00
云上贵猪	f047e0c27a	computed 写法是标准的带 get/set 的计算属性写法	2025-05-02 21:32:02 +08:00
云上贵猪	7ef7c714fc	computed 写法是标准的带 get/set 的计算属性写法	2025-05-02 21:31:12 +08:00
云上贵猪	665f175129	computed 计算属性，	2025-05-02 21:25:32 +08:00
云上贵猪	366d910999	使用 toRef 一次只能取一次数据	2025-05-02 21:06:49 +08:00
云上贵猪	cf9a4c7f0d	使用 toRefs 让数据变为响应式的	2025-05-02 21:02:47 +08:00
云上贵猪	24be73a538	defineProps，实现简单的父传子	2025-05-02 20:44:48 +08:00
云上贵猪	3774ab0b28	ref、修改对象传入更新数据问题	2025-04-29 21:51:25 +08:00
云上贵猪	2303e5b333	使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题	2025-04-29 21:42:56 +08:00
云上贵猪	93379692b2	reaction 对象的使用 v-for	2025-04-29 21:07:08 +08:00
云上贵猪	95413620f5	ref 变量和 reaction 对象的使用	2025-04-29 20:53:18 +08:00
云上贵猪	1afc441a09	ref 的简单实用	2025-04-29 20:42:26 +08:00
云上贵猪	3af4711dfb	setup 的新写法	2025-04-29 20:36:15 +08:00
云上贵猪	ccd0d93e27	Merge remote-tracking branch 'vue3-学习仓库/dev' into dev # Conflicts: # .idea/workspace.xml # README.md # src/components/Person.vue	2025-04-29 20:06:16 +08:00
云上贵猪	c8956bc0ab	Vue2 & Vue3 中data 与setup 数据的调用情况	2025-04-29 20:03:28 +08:00
云上贵猪	3b57cd0171	在 Vue3 中使用 Vue2 语法编写一个简单组件	2025-04-29 18:35:46 +08:00
				`@ -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>`