import { createApp } from 'vue'
import App from './App.vue';  //根组件
const app = createApp(App); 

1)、挂载应用:应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：
app.mount('#app')
例：<div id="app"></div>
2)、应用配置：通过 .config 对象配置应用级的选项

单文件组件 (SFC) 语法格式: <script setup>为例,使用组合式 API 的编译 （默认官方推荐）。
组件定义在一个单独的 .vue 文件中
vue样式 ：
<style lang="scss" scoped></style> ：只影响当前组件的样式，否则为全局样式
响应式状态需要明确使用响应式 API 来创建:  import { ref } from 'vue'

注：在 DOM 中书写模板时，应该使用 kebab-case 格式并显式地关闭这些组件的标签，例：<template></template>
双大括号会将数据解释为纯文本

1)动态参数绑定：
例：<a @[eventName]="doSomething"> ：表示当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus
2)、绑定 HTML class
   例：<div :class="{ active: isActive }"></div> ：表示 active 是否存在取决于属性 isActive 的真假值

1)、v-if(必须依附于某个元素，也可在<template>上使用) /v-else-if  / v-else(必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别)

2)、v-show（在 DOM 渲染中保留该元素，仅切换了该元素上名为 display 的 CSS 属性，可在<template>上使用，也不能和 v-else 搭配使用）
	v-show：dom中增加一个行内样式 display: none
3)、v-if 和 v-show的区别：
v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

注：官方推荐, 使用v-for的时候, 加上一个 key 属性，key的作用是为了高效的更新虚拟DOM，具有唯一性, 不然就没意义
	可在<template>上使用;同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
	
	若 v-if 和 v-for 同时存在于一个元素上的时候，v-if 的优先级更高，会首先被执行;
	解决：
	<template v-for="todo in todos">
	  <li v-if="!todo.isComplete">
		{{ todo.name }}
	  </li>
	</template>

1)、遍历一个数组：v-for="item in items" / v-for="item of items"
使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名;
也支持使用可选的第二个参数表示当前项的位置索引 v-for="(item, index) in items";
	
	例：<li v-for="(item, index) in items">
		  {{ parentMessage }} - {{ index }} - {{ item.message }}
		</li>
		
	语法和JavaScript类似
	items.forEach((item, index) => {
	  console.log(item.message, index)
	})

2)、遍历对象及属性：
	第二个参数表示属性名,第三个参数表示位置索引;
	
	例：<li v-for="(value, key, index) in myObject">
		  {{ index }}. {{ key }}: {{ value }}
		</li>
	
3)、模板引用

	响应式数据：ref、reactive、computed、watch，通过 provide 和 inject 来实现父子组件之间的数据传递
	
	A. ref 函数用于创建一个包装器对象，它会将值转化为响应式对象。在访问 ref 包装的值时需要使用 .value 属性
	如果是基本数据类型 ：则使用ref函数，它是一个特殊的属性，它允许在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用；
	例：import { ref } from 'vue'
		const count = ref(0)
		count.value++; // 视图将自动更新
	
	B. reactive 函数用于将普通 JavaScript 对象转化为响应式对象。响应式对象中的属性被修改时，可以自动更新视图。
	如果是一个对象或数组,则使用reactive函数。
	注：局限性：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)，不适用string、number 或 boolean等类型
	
	例：import { reactive } from 'vue'
		const state = reactive({
		  count: 0
		})
		state.count++; // 视图将自动更新
	
	C. computed 函数用于创建一个计算属性，它会根据响应式对象中的属性值来计算一个新的值。
    例：import { reactive, computed } from 'vue'
      const state = reactive({
        count: 0
      })
		 const doubleCount = computed(() => state.count * 2)
	   console.log(doubleCount.value) // 0 注:在访问计算属性的值时需要使用 .value 属性。
	
	D. watch（侦听器） ：用于监测响应式对象中的属性变化，并执行对应的回调函数。
	
