vue3学习(更新中)

创建一个vue应用

npm create vue@latest

编写APP组件

main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

APP.vue

<template>
  <div class="app">
    app
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

setup

<template>
   <div>{{ name }}</div>
</template>

<script lang="ts" setup name="Person2">
   const name = 'zhangsan'
</script>

name="Person2"需要安装下面的插件

插件
npm i vite-plugin-vue-setup-extend -d

ref和reactive

ref

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回

1、创建基本类型的响应式数据

import { ref } from 'vue'
const name = ref('zhangsan')

2、创建对象类型的响应式数据

<template>
   <div>{{ info.name }}</div>
   <button @click="change">修改</button>
</template>

<script lang="ts" setup name="Person2">
import { ref } from 'vue'
const info = ref({
   name: 'aaa'
})
function change () {
   info.value.name = 'bbb'
}
</script>

reactive

只能创建对象类型的响应式数据

<template>
   <div>{{ info.name }}</div>
   <button @click="change">修改</button>
</template>

<script lang="ts" setup name="Person2">
import { reactive } from 'vue'
const info = reactive({
   name: 'aaa'
})
function change () {
   info.name = 'bbb'
}
</script>