ahxin/Vue3-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Vue2 & Vue3 中data 与setup 数据的调用情况

Browse Source
This commit is contained in:
云上贵猪 2025-04-29 20:03:28 +08:00
parent 3b57cd0171
commit c8956bc0ab
3 changed files with 101 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
.idea/workspace.xml generated
View File

@ -1,20 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager"> <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="新项目">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" 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="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" /> <option name="LAST_RESOLUTION" value="IGNORE" />
</component> </component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="Vue Composition API Component" />
</list>
</option>
</component>
<component name="Git.Settings"> <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$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component> </component>
<component name="ProjectColorInfo"><![CDATA[{ <component name="ProjectColorInfo">{
"associatedIndex": 3 &quot;associatedIndex&quot;: 3
}]]></component> }</component>
<component name="ProjectId" id="2wOjf2pz32CUW5I0w9ht0hb3zbS" /> <component name="ProjectId" id="2wOjf2pz32CUW5I0w9ht0hb3zbS" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true" /> <component name="ProjectLevelVcsManager" settingsEditedManually="true">
<ConfirmationsSetting value="2" id="Add" />
</component>
<component name="ProjectViewState"> <component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
@ -23,15 +44,20 @@
"keyToString": { "keyToString": {
"RunOnceActivity.ShowReadmeOnStart": "true", "RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.git.unshallow": "true", "RunOnceActivity.git.unshallow": "true",
"git-widget-placeholder": "master", "git-widget-placeholder": "dev",
"node.js.detected.package.eslint": "true", "node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true", "node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)", "node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.tslint": "(autodetect)", "node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm", "nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "preferences.keymap", "settings.editor.selected.configurable": "preferences.keymap",
"ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/vue3_01_hello/node_modules/typescript/lib", "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
"vue.rearranger.settings.migration": "true" "vue.rearranger.settings.migration": "true"
},
"keyToStringList": {
"vue.recent.templates": [
"Vue Composition API Component"
]
} }
}]]></component> }]]></component>
<component name="SharedIndexes"> <component name="SharedIndexes">
@ -49,11 +75,47 @@
<option name="number" value="Default" /> <option name="number" value="Default" />
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1745919613888</updated> <updated>1745919613888</updated>
<workItem from="1745919615396" duration="326000" /> <workItem from="1745919615396" duration="2730000" />
</task> </task>
<task id="LOCAL-00001" summary="新项目">
<option name="closed" value="true" />
<created>1745920284467</created>
<option name="number" value="00001" />
<option name="presentableId" value="LOCAL-00001" />
<option name="project" value="LOCAL" />
<updated>1745920284467</updated>
</task>
<option name="localTasksCounter" value="2" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" /> <option name="version" value="3" />
</component> </component>
<component name="Vcs.Log.Tabs.Properties">
<option name="TAB_STATES">
<map>
<entry key="MAIN">
<value>
<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="新项目" />
<option name="LAST_COMMIT_MESSAGE" value="新项目" />
</component>
</project> </project>

35
README.md
View File

@ -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
```

41
src/components/Person.vue
View File

@ -3,38 +3,37 @@
name: 'Person', name: 'Person',
data(){ data(){
return { return {
name:'张三', a: 'vue2 data 中的数据',
age:18, b: 0,
tel: '13700009999'
} }
}, },
// vue2 的方法 methods
methods:{ methods:{
//展示电话 vue2Data(){
showTel(){ console.log(this.age + 1)
alert(this.tel) }
}, },
//修改电话 // setup vue3 新语法
setTel(){ setup(){
this.tel = '137888888888' let age = 18
}, //会报错 因为setup 比data 还要在前面 所以无法在此使用 data 中的数据，报错内容：
//修改年龄 // Uncaught (in promise) Error: A listener indicated an asynchronous
setAge(){ // response by returning true, but the message channel closed before
this.age += 1; // a response was received
//let x = this.a
return {age}
} }
} }
}
</script> </script>
<template> <template>
<main class="setBox"> <main class="setBox">
<h1>姓名:{{name}}</h1> <h1>setup 的 age:{{age}}</h1>
<h1>年龄:{{age}}</h1> <!--<h1>姓名:{{name}}</h1>-->
<button @click="showTel">电话:{{name}}</button> <hr>
<button @click="setAge">年龄+1</button> <button @click="vue2Data">这是从vue2 调动 vue3 setup的年龄 + 1</button>
<button @click="setTel">电话修改</button>
</main> </main>
</template> </template>
@ -45,6 +44,4 @@
border-radius: 1.5rem; border-radius: 1.5rem;
padding: 3rem; padding: 3rem;
} }
</style> </style>