一、main.js入口文件的不同

// 引入的不再是构造函数，引入了一个名为creacteApp的工厂函数
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 创建应用示例对象--->app
const app = createApp(App)
//把组件APP挂载到#app节点上
app.mount('#app')

二、组件中的模板结构允许没有跟标签

三、setup(这个非常重要)

组件中用到的：数据、方法等等，均要配置配置在setup中

setup中的变量不用this.变量获取了因为本身就在同一个方法中(同一个作用域)

setup返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点）

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{name}}</h2>
  <button @click="sayHello">说话</button>
</template>

<script>
export default {
	name: 'App',
	// 此时只是测试一下setup, 暂时不考虑响应式的问题。
	setup() {
		// 数据
		let name = '张三'
		let age = 18
		// 方法
		function sayHello() {
			alert(`我叫${name}. 我${age}岁了, 你好呀`)
		}
		//返回一个对象(常用) 对象里的属性可以直接在模板中使用
		return {
			name: name,
			age: age,
			sayHello,
		}
	}
}
</script>

效果：

四、ref函数

作用：定义一个响应式的数据

语法： const xxx = ref(initValue)

创建一个包含响应式数据的引用对象（reference对象，简称ref对象）

操作数据： xxx.value

模板中读取数据不需要.value，例如; <div>{{xxx}}</div>

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>职业：{{obj.type}}</h2>
  <h2>职业：{{obj.salery}}</h2>
  <button @click="changeInfo">修改人员信息</button>
</template>
<script>
import {ref} from 'vue'
export default {
	name: 'App',
	setup() {
		// 数据
		let name = ref('张三')
		let age = ref(18)
		let obj = ref({ // 这里对象用的是ref
			type: '前端工程师',
			salery: '30k',
		})
		// 方法
		function changeInfo() {
			name.value = "李四", 	
			age.value = 48,
			obj.value.type = 'UI设计师', // 由于用的是ref 所以修改值才用obj.value.type
			obj.value.salary = '60k', // 由于用的是ref 所以修改值才用obj.value.salary
		}
		//返回一个对象(常用) 对象里的属性可以直接在模板中使用
		return {
			name: name,
			age: age,
			obj,
			changeInfo,
		}
	}
}
</script>

效果：