---

知识回顾

前言

Vue项目介绍

源码分析

1. 项目结构介绍（单页面应用程序）

VUE-DEMO
│─node_modules	          第三包文件夹
├─public                	放html文件的地方
| └─favicon.ico 	      	网站图标
├─src 			              源代码目录 → 以后写代码的文件夹
│  └─assets 	           	静态资源目录 → 存放图片、字体等
│  └─components         	组件目录 → 存放通用组件
│  └─App.vue   		        App根组件 → 项目运行看到的内容就在这里编写  
│  └─main.ts   		        入口文件 → 打包或运行，第一个执行的文件 
└─.eslintrc.cjs     	  	eslint配置文件
└─.gitignore     	      	git忽视文件
└─.prettierrc.json     		prettierrc配置文件
└─env.d.ts     		        ts代码智能提示使用
└─index.html          		index.html 模板文件
└─package.json		        项目配置文件 → 包含项目名、版本号、scripts、依赖包等
└─pnpm-lock.yaml 	      	pnpm锁文件，由pnpm自动生成的，锁定安装版本
└─README.md 	          	项目说明文档
└─tsconfig.app.json     	ts项目配置文件
└─tsconfig.json 	      	ts配置文件
└─tsconfig.app.json     	ts的node环境配置文件
└─vite.config.js 		      create-vue配置文件

2. 项目运行流程图(单页面应用程序)

项目运行后执行main.ts
main.ts中会执行app.vue文件，导入createapp方法，导入app.vue , 创建app实例对象
最后渲染到index.html容器中

3. 选项式和组合式api

• 选项式

<template><button @click="toggle">显示隐藏图片</button><img v-show="show" alt="Vue logo" src="./assets/logo.png" /><hr />计数器：{{ count }} <button @click="increment">累加</button>
</template>
<script>
export default {data() {return {show: true,count: 0}},methods: {toggle() {this.show = !this.show},increment() {this.count++}}
}
</script>

• 组合式

<template><button @click="toggle">显示隐藏图片</button><img v-show="show" alt="Vue logo" src="./assets/logo.svg" /><hr />计数器：{{ count }} <button @click="increment">累加</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
const toggle = () => {show.value = !show.value
}
const count = ref(0)
const increment = () => {count.value++
}
</script>

4. 插值表达式 {{}} 胡子语法

插值表达式是一种Vue的模板语法, 我们可以用插值表达式渲染出Vue提供的数据

• 作用：利用表达式进行插值，渲染到页面中
• 表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果

注意事项：

1. 在插值表达式中使用的数据 必须在setup函数中进行了提供
2. 支持的是表达式，而非语句，比如：if for …
3. 不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)

<template><div>{{ title }}</div><div>{{ sum(100, 200) }}</div><p>{{ array[1] }}</p>
</template><script setup lang="ts">
const title = 'test'
const sum = (num1: number, num2: number) => {return num1 + num2
}
const array = [1, 2, 3]
</script>

5. reactive函数

<template><button @click="onClick">点击我</button><button @click="addAge">增加年龄</button><button @click="addHobbies">新增爱好</button>
</template><script setup lang="ts">
import { reactive } from 'vue'
const person = reactive({name: '张三',age: 18,friend: {name: '李四',age: 20,hobbies: ['打游戏', '看电影']}
})
const onClick = () => {console.log('点击了')alert('点击了我')
}
const addAge = () => {person.age++console.log(person.age)
}
const addHobbies = () => {person.friend.hobbies.push('看书')console.log(person.friend.hobbies)
}
</script>

6. ref表达式

<template><div>年龄{{ age }}</div><button @click="changeAge">修改年龄</button><div>{{ person }}</div><button @click="changePersonAge">修改person中年龄</button>
</template><script setup lang="ts">
import { reactive, ref } from 'vue'const age = ref(18)
const changeAge = () => {age.value++
}
const person = ref({ name: '张三', age: 18 })
const changePersonAge = () => {person.value.age++
}
</script>

拓展知识

reactive和ref的选择

1. 开始分析
   ● reactive 可以转换对象成为响应式数据对象，但是不支持简单数据类型。
   ● ref 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 .value 。
   ● 它们各有特点，现在也没有最佳实践，没有明显的界限，所有大家可以自由选择。
2. 推荐用法
   ● 如果能确定数据是对象且字段名称也确定，可使用 reactive 转成响应式数据，其他一概使用 ref 。这样就没有心智负担 。

总结