4）数据绑定：v-model实现表单元素和数据的双向绑定

computed / methods区别 ：
  若多次使用的时候:
  methods: 每次都会调用;
  computed: 计算机会缓存, 不变的情况下只调用一次

1)、要使用一个子组件，需要在父组件中导入它;
	若要将导入的组件暴露给模板，需要在 components 选项上注册它。这个组件将会以其注册时的名字作为模板中的标签名。
	在单文件组件中，推荐为子组件使用 PascalCase 的标签名
	
	例：子组件注册名称：<user-list ref="materialsRef"  /> 
  
		  引入组件：import UserList from './UserList.vue'	

2)、传递 Props ：用于将数据从父组件传递到子组件。
		子组件可以通过定义 props 对象来声明需要接收的属性及其类型。
    	父组件可以通过向子组件添加属性来将数据传递给子组件。
    
		遵循单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递，但不可在子组件中更改 props 绑定值；
		Props 是一个特殊的属性，在组件上声明注册。若要传递给子组件，必须在父组件的 props 列表上声明它；
		一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值
	    如果一个 prop 的变量名很长，则采用 camelCase 形式；
		Props 参数校验：
		所有 prop 默认都是可选的，除非声明了 required: true；
		除 Boolean 外的未传递的可选 prop 将会有一个默认值 undefined；
        Boolean 类型的未传递 prop 将被转换为 false。
		
		例：
		defineProps({
		  // 基础类型检查 
		  propA: Number, //给出 `null` 和 `undefined` 值则会跳过任何类型检查
		  // 多种可能的类型
		  propB: [String, Number],
		  // 必传，且为 String 类型,且有默认值
		  propC: {
			type: String,
			required: true,
			default: 'aaa'
		  },
		  // Number 类型的默认值
		  propD: {
			type: Number,
			default: 100
		  },
		  // 对象类型的默认值
		  propE: {
			type: Object,
			// 对象或数组的默认值
			// 必须从一个工厂函数返回。
			// 该函数接收组件所接收到的原始 prop 作为参数。
			default : () => {
				//return { message: 'hello' }
			},
		  },
		})
		
3)传递 emit ：子组件数据传递到父组件-用来触发父组件里面绑定的函数并可以传参回父组件(刷新父页面)

4)、子组件中，vue提供了 defineExpose 来向外暴露属性和方法
	defineExpose({
		handleEdit（方法）
	})
	
5）要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API

1)、全局注册、局部注册
2)、将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件；
	使用 kebab-case 形式作为注册组件的格式,并以"/>" 结束标签；
   使用 PascalCase 形式作为组件名。
   
   例：<user-list ref="materialsRef"  /> 
       import UserList from "./UserList"
3)、<script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖(ES6的编码规范风格)。
	若需要使用 TypeScript，则将 lang 属性添加到 <script> 代码块上，并赋值 ts；
   
   例：<script lang='ts' setup>

1)使用 camelCase 形式命名事件，使用 kebab-case 形式来监听事件；

例：<el-icon @click="handleClick"><RefreshRight /></el-icon>
    <el-icon @some-event="handleClick"><RefreshRight /></el-icon>

2)声明触发的事件
const emit = defineEmits(['inFocus', 'submit'])

1)功能强大： 基于 Ajax 封装的 XMLHttpRequest 网络请求库，拥有多种请求方式;
2)支持Promise API 且 浏览器支持良好;
3)支持并发请求，提高了请求效率及性能;
4)能够拦截请求和响应： 便于自定义封装一些根据实际请求，需要更改的内容;
5)promise是对象接受resolve和reject两个参数，当一个异步动作发生时，promise对象会通过resolve完成对动作成功进行解析，reject会捕获这个动作的异常。
例：
return new Promise((resolve, reject) => {
	axios.get(url, {params}
	
		).then((res) => {
			//成功的时候调用resolve
			resolve(res.data);
		}).catch((err) => {
			//失败的时候调用reject
			reject(err);
		});
});